Wechat mini program Tutorial

2.1 Data binding

2.2 Event binding

2.3 Event Passing with Parameters and Data Synchronization

1	`<button type="primary" bindtap="btnTap2" data-info="{{2}}">+2</button>`

data: {
    count: 0
},
btnTap2(e) {
    this.setData({
        count: this.data.count + e.target.dataset.info
    })
}

1	`<input value="{{msg}}" bindinput="inputHandler" />`

1
2
3

data: {
    msg: '你好,'
}

inputHandler(e) {
    this.setData({
        msg: e.detail.value
    })
}

2.4 Conditional Rendering

2.4.1 `wx:if`, `wx:elif` and `wx:else`

1
2
3

<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>

1
2
3

data: {
    type: 1
}

2.4.2 `<block>`

Using <block> with wx:if .
Note: <block> is not a component, it is a container with wrapping properties that does not render anything in the page.

<block wx:if="{{true}}">
    <view>view1</view>
    <view>view2</view>
</block>

2.4.3 `hidden`

1	`<view hidden="{{condition}}">条件为true隐藏,条件为false显示</view>`

2.4.4 `wx:if` vs `hidden`

wx:if is used to conditionally render an element and its children. If the condition specified in wx:if is true, the element will be rendered; otherwise, it will not be rendered at all. This means that the element and its children will be removed from the DOM if the condition is false. This can be useful for optimizing performance since the removed elements won’t take up any space in the DOM.

On the other hand, hidden is used to conditionally hide an element. If the condition specified in hidden is true, the element will be hidden through CSS (display:none) while still taking up space in the DOM. If the condition is false, the element will be displayed normally.

Therefore, if you want to optimize performance by removing elements that are not needed based on a condition, you should use wx:if. If you just want to show/hide an element without affecting the layout of the page, you should use hidden.

2.5 List rendering

2.5.1 `wx:for`

1
2
3

<view wx:for="{{arr1}}">
    index: {{index}}, item: {{item}}
</view>

1
2
3

data: {
    arr1: ['iPhone', 'Huawei', 'Xiaomi']
}

2.5.2 Manually specify the index and variable name

1
2
3

<view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itemName">
    index: {{idx}}, item: {{itemName}}
</view>

2.5.3 `wx:key`

data: {
    userList: [
        {id: 1, name: 'Red'}, 
        {id: 2, name: 'Yellow'},
        {id: 3, name: 'White'}
    ]
}

1
2
3

<view wx:for="{{userList}}" wx:key="id">
    {{item.name}}
</view>

2.6 `css` vs `wxss`

2.7 wxss - `rpx`

2.7.1 What is the `rpx` ?

rpx (responsive pixel) is a unit of measurement used in WeChat Mini Programs to make the layout more adaptable to different screen sizes and pixel densities.

2.7.2 The implementation principle of rpx

The implementation of rpx is based on the device’s width in physical pixels (px). On a standard device, 1 rpx equals 1/750 of the screen width in px. This means that if a view element has a width of 750 rpx, it will take up the full width of the screen on a standard device.

2.7.3 Conversion between the units of `rpx` and `px`

The conversion between rpx and px units is based on the screen pixel density. In general, 1rpx equals 0.5px on a screen with a standard pixel density of 2x.

2.8 Style import

2.8.1 What is style import

The @import syntax provided by WXSS can be used to import external style sheets.

2.8.2 The syntax format of `@import`

1	`@import "/common/common.wxss";`

2.9 wss - Global styles and local styles

2.9.1 Global styles

2.9.2 Local styles

2.10 Global Configuration - Common global configurations and components of the mini program

Understand commonly used configuration options for the window node.

属性名	类型	默认值	说明
navigationBarTitleText	String	字符串	导航栏标题文字内容
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如#000000
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持black/white
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉loading的样式，仅支持dark/light
enablePullDownRefresh	Boolean	FALSE	是否全局开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px

2.12 Global Settings - Window - Pull-to-Refresh

2.14 Global Settings - tabBar

2.15 The configuration of WeChat mini program pages

2.16 Data Request - GET and POST Requests

For security reasons, the official guidelines for requesting data interfaces for mini-programs have established the following two restrictions.

We can only request interfaces of the HTTPS type.
The domain name of the interface must be added to the list of trusted sites.

2.16.2 Configure the request domain name to be valid

Requirement Description: Suppose that in my WeChat mini program, I want to request an API under the domain name https://www.escook.cn/.
The configuration steps are as follows: 登录微信小程序管理后台->开发->开发设置->服务器域名->修改request合法域名

2.16.3 Initiate a GET request

1	`<button bindtap="getInfo">发起GET请求</button>`

getInfo() {
    wx.request({
        url: 'https://www.escook.cn/api/get',
        method: 'GET',
        data: {
            name: 'zs',
            age: 20
        },
        success: (res) => {
            console.log(res.data)
        }
    })
}

2.16.4 Initiate a GET request

1	`<button bindtap="postInfo">发起POST请求</button>`

wx.request({
    url: 'https://www.escook.cn/api/post',
    method: 'POST',
    data: {
        name: 'zs',
        age: 20
    },
    success: (res) => {
        console.log(res.data)
    }
})

2.16.5 Request data when the page is first loade

