Table of contents
2.1. Jump one level to one level
2.2. Jump from first level to second level
2.4. Jump from level 2 to level 1
Okay, it's here today, I hope to help you! ! !
1. View layer
1.1. WXML
WXML (WeiXin Markup Language) is a set of tag languages designed by the framework, combined withbasic components ,Event system, which can build the structure of the page.
For a complete understanding of WXML syntax, seeWXML Syntax Reference.
Create a WeChat applet project based on my blog:
https://blog.csdn.net/m0_74915426/article/details/133828417?spm=1001.2014.3001.5502After that, add four pages to the project, named: home, classify, orders, me
(You can change the name according to your own needs)
Find the app.json file in the main body of the project and add the above four files.
Find pages in the file and make direct pages in it.
"pages":[
"pages/home/home",
"pages/classify/classify",
"pages/orders/orders",
"pages/me/me",
"pages/user/user",
"pages/index/index",
"pages/logs/logs"
],-
data binding
In the page we created ( home ), write code in home.wxml:
<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<!--wxml-->
<view> {
{message}} </view>In the page we created ( home ), in home.jsWrite code: data
/**
* 页面的初始数据
*/
data: {
message: 'Hello MINA ! 欢迎进入我的世界 。。。'
},-
List rendering
In the page we created ( home ), write code in home.wxml:
<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<!--wxml-->
<view> {
{message}} </view>
<!--wxml-->
<view wx:for="{
{array}}" style="margin-left: 10px;"> {
{item}} </view>In the page we created ( home ), in home.jsWrite code: data
data: {
message: 'Hello MINA ! 欢迎进入我的世界 。。。 ',
array: [1, 2, 3, 4, 5]
},-
Conditional rendering
In the page we created ( home ), write code in home.wxml:
<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<!--wxml-->
<view> {
{message}} </view>
<!--wxml-->
<view wx:for="{
{array}}" style="margin-left: 10px;"> {
{item}} </view>
<!--wxml-->
<view wx:if="{
{view == '1'}}"> 爱坤 </view>
<view wx:elif="{
{view == '2'}}"> ikun </view>
<view wx:else="{
{view == '3'}}"> 篮球 </view>In the page we created ( home ), in home.jsWrite code: data
/**
* 页面的初始数据
*/
data: {
message: 'Hello MINA ! 欢迎进入我的世界 。。。 ',
array: [1, 2, 3, 4, 5],
view: '2'
},-
template
In the page we created ( home ), write code in home.wxml:
<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<!--wxml-->
<view> {
{message}} </view>
<!--wxml-->
<view wx:for="{
{array}}" style="margin-left: 10px;"> {
{item}} </view>
<!--wxml-->
<view wx:if="{
{view == '1'}}"> 爱坤 </view>
<view wx:elif="{
{view == '2'}}"> ikun </view>
<view wx:else="{
{view == '3'}}"> 篮球 </view>
<!--wxml-->
<template name="staffName">
<view>
BookName: {
{BookName}}, Author: {
{Author}}
</view>
</template>
<template is="staffName" data="{
{...BookA}}"></template>
<template is="staffName" data="{
{...BookB}}"></template>
<template is="staffName" data="{
{...BookC}}"></template>In the page we created ( home ), in home.jsWrite code: data
/**
* 页面的初始数据
*/
data: {
message: 'Hello MINA ! 欢迎进入我的世界 。。。',
array: [1, 2, 3, 4, 5],
view: '2',
BookA: {BookName: '八极崩', Author: '萧炎'},
BookB: {BookName: '雨中的小丑', Author: '小丑'},
BookC: {BookName: '愤怒的小鸟', Author: '童年'}
},2. WXSS
WXSS (WeiXin Style Sheets) is a style language used to describe the components of WXML style.
WXSS is used to determine how WXML components should be displayed.
In order to adapt to the majority of front-end developers, WXSS has most of the features of CSS. At the same time, in order to be more suitable for developing WeChat applets, WXSS has expanded and modified CSS.
Compared with CSS, the features of WXSS extensions are:
- measurement unit
- Style import
-
measurement unit
rpx (responsive pixel): 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 in total, then 750rpx = 375px = 750 physical pixels, 1rpx = 0.5px = 1 physical pixel.
| equipment | rpx to px (screen width/750) | px conversion rpx (750/screen width) |
|---|---|---|
| iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
| iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
| iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
Suggestion: When developing WeChat applets, designers can use iPhone6 as the standard for visual drafts.
Note: There will inevitably be some glitches on smaller screens. Please try to avoid this situation during development.
-
Style import
Use the
@importstatement to import the external style sheet,@importfollowed by the relative path of the external style sheet that needs to be imported,Use
;to indicate the end of the statement.
method one :
/** common.wxss **/
.small-p {
padding:5px;
}Method Two :
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}-
inline styles
Framework components support using style and class attributes to control the style of the component.
- style: Static styles are written uniformly in class. style receives dynamic styles and will parse them at runtime. Please try to avoid writing static styles into style to avoid affecting the rendering speed.
<view style="color:yellow;" />
- class: used to specify style rules. Its attribute value is a collection of class selector names (style class names) in style rules. The style class name does not need to include
.. Style Class names are separated by spaces.<view class="vi" />
-
Selector
| 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 |
Global styles and local styles:
The styles defined in app.wxss are global styles and apply to every page. The styles defined in the wxss file of page are local styles, which only apply to the corresponding page and will override the same selector in app.wxss.
3. WXS events
Bind an event handler to the component.
For example
bindtap, when the user clicks on the component, the corresponding event handling function will be found in the corresponding Page of the page.
In the page we created ( home ), write code in home.wxml:
<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<!--wxml-->
<view> {
{message}} </view>
<!--wxml-->
<view wx:for="{
{array}}" style="margin-left: 10px;"> {
{item}} </view>
<!--wxml-->
<view wx:if="{
{view == '1'}}"> 爱坤 </view>
<view wx:elif="{
{view == '2'}}"> ikun </view>
<view wx:else="{
{view == '3'}}"> 篮球 </view>
<!--wxml-->
<template name="staffName">
<view>
BookName: {
{BookName}}, Author: {
{Author}}
</view>
</template>
<template is="staffName" data="{
{...BookA}}"></template>
<template is="staffName" data="{
{...BookB}}"></template>
<template is="staffName" data="{
{...BookC}}"></template>
<button id="tapTest" data-hi="Weixin" data-name="君临沂" bindtap="tapName"> Click me! </button>In the page we created ( home ), in home.js Write code in :
// pages/home/home.js
Page({
/**
* 页面的初始数据
*/
data: {
message: 'Hello MINA ! 欢迎进入我的世界 。。。',
array: [1, 2, 3, 4, 5],
view: '2',
BookA: {BookName: '八极崩', Author: '萧炎'},
BookB: {BookName: '雨中的小丑', Author: '小丑'},
BookC: {BookName: '愤怒的小鸟', Author: '童年'}
},
/**
* 方法事件
*/
tapName: function(event) {
console.log(event);
console.log(event.target.dataset);
},The effect seen is as follows:
2. Logic layer
2.1. Page life cycle
Mind map:
The page life cycle of the logical layer in the WeChat applet includes the following stages:
1. onLoad: Triggered when the page is loaded. It will only be triggered once. The page initialization operation can be performed here.
2. onShow: Triggered when the page is displayed. It will be triggered every time the page is displayed. You can perform data refresh operations here.
3. onReady: Triggered when the initial rendering of the page is completed. It will only be triggered once. You can perform some interface operations here, such as setting the navigation bar title, etc.
4. onHide: Triggered when the page is hidden and triggered when the user switches to other pages.
5. onUnload: Triggered when the page is unloaded. Triggered when the user closes the current page or returns to the previous page. Some resource release operations can be performed here.
6. onPullDownRefresh: Triggered when the user pulls down to refresh. It is triggered when the user pulls down the page. You can perform data refresh operations here.
7. onReachBottom: Triggered when the pull-up touches the bottom, triggered when the user slides the page to the bottom, and data loading operations can be performed here.
8. onShareAppMessage: Triggered when the page is shared. It is triggered when the user clicks the share button. You can set the sharing content here.
In the logic layer, various operations and logic of the page can be implemented by rewriting these life cycle functions.
2.2.Jump
Code:
Add the following code in the project body app.json:
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "欢迎页"
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
},{
"pagePath": "pages/home/home",
"text": "首页"
},{
"pagePath": "pages/me/me",
"text": "我的"
}]
},In the page we created ( home ), write code in home.wxml:
<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<!--wxml-->
<view> {
{message}} </view>
<!--wxml-->
<view wx:for="{
{array}}" style="margin-left: 10px;"> {
{item}} </view>
<!--wxml-->
<view wx:if="{
{view == '1'}}"> 爱坤 </view>
<view wx:elif="{
{view == '2'}}"> ikun </view>
<view wx:else="{
{view == '3'}}"> 篮球 </view>
<!--wxml-->
<template name="staffName">
<view>
BookName: {
{BookName}}, Author: {
{Author}}
</view>
</template>
<template is="staffName" data="{
{...BookA}}"></template>
<template is="staffName" data="{
{...BookB}}"></template>
<template is="staffName" data="{
{...BookC}}"></template>
<button id="tapTest" data-hi="Weixin" data-name="君临沂" bindtap="tapName"> Click me! </button>
<button style="margin-top: 20px;" bindtap="bindViewTap">
home 跳转到classify页面&&一级跳二级</button>In the page we created ( home ), in home.js Write code in :
// pages/home/home.js
Page({
/**
* 页面的初始数据
*/
data: {
message: 'Hello MINA ! 欢迎进入我的世界 。。。',
array: [1, 2, 3, 4, 5],
view: '2',
BookA: {BookName: '八极崩', Author: '萧炎'},
BookB: {BookName: '雨中的小丑', Author: '小丑'},
BookC: {BookName: '愤怒的小鸟', Author: '童年'}
},
/**
* 方法事件
*/
tapName: function(event) {
console.log(event);
console.log(event.target.dataset);
},
// 事件处理函数
bindViewTap() {
wx.navigateTo({
url: '/pages/classify/classify',
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
console.log("home.onLoad");
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
console.log("home.onReady");
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
console.log("home.onShow");
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
console.log("home.onHide");
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
console.log("home.onUnload");
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})In the page we created ( classify), write the code in classify.wxml:
<!--pages/classify/classify.wxml-->
<text>pages/classify/classify.wxml</text>
<button bindtap="bindViewTap">
classify跳转到orders二级跳二级</button>In the page we created ( classify), write the code in classify.js:
// pages/classify/classify.js
Page({
/**
* 页面的初始数据
*/
data: {
},
// 事件处理函数
bindViewTap() {
wx.navigateTo({
url: '/pages/orders/orders',
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
console.log("classify.onLoad");
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
console.log("classify.onReady");
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
console.log("classify.onShow");
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
console.log("classify.onHide");
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
console.log("classify.onUnload");
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})In the page we created ( orders), write the code in orders.wxml:
<!--pages/orders/orders.wxml-->
<text>pages/orders/orders.wxml</text>
<button style="margin-top: 20px;" bindtap="bindViewTap">
orders跳转到home页面&&二级跳一级</button>In the page we created ( orders), write the code in orders.js:
// pages/orders/orders.js
Page({
/**
* 页面的初始数据
*/
data: {
},
// 事件处理函数
bindViewTap() {
wx.switchTab({
url: '/pages/home/home',
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
console.log("orders.onLoad");
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
console.log("orders.onReady");
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
console.log("orders.onShow");
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
console.log("orders.onHide");
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
console.log("orders.onUnload");
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})In the page we created ( me), write the code in me.js:
// pages/me/me.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
console.log("me.onLoad");
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
console.log("me.onReady");
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
console.log("me.onShow");
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
console.log("me.onHide");
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
console.log("me.onUnload");
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})2.1. Jump one level to one level
The effect is as shown below:
2.2. Jump from first level to second level
The effect is as shown below:
2.3.Level 2 jump to level 2
The effect is as shown below:
2.4. Jump from level 2 to level 1
The effect is as shown below:
- First-level pages will not be destroyed
- The first-level level jumps to the sub-level level, or the sub-level level jumps to the sub-level level, such as: the first level jumps to the second level, the second level jumps to the second level, the second level jumps to the third level, the third level jumps to the fourth level, In the above route hopping method, the upper level is hidden and the next level is displayed (the first display will call onLoad, onReady, onShow method); If it is returned from the lower level to the upper level, the lower level will be destroyed. Superior display (the first display will call theonLoad, onReady, onShow methods);
- If returns from another generation, all the children in the middle will be destroyed. For example: if level 4 returns to level 1 or jumps to level 1, the middle level 4, level 3, and level 2 will be destroyed, and level 1 will be displayed (the first display will call onLoad , onReady, onShow method);