1.1 Introduction to the composition of the applet framework
1.1.1 Create a new page
Steps to create a new page:
-
On the pages directory, right-click and select "New Folder", for example: create a cart folder
-
On the cart folder, right-click and select "New page" to generate the frame of the page (composed of four files)
-
The corresponding directory in the app.json file will be automatically generated and placed in the pages field. You just need to manually adjust the order in which certain pages are displayed. If no adjustment is required. The default is fine.
2.1.2 Settings page top
Set in the windows field in the app.json file:
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle": "black"
},| Attributes | Types of | Defaults | describe |
|---|---|---|---|
| backgroundTextStyle | string | dark | Drop-down loading style, only supports dark/light |
| navigationBarBackgroundColor | HexColor | #000000 | Navigation bar background color, such as#000000 |
| navigationBarTitleText | string | Navigation bar title text content | |
| navigationBarTextStyle | string | white | Navigation bar title color, only supports black/white |
For detailed description of applet configuration/page configuration/configuration items, please refer to the official website of the applet:
Page Configuration | WeChat Open Documentation
2.1.3 Set the bottom navigation of the tabBar
If the applet is a multi-tab application (there is a tab bar at the bottom or top of the client window to switch pages), you can specify the performance of the tab bar and the corresponding page displayed when the tab is switched through the tabBar configuration item.
Set in the tabBar field in the app.json file:
"tabBar": {
"backgroundColor": "#181E2C",
"color" : "#fff",
"selectedColor" : "#de3120",
"list": [
{
"pagePath": "pages/index/index",
"text" : "点餐",
"iconPath" : "/images/footer_btn_1.png",
"selectedIconPath" : "/images/footer_btn_1_active.png"
},
{
"pagePath": "pages/cart/cart",
"text" : "购物车",
"iconPath" : "/images/footer_btn_2.png",
"selectedIconPath" : "/images/footer_btn_2_active.png"
},
{
"pagePath": "pages/user/user",
"text" : "我的",
"iconPath" : "/images/footer_btn_3.png",
"selectedIconPath" : "/images/footer_btn_3_active.png"
}
]
},Preview:
Framework--Page Configuration--Global Configuration Document--tabBar, participate, the official website of the applet:
Global Configuration | WeChat Open Documentation
1.2 Explanation of applet life cycle and page life cycle
The life cycle function of the applet:
The life cycle function of the applet is called in app.js, and the App(Object) function is used to register an applet.
Accepts an Object parameter, specifying the lifecycle callback of its applet
Generally, there are lifecycle callback functions such as onLaunch monitoring applet initialization, onShow monitoring applet display, and onHide monitoring applet hiding.
When the applet starts, execute onLaunch>onshow first, and then execute the page onload>onshow>onready
2.2.1 Mini Program Life Cycle
-
onLaunch monitor applet initialization
-
onShow monitor applet display
-
onHide monitors applet hiding
// app.js
App({
// 监听小程序初始化
onLaunch() {
console.log('onLaunch 监听小程序初始化')
},
onShow(){
console.log('onShow 监听小程序显示')
//你可以在生命周期函数中，去做一些 你想做的事情，例如：输出当前系统年份
let date = new Date()
console.log(date.getFullYear())
},
onHide(){
console.log('onHide 监听小程序隐藏')
},
globalData: {
userInfo: null
}
})View "Debugger" -- "Console Console", preview:
From the above demonstration, we can know that the calling sequence of the life cycle function of the applet is: onLaunch>onShow>onHide
2.2.2 Page Life Cycle
The life cycle of each page is set in the xxx.js file of the corresponding page. If we set the page life cycle of the current home page in index.js in the index folder in pages:
In this page, write the following lifecycle functions.
-
onload
-
onshow
-
onready
-
onhide
-
onunload
In the index.js file:
2.2.2.1 The role of data
The role of data: the initial data of the page
The data in data can be rendered on the page
2.2.2.2 The role of page life cycle functions
The specific use of page life cycle functions:
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log('onLoad监听页面加载')
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
console.log('onReady监听页面初次渲染完成')
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
console.log('onShow监听页面显示')
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
console.log('onHide监听页面隐藏')
},2.3 Mini Program Adaptive Size Unit rpx and Style
2.3.1 rpx unit
The rpx unit is the size unit of css in the WeChat applet, and rpx can be adapted according to the screen width. The specified screen width is 750rpx. For example, on iPhone6, the screen width is 375px and there are 750 physical pixels, so 750rpx = 375px = 750 physical pixels, 1rpx = 0.5px = 1 physical pixel.
| equipment | rpx to px (screen width/750) | px to rpx (750/screen width) |
|---|---|---|
| iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
| iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
| iPhone6s | 1rpx = 0.552px | 1px = 1.81rpx |
The WeChat applet also supports the rem size unit, and the conversion relationship between rem and rpx: rem: specifies that the screen width is 20rem; 1rem = (750/20)rpx. Note: Designers can use iPhone6 as the standard for visual drafts (design drafts) when developing WeChat mini-programs. Suggestion: If the design draft uses a device width of 750px, it is easier to calculate 750px, 1rpx=1px. In this case, the size measured on the design drawing is as many px as the number of rpx. As for how many rems actually need to be converted on different devices Leave it to the applet to convert it yourself.
2.3.2 Style Import of Mini Programs
Use the @import statement to import the external style sheet. @import is followed by the relative path of the external style sheet that needs to be imported. Use ; to indicate the end of the statement.
(1) Import the external style sheet into the page
common.wxss Outline style sheet
/** common.wxss **/
.red{ color: red; }
index.wxss page style sheet
@import '../../common.wxss';
/**index.wxss**/
.userinfo{
font-size: 30px;
text-align: center;
width: 30%;
padding: 16px;
}(2) Importing public styles is the same way
2.3.3 Global style and local style of applet
The styles defined in app.wxss are global styles that apply to every page. The styles defined in the page's wxss file are local styles, which only apply to the corresponding page and override the same selector in app.wxss.
2.3.4 Mini Program Inline Style
The applet framework component supports the use of style and class attributes to control the style of the component.
-
style: style receives dynamic styles, which will be parsed at runtime. Please try to avoid writing static styles into style, so as not to affect the rendering speed.
-
class: The static style is written into the class uniformly. It is used to specify a style rule. Its attribute value is a collection of class selector names (style class names) in the style rule. The style class name does not need to be enclosed with ., and multiple style class names are separated by spaces.
2.3.5 CSS selectors supported by the applet
The selectors currently supported by WeChat Mini Programs are:
| Selector | Sample | Sample description |
|---|---|---|
| .class | .intro | Select all components with class="intro" |
| #id | #firstname | Select the component with id="firstname" |
| element | view | select all view components |
| element, element | view checkbox | Select all document view components and all checkbox components |
| ::after | view::after | Insert content after the view component |
| ::before | view::before | Insert content before the view component |