1. Bottom TAB

Small program development is very commonly used in the main interface is the bottom TAB switch, the bottom TAB as the main frame interface of small program

(1) Add tabBar

Add tabBar to app.json of the applet project to show the number of options and functionality at the bottom.

As the picture shows,

1. The size of the list set in tabBar is the number of menus at the bottom of the TAB (where pagePath is the absolute path of the page to switch, text is the name of the page to switch, iconPath is the default icon of the bottom TAB to switch, 2. Color is the default color for the font on the bottom TAB

3. SelectedColor is the font selectedColor of the bottom TAB

4. BackgroundColor is the backgroundColor of the bottom TAB

5. BorderStyle is the bottom TAB and top content-free separator style

(two) set the small program the whole project title background color, background style, title name font style and title

1. The pages are small programs each page of the absolute path (2) backgroundTextStyle project background style 3. “navigationBarBackgroundColor” : “# 33 a7d6”, the background color of the navigation bar

4. “navigationBarTitleText”: “Small program demo”, navigation bar title

5. “navigationBarTextStyle”: “white”, the title style of the navigation bar

6. EnablePullDownRefresh: true Indicates whether the page allows pull-down refresh

2. Data binding

During page development or text display, text data in the interface needs to be dynamically updated. For example, after obtaining user information, click “Show profile picture” to update data binding

(I). Define information objects

(II) data binding after obtaining information

(3) Data assignment and data display in the interface

(4). Fixed information assignment

Bind data assignment

Binding data display

3. Data storage

Data stores are classified into two types: 1. Asynchronous storage 2. Synchronous storage Wx.setStorage (Object Object)

Stores the data in a key specified in the local cache. The content corresponding to the original key will be overwritten. The data store life cycle is the same as that of the small program itself, that is, the data is always available unless the user actively deletes it or the data is automatically cleared after a certain period of time. The maximum length of data stored by a key is 1MB, and the maximum length of all data stores is 10MB.

1. Asynchronous storage wx.setStorage and synchronous storage wx.setStorageSync

2. Obtain the stored data

3. Delete the storage data wx.removeStorage({

key: ‘key’,

success (res) {

console.log(res)

}})

try {

wx.removeStorageSync(‘key’)} catch (e) {

// Do something when catch error}

4. Clear all stored data wx.clearStorage()

try {

wx.clearStorageSync()} catch(e) {

// Do something when catch error}

Small application API reference documentation: developers.weixin.qq.com/miniprogram…

conclusion

Using applets makes it very easy and fast to develop small applications, we don’t have to worry about the components in the API and so on, the applicable version and so on, we want to use anything, just according to the components and API can be added.

Demo address: github.com/chenjianpen…

Program Workplace, a dedicated support programmer.