Summary of small program development experience

1. WXML

---

1.1: wx:if and wx:else

The front-end obtains the information list through the back-end interface , if there is data, the data content will be displayed, otherwise the not found information will be displayed. If if-else uses a Boolean value for this switch, the page will first appear in the false state, and then update to true, that is, it will flash the content that the information cannot be found. This kind of interaction is not very ideal.

<view wx:if="{{true}}">
	<text>这是信息列表</text>
</view>
<view wx:else>
	<text>找不到信息</text>
</view>

The best way is to use the following. Set info to null at the beginning,

data:{
    info:null
}

<view wx:if="{{info === 1}}">
	<text>这是信息列表</text>
</view>
<view wx:if="{{info === 0}}">
	<text>找不到信息</text>
</view>

1.2: wx:for

for loop To add wx:for-item="item" wx:key="item"

1.3: block tag

wx:if、wx:for、wx: Else, try to use block

for syntax that has no stylistic meaning. 1.4: template component template

is a public page module/component that can be used directly in wxml or imported. Way. If css is involved, it needs to be introduced via @import in wxss.

/**
* 方式一：直接使用
* 1. 给template 设置name属性
* 2. 组件传过来的值可以直接使用  hidden="{{!isloading}}"
*/
<template name="loading">
  <view class="weui-loadmore" hidden="{{!isloading}}">
    <view class="weui-loading"></view>
    <view class="weui-loadmore__tips">正在加载</view>
  </view> 
</template>

/** 
* 方式二：按路役引入 
* 1. is 等同方式一的name
* 2. data="{{isloading}}" 给template的数据
*/
<import src="../template/loading.wxml"/>
<template is="loading" data="{{isloading}}"></template>

1.5: Scripting language wxs

is a scripting language that specifically runs on wxml pages. Unlike javascript, it does not support the use of ES6 syntax and cannot reference js.

<wxs module="wxs" src="../../utils/wxs.wxs"></wxs>

module.exports = {
	//输出百分比
	formatProgress: function (c,m) {
		return c/m*100
	}
}

2. WXSS

---

2.1: Background Icon

Only the complete background icon can be used in the background of the applet https image path, how to use icon in the project:

• Vector svg: perfect scalability, easy to adjust (color, size, etc.);

• data-uri: The image size is less than 20Kb, use base64. [Analysis of the optimized introduction method of front-end images][segmentfault.com/a/119000001…]

• Large files: Use the image tag directly in wxml

• Introducing external icons: such as Alibaba vector library, which can be used using network paths and downloading to local.

2.2: Reset style

2.3: font-family standard specification

font-family: 
/*西文：*/
-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Helvetica,Arial,
/*中文：*/
PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Source Han Sans CN,sans-serif;

2.4: Reasonable use of rpx unit

• rpx is a relative unit equivalent to a percentage of the screen width. It is not recommended to use it in the following situations:

• font-size and border-width; animation animation involves translate displacement: when some machines convert rpx to px and a decimal appears, such as 262.89px, WeChat will take the value downward to 262px, resulting in a 1px gap.

• Canvas drawing, such as QR code, sharing pictures, etc.

3. JavaScript

---

3.1: Secondary encapsulation of wx.request method

3.2: Page life cycle

• onLoad: Page loading, a page will only be called once. Can get page parameter options.

• onShow: Page display, it will be called once every time the page is opened, and it will be called once when switching from the background to the foreground: the mobile phone switches from the screen off to the display screen, from minimized to maximized .

• onReady: The initial rendering of the page is completed. A page will only be called once, which means that the page is ready and can interact with the view layer.

• onHide: Called when the page switches to the background, navigateTo, or tab switches.

• onUnload: Page unloading. Actively destroy pages when the page is closed or there is insufficient memory.

3.3: new Date compatibility

Android can recognizenew Date("2018-05-30 00:00:00 ") format, but IOS can only recognize the 2018/05/30 00:00:00 format. Dashes need to be replaced with slashes. var iosDate= date.replace(/-/g, '/').

3.4: Bubbling events

• bindtap: Event binding does not prevent bubbling events from bubbling up

• catchtap: Event binding can prevent bubbling events from bubbling upward

## 4. Mini Program Function

---

4.1: Canvas generates images

4.2: Use of plug-ins

4.3: Page stack limit

The latest version of the page stack of the mini program is limited to 10. After more than 10, you cannot enter the next page.

Therefore, the number of pages should be used with caution, and the navigation API should be flexibly combined with wx.navigateTo, wx.redirectTo, and wx.navigateBack

4.4: Prompt pop-up window Dialog

• Using wx.hideLoading in front of the code will cause wx.showToast to not appear later. Because wx.showToast has the function of hiding the wx.showLoading() prompt box.

5. Others

---

5.1: Mainstream framework

• mpvue: Use vue syntax specifications to compile into small programs and h5 syntax

• Taro: Based on react, it can be compiled into small programs, h5, react-native, etc. at the same time.

5.2: Commonly used plug-ins

• wxParse: Rich text parsing

• wx-charts: chart tool

• wxapp-qrcode: QR code generator

Recommended tutorial: "

WeChat applet 》

The above is the detailed content of Summary of small program development experience. For more information, please follow other related articles on the PHP Chinese website!