In many cases, we need to automatically request some initialization data when the page is first loaded. In this case, we need to call the function that retrieves the data in the onLoad event of the page.
Here is an example code snippet:

/**
 * Lifecycle function--Called when page load
 */
onLoad(options) {
    this.getInfo()
    this.postInfo()
},

2.17 Considerations for making data requests or points to note when making request requests

2.17.1 Skip the validation of the request domain name

If the backend programmer has only provided an interface using the HTTP protocol and has not yet provided an interface using the HTTPS protocol, in order to avoid delaying the development progress, we can temporarily enable the option ‘Do not verify request domain name, TLS version, and HTTPS certificate in the development environment’ in the WeChat developer tool to skip the validation of the request domain name.

Note: The option to skip the validation of the request domain name is only intended for use during development and debugging stages.

2.17.2 Explanation on `Cross-Domain` and `Ajax`

The issue of cross-domain only exists in browser-based web development. Due to the fact that the host environment of a mini program is not a browser, but rather the WeChat client, cross-domain is not a problem in mini programs. The core of Ajax technology relies on the MLHttpReguest object in the browser, but since the host environment of a mini program is the WeChat client, it cannot be referred to as "initiating an Ajax request", but rather "initiating a network data request".

2.18 Case Study: Implementing the Basic Layout for the Local Life Homepage

The homepage design and implementation steps:

Create a new project and organize its structure.
Configure Navigation Bar Effects.
Configure tabBar Effects.
Implement Carousel Effect.
Implement Nine-Grid Effect.
Implement Image Layout.

Step 1: Create a new project and organize its structure

"pages":[
"pages/home/home",
"pages/message/message",
"pages/contact/contact"
],

"window":{
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#2b4b6b",
  "navigationBarTitleText": "本地生活",
  "navigationBarTextStyle":"white"
},

Step 3: Configure tabBar Effects

"tabBar": {
    "list": [{
            "pagePath": "pages/home/home",
            "text": "首页",
            "iconPath": "/images/tabs/home.png",
            "selectedIconPath": "/images/tabs/home-active.png"
        },
        {
            "pagePath": "pages/message/message",
            "text": "消息",
            "iconPath": "/images/tabs/message.png",
            "selectedIconPath": "/images/tabs/message-active.png"
        },
        {
            "pagePath": "pages/contact/contact",
            "text": "联系我们",
            "iconPath": "/images/tabs/contact.png",
            "selectedIconPath": "/images/tabs/contact-active.png"
        }
    ]
}

Step 4: Implement Carousel Effect

Data Definition

1
2
3

data: {
    swiperList: []
}

Lifecycle

1
2
3

onLoad(options) {
    this.getSwiperList()
}

Implementation Method

getSwiperList() {
    wx.request({
        url: 'https://applet-base-api-t.itheima.net/slides',
        method: 'GET',
        success: (res) => {
            console.log(res)
            this.setData({
                swiperList: res.data
            })
        }
    })
}

<swiper indicator-dots circular>
    <swiper-item wx:for="{{swiperList}}" wx:key="id">
        <image src="{{item.image}}" />
    </swiper-item>
</swiper>

swiper {
    height: 350rpx;
}

swiper image {
    width: 100%;
    height: 100%;
}

Step 5: Implement Nine-Grid Effect

Data Definition

1
2
3

data: {
    gridList: []
}

Lifecycle

1
2
3

onLoad(options) {
    this.getGridList()
}

getGridList() {
    wx.request({
        url: 'https://applet-base-api-t.itheima.net/categories',
        method: 'GET',
        success: (res) => {
            console.log(res)
            this.setData({
                gridList: res.data
            })
        }
    })
}

<view class="grid-list">
    <view class="grid-item" wx:for="{{gridList}}" wx:key="id">
        <image src="{{item.icon}}" />
        <text>{{item.name}}</text>
    </view>
</view>

.grid-list {
    display: flex;
    flex-wrap: wrap;
    border-left: 1rpx solid #efefef;
    border-top: 1rpx solid #efefef;
}

.grid-item {
    width: 33.33%;
    height: 200rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 1rpx solid #efefef;
    border-bottom: 1rpx solid #efefef;
    box-sizing: border-box;
}

.grid-item image {
    width: 60rpx;
    height: 60rpx;
}

.grid-item text {
    font-size: 24rpx;
    margin-top: 10rpx;
}

Step 6: Implement Image Layout

<view class="img-box">
    <image src="/images/link-01.png" mode="widthFix" />
    <image src="/images/link-02.png" mode="widthFix" />
</view>

.img-box {
    display: flex;
    padding: 20rpx 10rpx;
    justify-content: space-around;
}

.img-box image {
    width: 45%;
}

Page navigation refers to the mutual jumping between pages.
For example, there are two ways to implement page navigation in a browser:

<a> link
location.href

Declarative navigation
Declare a <navigator> navigation component on the page, and implement page jumping by clicking on the <navigator> component.
Programmatic navigation
Call the navigation API of the mini program to achieve page redirection.

3.1.3 Navigate to tabBar page

The tabBar page refers to the page that has been configured as a tabBar.

When using the <navigator> component to navigate to a specific tabBar page, you need to specify the url and open-type attributes, where:

The url represents the address of the page to navigate to, and it must start with a forward slash /.
The open-type attribute indicates the type of jump, and it must be set to switchTab.