Table of contents
Okay, it's here today, I hope to help you! ! !
1. What is a mini program?
WeChat Mini Program (wei xin xiao cheng xu), referred to as Mini Program, English name Mini Program, is a kind of that does not require downloading and installation A ready-to-use application (Zhang Xiaolong’s definition of it is that it does not require installation and can be used immediately. In fact, it does need to be installed, but the size of the mini program is very small and the download speed is very fast. Users cannot feel the downloading process)
At 0:00 on January 9, 2017, the much-anticipated first batch of WeChat mini programs were officially launched in a low-key manner.
- An applet is a lightweight application that runs on a mobile device and provides functionality and experience similar to traditional applications. Mini programs usually do not require downloading and installation, and can be run directly in the operating system environment of the mobile phone, such as WeChat, Alipay, etc.
- Mini programs can meet users' specific needs, such as online shopping, food delivery, news reading, social entertainment, etc. They usually have simple interfaces and fast loading speeds to provide a convenient usage experience.
- Compared with traditional applications, mini programs do not need to occupy mobile phone storage space, and upgrades and updates are more convenient. At the same time, mini programs can also run across platforms, providing developers with a broader user base.
- Mini program is a flexible and convenient application form that brings more convenience and choices to users.
2. What can mini programs do?
- It is a light application that complements the App, provides similar functions to the App, and is simpler to operate than the App.
- You can download it by scanning or searching on WeChat
- Functional software that users don’t use frequently but have to use. At present, it seems that small programs are the first choice.
- Connect online and offline
- Low development threshold and low cost
3. Getting Started
Related information: WeChat public platform
The first step in developing a mini program is to have a mini program account. Through this account, you can manage your mini program.
Follow this tutorial and start your mini program journey! ! !
3.1. Registration
Enter
Mini program registration page
https://mp.weixin.qq.com/wxopen/waregister?action=step1Fill in the information according to the guidelines If you submit the corresponding information, you can have your own mini program account.
Mini program registration
After filling in the information, a link will be sent for activation based on the email account you entered. Click in to register the information (real-name authentication is required). There will be a type in the selection, just select individual. .
3.2. Installation
Go to
Developer tools download page
"Introduction to Developer Tools"
You can download other versions according to your needs.
Note: If the computer system is Windows 7, you need to download version 1.05 before you can use it.
3.3.Create project
After the download and installation is complete, open the WeChat Developer Tools. If it is a QR code, just use the WeChat code you registered to log in! ! !
Then proceed to the project of creating a WeChat applet, click on the middle +
Note: There are many templates to choose from, and you can create a few more project structures to familiarize yourself with the development tool
Here the AppID needs to be obtained from your registered account:
After scanning the WeChat code to log in, enter & log in
Little introduction stage
Select Development --> Development Management --> Development Settings
Find your AppID in the development settings, fill it in to the AppID of the created project, and then click Finish.
Note: You need to wait a moment during the project creation process. You can only operate after you see your WeChat avatar in the simulator on the left
3.4.Project structure
The applet contains one
appdescribing the overall program and multiplepagedescribing each page.
The main part of a small program consists of three files, which must be placed in the root directory of the project, as follows:
| document | required | effect |
|---|---|---|
| app.js | yes | Mini program logic |
| app.json | yes | Mini program public configuration |
| app.wxss | no | Mini program public style sheet |
A mini program page consists of four files, namely:
| file type | required | effect |
|---|---|---|
| js | yes | Page logic |
| wxml | yes | Page structure |
| json | no | Page configuration |
| wxss | no | Page style sheet |
.jsonsuffixedJSONconfiguration file.wxmlsuffixedWXMLtemplate file.wxsssuffixedWXSSstyle file.jssuffixedJSscript logic file
Detailed picture:
Note: A page & page name of user in the picture
3.5.Application
After we create the project, there will be two pages, one is the homepage and the other is the log.
You can view and operate it in the simulator on the left.
As shown in the picture:
Next we continue to get started with a basic use
Create a new page in the app.json file in the body as: user
{
"pages":[
"pages/user/user",
"pages/index/index",
"pages/logs/logs"
],Combine the Vue technical points we have learned to code the mini program page
Find user.json in the file that created the user and make page-related settings.
{
"usingComponents": {},
"navigationBarBackgroundColor": "#aaa"
}Find user.wxss in the file that created the user and perform page-related style settings.
/* pages/user/user.wxss */
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
color: #aaa;
}
.btn{
margin: 20px;
}Find user.js in the file where user is created, and write page Vue variables and methods in Page
data: {
userName:'爱坤'
},
clickMe(){
console.log('用户已经点击了');
},Find user.wxml in the file that created the user and lay out the page.
<view class="container">
<view class="userinfo">
用户名称 : {
{userName}}
<button class="btn" type="primary" plain="true" bindtap="clickMe" >点击我</button>
</view>
</view>Open the simulator, editor, and debugger to test the code you wrote.
The effect is as shown below:
