A, WXML

1.1: wx:if vs. Wx :else

The front end obtains the information list through the interface of the back end. If there is data, the data content is displayed; otherwise, the information cannot be found. If if-else uses the Boolean state as the switch, the page will appear false and then be updated to true, i.e., flash the content that cannot be found. This interaction is not ideal.

<view wx:if="{{true}}">
	<text>This is the list of information</text>
</view>
<view wx:else>
	<text>Can't find information</text>
</view>
Copy the code

The best way to do this is to initially set info to null,

data:{
    info:null
}
Copy the code
<view wx:if="{{info === 1}}">
	<text>This is the list of information</text>
</view>
<view wx:if="{{info === 0}}">
	<text>Can't find information</text>
</view>
Copy the code

: 1.2 wx: the for

Wx :for-item=”item” wx:key=”item”

1.3: block label

Wx :if, wx:for, wx:else syntax that makes no style sense use blocks as much as possible

1.4: Template Component template

A common page module/component that can be used directly in WXML or as an import. If CSS is involved, @import should be introduced in WXSS.

/** * set name to template * 2. The value passed by the component can be used directly with hidden="{{! isloading}}"
*/
<template name="loading">
  <view class="weui-loadmore" hidden="{{! isloading}}">
    <view class="weui-loading"></view>
    <view class="weui-loadmore__tips"</view> </view> </template> /** *"{{isloading}}"Data for template */ <import SRC =".. /template/loading.wxml"/>
<template is="loading" data="{{isloading}}"></template>
Copy the code

1.5: Scripting language WXS

A scripting language that runs exclusively on WXML pages and, unlike javascript, does not support the use of ES6 syntax and cannot reference JS.

<wxs module="wxs" src=".. /.. /utils/wxs.wxs"></wxs>
Copy the code
Module.exports = {// exports % formatProgress:function (c,m) {
		return c/m*100
	}
}
Copy the code

Second, the WXSS

2.1: Background Icon

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

  • Vector SVG: Perfectly scalable and easy to adjust (color, size, etc.);
  • Data-uri: indicates that the image size is smaller than 20Kb. The base64 mode is used. [front-end image optimization is introduced to analyze way] [segmentfault.com/a/119000001…].
  • Larger files: Use the image tag directly in WXML
  • Introduction of external ICONS: such as Alibaba Vector gallery, which can be used by network path and download to local.

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;
Copy the code

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

2.4: Rational use of RPX units

RPX is a relative unit that corresponds to a percentage of the screen width and is not recommended when:

  • The font size and border – width;
  • Translate shift: On some machines, when RPX turns into PX and there is a decimal number, such as 262.89px, wechat values it down to 262px, creating a 1px gap.
  • Canvas drawing, such as QR code, sharing pictures, etc.

Three, JavaScript,

3.1: Secondary encapsulation of the Wx. request method

Use promise for secondary encapsulation

3.2: Page life cycle

  • OnLoad: page load. A page is called only once. Can get the page parameter options.
  • OnShow: the page display will be called once every time the page is opened, and the foreground will also be called once when the phone switches from the background to the display screen, and from the minimum to the maximum.
  • OnReady: a page is called only once after its first rendering, indicating that the page is ready to interact with the view layer.
  • OnHide: called when the page is switched to background, navigateTo, or TAB.
  • OnUnload: Page unloads. Actively destroy pages when they are closed or out of memory.

3.3: New Date compatibility

Android can recognize new Date(“2018-05-30 00:00:00”), but IOS can only recognize 2018/05/30 00:00:00. You need to replace the dash with a slash. Var iosDate= date.replace(/-/g, ‘/’).

3.4: Bubbling event

  • Bindtap: Event binding does not prevent bubbling events from bubbling up
  • Catchtap: Event binding prevents bubbling events from bubbling up

Four, small program function

4.1: Canvas generates images

Canvas multi line text and generate shared pictures

4.2: Use of plug-ins

The use of applets

4.3: Page stack limit

The latest version of the page stack of the small program is limited to 10, after 10 cannot go to the next page.

Wx. navigateTo, WX. redirectTo, wX. navigateBack

A solution to the 10-layer limit of applets pages

4.4: Prompt pop-up Dialog

  • Using wx.hideLoading at the beginning of the code will cause the following wx.showToast to fail. Because wx.showtoast has the ability to hide the wx.showloading () prompt.
  • ​

Five, the other

5.1: Mainstream framework

  • Mpvue: Compiles into applets and H5 syntax using the VUE syntax specification
  • Taro: Based on React, it can be compiled into small programs, H5, and React-native at the same time.

5.2: Common plug-ins

  • WxParse: rich text parsing
  • Wx-charts: Charts tool
  • Wxapp-qrcode: qrcode generator