Applet Foundation
What is a wechat applet
Wechat applet is an application that can be used without downloading and installing. It realizes the dream of "within reach" of the application. Users can open the application by scanning or searching. In the process of using wechat applet, users only increase, and many companies begin to develop their own applet.
Experience applet
Register wechat applet
If you don't have an account of wechat public platform, please enter the homepage of wechat public platform first and click the "register now" button to register. The registered account types can be subscription number, service number, applet and enterprise wechat. We can select "applet".
Then fill in the account information. It should be noted that the filled mailbox must be an email that is not registered by the wechat public platform and bound by personal wechat, and each mailbox can only apply for one applet.
After activating the mailbox, select the subject type as "personal type" and register the subject information as required. The subject information cannot be modified after submission. The subject will become the only legal subject and contracting subject for you to use various services and functions of the wechat public platform, and shall not be changed or modified during subsequent opening of other business functions.
If everything is OK, you can directly enter the management platform of the applet. If the direct jump fails, you can also log in manually from the wechat public platform. Fill in the basic information of the applet, including name, icon, description, etc. After the submission is successful, add the developer. Developers are administrators by default. We can also add bound developers here. This is an operation only administrators have permission.
Then click "Settings" in the left navigation bar to find the development settings and obtain the AppID of the applet.
Wechat developer tools
download Wechat web developer tool ], download the corresponding installation package according to your own operating system for installation.
Open the developer tool and log in to the developer tool with wechat scanning code.
First applet
New project
Open the developer tool, select "applet project", and click "+" in the lower right corner to create a new project.
Select an empty folder as the project directory, fill in the just AppID, and then fill in a project name. Click "OK" to enter the tool main interface.
Project directory structure
The basic file structure and project directory structure of wechat applet are described as follows:
.
├── app.js # Applet logic file
├── app.json # Applet configuration file
├── app.wxss # Global common style file
├── pages # Each page where the applet is stored
│ ├── index # index page
│ │ ├── index.js # Page logic
│ │ ├── index.wxml # Page structure
│ │ └── index.wxss # Page style sheet
│ └── logs # logs page
│ ├── logs.js # Page logic
│ ├── logs.json # Page configuration
│ ├── logs.wxml # Page structure
│ └── logs.wxss # Page style sheet
├── project.config.json
└── utils
└── util.js
- wxml is similar to HTML file, which is used to write the tags and skeleton of the page, but it can only use the components encapsulated by the applet itself;
- Wxss is similar to CSS file, which is used to write page styles, but the CSS file is replaced by wxss file;
- js file is similar to JavaScript file in front-end programming, which is used to write page logic of applet;
- The json file is used to configure the style and behavior of the page.
Header and footer
Before building the page content, we deal with the header and footer. We can easily guess that these two parts belong to the global configuration of the applet, so we need to modify the app JSON file.
The initial content is as follows:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "balack"
}
}
The pages property is used to set the page path. It is an array, and each item is a string to specify which pages the applet is composed of. The first entry in the array represents the initial page of the applet. To add or reduce pages in the applet, you need to modify the pages array.
The window property is used to set the status bar, navigation bar, title and window background color of the applet.
We modify the title and color of the page header. We make a tab bar at the end of the page to switch pages. This property is called tabBar. The code is as follows:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#2f2f8f",
"navigationBarTitleText": "GoZeroWaste",
"navigationBarTextStyle":"white"
},
"tabBar":{
"color": "#bfc1ab",
"selectedColor": "#13b11c",
"backgroundColor": "#1f1f4f",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "image/icon_component.png",
"selectedIconPath": "image/icon_component_HL.png",
"text": "Personal Center"
},
{
"pagePath": "pages/details/details",
"iconPath": "image/icon_API.png",
"selectedIconPath": "image/icon_API_HL.png",
"text": "My project"
}
]
}
}
Installing the WEUI component
1. Check whether npm is installed
Check the version of npm through npm -v. if the corresponding version number can be displayed, it indicates that the installation is successful.
2. If not installed
Using npm init will prompt that it is not an internal command
At this time, you need to install the node environment. You can nodex download address Download the corresponding version
3. Enter the applet root directory (the directory where app.js is located), open cmd,
Input: npm init -y
Input: NPM I miniprogram SM crypto -- production download miniprogram dependency
4. Check the use of npm dependencies
5. Click the tool of wechat developer tool = > build npm
Waiting to build
6. After the build is completed, you can start happy development!!
Back end: https://gitee.com/wuxiaameng/ec9_back.git
pc front end: https://gitee.com/wuxiaameng/ec9_front.git
Applet front end: https://gitee.com/wuxiaameng/hello-git.git