Summary of small program development experience

1. WXML

1.1：wx:if与wx:else

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

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

The best practice is to use the following, initially set info to null,

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, which have no style meaning syntax, try to use block

1.4: template component template

Common page modules / components can be used directly in wxml or import. If css is involved, you need to import @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

The scripting language that specifically runs on the wxml page, unlike javascript, does not support the use of ES6 syntax, nor can it reference js.

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

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

Second, WXSS

2.1: Background Icon

Only the complete https image path can be used in the background of the applet, and the icon is used in the project:

Vector graphics svg: with perfect scalability, easy to adjust (color, size, etc.);
data-uri: The base64 method is used when the image volume is less than 20Kb. Analysis of the introduction method of front-end picture optimization
Larger files: use image tags directly in wxml
Introduce external icons: such as Alibaba Vector Gallery, you can use the network path and download to the local way to use.

png local compression tool: Tinypng

2.2: Reset style

Partial style reset

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;

Reference article: The most standard system font specification font-family

2.4: Reasonable use of rpx units

rpx is a relative unit equivalent to a percentage of the screen width, which is not recommended for the following situations:

font-size和border-width；
The translation displacement is involved in animation: some machines have decimals when rpx is converted to px, such as 262.89px, WeChat will take the value down to 262px, resulting in a 1px gap.
Canvas drawing, such as QR code, sharing pictures, etc.

三、JavaScript

3.1: Secondary packaging wx.request method

Use promise to repackage

3.2: page life cycle

onLoad: page load, a page will only be called once. Can get the 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 phone will switch back from the screen off to the display screen, from minimized to maximized.
onReady: The page is rendered for the first time, a page will only be called once, which means that the page is ready to interact with the view layer.
onHide: Called when the page is switched to the background, navigateTo or tab is switched.
onUnload: The page is unloaded. When the page is closed or the memory is insufficient, the page is actively destroyed.

3.3: new Date compatibility

Android can recognize the new Date("2018-05-30 00:00:00")format, but only in IOS 2018/05/30 00:00:00. You need to replace the dash with a slash. 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

Four, applet function

4.1: Canvas generates pictures

Canvas multi-line text and generate shared pictures

4.2: Use of plug-ins

Use of applet plugin

4.3: Page stack limit

The page stack of applets is limited to 5, and after more than 5, the next page cannot be accessed.

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

A solution to the 5-layer limitation of applet pages

4.4: Prompt popup Dialog

Using wx.hideLoading in front of the code will cause the following wx.showToast not to come out. Because wx.showToast has the function of hiding the wx.showLoading () prompt box.

5. Others

5.1: Mainstream framework

mpvue: compiled into small programs and h5 syntax using the vue syntax specification
Taro: Based on react, it can be compiled into small programs, h5, react-native, etc. at the same time.

5.2: Common plugins

wxParse : Rich text parsing
wx-charts : chart tool
wxapp-qrcode : QR code generator