Day2 WeChat Mini Program
- learning target
- WXML template syntax
-
- data binding
- event binding
- WXSS template styles
- global configuration
learning target
WXML Template Syntax
WXSS Template Style
Global Configuration
Page Configuration
Network Data Request
Case- Local Life (Home)
WXML template syntax
data binding
Basic Principles of Data Binding
① Define data in data
② Use data in WXML
① Define the data of the page in data
In the .js file corresponding to the page, define the data into the data object:
// pages/list/list.js
// pages/list/list.js
Page({
/**
* 页面的初始数据
*/
data: {
message:"hello 细狗",
students:[{
name:"小花",age:18},{
name:"蔡j坤",age:24},{
name:"钟无艳",age:200},{
name:"李白",age:404}]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
② Using data in WXML
The format of Mustache syntax
Bind the data in data to the page for rendering, and use Mustache syntax (double braces) to wrap variables.
pages/list/list.wxml
<!--pages/list/list.wxml-->
<!-- image图片组件 -->
<view class="container1">{
{
message}}</view>
<text>{
{
students[0].name}}{
{
students[0].age}}</text>
<image src="/images/1.jpg" mode="heightFix"></image>
running result:
Application Scenarios of Mustache Grammar
The main application scenarios of Mustache syntax are as follows:
● Binding content
● Binding attributes
● Operations (ternary operations, arithmetic operations, etc.)
Dynamically bind content
Page data:
Page({
data: {
message:"hello 细狗",
},
})
Structure of the page:
<view class="container1">{
{
message}}</view>
Dynamically bind properties
Page data:
Page({
data: {
imageSrc:"/images/1.jpg",
},
})
Structure of the page:
<image src="{
{imageSrc}}" mode="heightFix"></image>
Ternary operation
Page({
data: {
randomNumber:Math.random()*10 //随机生成10以内的数
},
})
<view>{
{
randomNumber>=5?'大于等于5':'小于5'}}</view>
Arithmetic
<view>{
{
randomNumber2*100}}</view>
Page({
data: {
randomNumber2:Math.random().toFixed(2)//随机生成两位小数
},
})
event binding
what is an event
Events are the means of communication from the rendering layer to the logic layer. Events can be used to feed back user behaviors in the rendering layer to the logic layer for business processing.
Events commonly used in applets
List of properties of the event object
When the event callback is triggered, an event object event will be received, and its detailed properties are shown in the following table:
The difference between target and currentTarget
target is the source component that triggered the event, and currentTarget is the component that the current event is bound to.
Syntax format of bindtap
In the applet, there is no onclick mouse click event in HTML, but the tap event is used to respond to the user's touch behavior.
① Through bindtap, the tap touch event can be bound to the component
② Define the corresponding event processing function in the .js file of the page, and the event parameters are received through the formal parameter event (generally abbreviated as e)
page structure
<!-- 事件绑定 -->
<button type="primary" bindtap="btnTapHandler">按钮</button>
page data/function
// pages/list/list.js
Page({
/**
* 页面的初始数据
*/
data: {
randomNumber:Math.random()*10 ,//随机生成10以内的数
randomNumber2:Math.random().toFixed(2)//随机生成两位小数
},
// 定义按钮的事件处理函数
btnTapHandler(event){
console.log(event)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
##Event transmission participates in value synchronization
Assign values to the data in data in the event handler function
By calling the this.setData(dataObject) method, you can reassign the data in the page data, the example is as follows:
.js file
// pages/list/list.js
Page({
/**
* 页面的初始数据
*/
data: {
count:0
},
// 定义按钮的事件处理函数
btnTapHandler(event){
console.log(event)
},
// count加1函数
countchange(){
console.log('ok')
this.setData({
//使用setData()函数改变data中的值
count:this.data.count+1 //this.data.count获得data中的count变量
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
.wxml file
<!-- 事件绑定 -->
<button type="primary" bindtap="btnTapHandler">按钮</button>
<button type="primary" bindtap="countchange">+1</button>
{
{
count}}
running result:
event parameter
The event parameter passing in the applet is special, you cannot pass parameters for the event processing function while binding the event. For example, the following code will not work correctly:
//小程序会把btnHandler(123)当作是一个整体，看作是完整的函数名，
//而不是btnHandler(参数123)
<button type="primary" bindtap="btnHandler(123)">事件传参</button>
You can provide data-* custom attribute parameters for components, where * represents the name of the parameter. In the event processing function, you can get the value of the specific parameter through event.target.dataset. The parameter name, the sample code is as follows:
Page structure:
<!-- 事件传参 -->
count={
{
count}}
<button type="primary" bindtap="btnHandler" data-info="{
{2}}">+2</button>
Finally:
The info in data-info will be parsed as the name of the parameter
● The value 2 will be parsed as the value of the parameter
Page data/functions:
Page({
data: {
count:0
},
// 定义按钮的事件处理函数
btnHandler(event){
console.log(event),
this.setData({
count:this.data.count+event.target.dataset.info
})
},
})
You can see in the console:
{info:2}
running result:
Syntax format of bindinput
In the applet, use the input event to respond to the input event of the text box:
① Through bindinput, you can bind the input event for the text box;
② Define the event processing function in the .js file of the page;
Page structure:
<input type="text" bindinput="inputHandler"/>
Handling function:
// pages/list/list.js
Page({
/**
* 页面的初始数据
*/
data: {
}
// input输入框的事件处理函数
inputHandler(e){
// e.detail.value ,是变化过后文本框最新的值
console.log(e.detail.value)
}
})
running result:
Realize data synchronization between text box and data
Implementation steps:
① Define data
② Render structure
③ Beautify style
④ Bind input event handler function
Page structure:
<input type="text" value="{
{msg}}" bindinput="inputHandler2"/>
Textbox handler function:
// pages/list/list.js
Page({
/**
* 页面的初始数据
*/
data: {
msg:"你好啊"
}
// input输入框的事件处理函数
inputHandler2(e){
// e.detail.value ,是变化过后文本框最新的值
this.setData({
msg:e.detail.value
})
},
})
page rendering wxss
input {
border : 1px solid rgb(182, 181, 181);
margin : 5px;
padding : 5px;
border-radius : 3px;
}
running result:
conditional rendering
wx:if
In the applet, use wx:if="{
{condition}}" to determine whether the code block needs to be rendered.
True renders false and does not render.
Page structure:
<!-- 条件渲染 -->
<view wx:if="{
{TrueOrFalse}}">条件渲染</view>
<view wx:if="{
{true}}">A</view>
<view wx:if="{
{false}}">B</view>
<view wx:if="{
{flage==2}}">男</view>
<view wx:elif="{
{flage==0}}">女</view>
<view wx:else>保密</view>
Page data:
Page({
data: {
TrueOrFalse:true,
flage:1
},
})
running result:
<block> tag
If you want to control the display and hiding of multiple components at once, you can use a label to wrap multiple components, and use the wx: if control attribute on the label, the example is as follows:
<!-- 条件渲染 -->
<block wx:if="{
{1+1>=0}}">
<view>A</view>
<view>B</view>
<view>C</view>
</block>
hidden attribute
wx:if is a dynamic rendering of the page structure. Hidden controls whether it is displayed or rendered through attributes, but it is not displayed.
//显示文字 你是单身狗
<view hidden="{
{false}}">你是单身狗</view>
//隐藏文字 你是单身狗
<view hidden="{
{true}}">你是单身狗</view>
wx : The comparison between if and hidden
① The operation mode is different
● wx : if dynamically creates and removes elements to control the display and hiding of elements
● hidden controls the elements by switching styles (display : none/block;) Show and hide
② Suggestions for use
When switching frequently, it is recommended to use hidden
When the control conditions are complex, it is recommended to use wx: if with wxelif, wx: else to switch between display and hide
list rendering
wx:for
Through wxfor, the repeated component structure can be cyclically rendered according to the specified array.
By default, the index of the current loop item is represented by index; the current loop item is represented by item.
<!-- 列表渲染 -->
<view wx:for="{
{arr}}">
索引是：{
{
index}},项是:{
{
item}}
</view>
data: {
arr:["大飞","菜鸡","小j"]
},
Manually specify the index and the variable name of the current item *
Use wxfor-index to specify the variable name of the index of the current loop item Use wx: for-item to specify the variable name of the current item
<!-- 列表渲染 -->
<view wx:for="{
{arr}}">
索引是：{
{
index}},项是:{
{
item}}
</view>
<view wx:for="{
{arr}}" wx:for-index="idx" wx:for-item="im">
索引是：{
{
idx}},项是:{
{
im}}
</view>
wx : the use of key
Similar to: key in Vue list rendering, when the applet implements list rendering, it is also recommended to specify a unique key value for the rendered list items, so as to improve the efficiency of rendering
data: {
arr:["大飞","菜鸡","小j"],
userList : [
{
id : 1, name : '小花' },
{
id : 2, name : '小黄'},
{
id : 3, name : '小贝'}
]
},
<!-- 列表渲染 -->
<view>~~~~~~~~~~</view>
<view wx:for="{
{arr}}">
索引是：{
{
index}},项是:{
{
item}}
</view>
<view>~~~~~~~~~~</view>
<view wx:for="{
{arr}}" wx:for-index="idx" wx:for-item="im">
索引是：{
{
idx}},项是:{
{
im}}
</view>
<view>~~~~~~~~~~</view>
<view wx:for="{
{userList}}" wx:key="id">
{
{
item.name}}
</view>
WXSS template styles
What is WXSS
WXSS (WeiXin Style Sheets) is a set of style language, used to beautify WXML component style, similar to CSS in web development.
The relationship between WXSS and CSS
WXSS has most of the features of CSS. At the same time, WXSS also expands and modifies CSS to adapt to the development of WeChat applets. Compared with CSS, the extended features of WXSS are:
● rpx size unit
● @import style import
What is the rpx unit of dimension
rpx (responsive pixel) is unique to the WeChat applet, and is used to solve the size unit of screen adaptation.
The realization principle of rpx
The implementation principle of rpx is very simple: In view of the different screen sizes of different devices, in order to realize the automatic adaptation of the screen, rpx divides the screens of all devices into 750 equal parts in width (that is, the total width of the current screen is 750rpx).
●On smaller devices, the width represented by 1rpx is smaller ● On larger devices
, the width represented by Irpx is larger
The pixel unit is used for rendering to achieve screen adaptation.
Unit conversion between rpx and px*
style import
1. What is style import
Using the @import syntax provided by WXSS, you can import out-of-line style sheets.
2. The grammatical format of @import
@import is followed by the relative path of the external style sheet to be imported, and ; is used to indicate the end of the statement.
Example:
Create a common folder in the root directory, and create common.wxss in it
/* common/common.wxss */
.username{
color: red;
}
/* pages/list/list.wxss */
@import "/common/common.wxss";
<!--pages/list/list.wxml-->
<!-- 样式导入 -->
<view class="username">李超</view>
Global and local styles
global style
- Global style The style defined in app.wxss is a global style, acting on every page.
partial style
The styles defined in the .wxss file of the page are local styles, which only apply to the current page.
Note:
① When the local style conflicts with the global style, according to the principle of proximity, the local style will override the global style ② When the weight of the local style is greater than or equal to the weight of the global style, the global style will be overwritten
global configuration
- Global configuration file and common configuration items
The app.json file in the root directory of the applet is the global configuration file of the applet. Commonly used configuration items are as follows: ①pages
: record the storage path of all pages of the current applet②
window
: Globally set the appearance of the applet window③tabBar: Set the tabBar effect at the bottom of the applet
④style: Whether to enable the new version of the component style
Global configuration - window
Components of an applet window
window can configure navigationBar and background
Understand the common configuration items of window nodes
