Applet quick start to the project development 6 (tab switching and data binding, data storage)

1. The bottom tab
applet developers in the main interface is very commonly used switch bottom of the tab, the tab at the bottom of the main frame as an applet interface


(A) add tabBar

Add app.json applet project tabBar  representative of the number and function options at the bottom of the description.


As shown in FIG,
1. In the tabBar set size is the number of menu list bottom of the tab, (where pagePath absolute path is switched page, text page switching is the name, the default icon iconPath bottom tab switching, selectIconPath is click the bottom tab to switch the status icon)
2.color is the default color of the bottom tab font
3.selectedColor is the bottom of the tab to select the font color
4.backgroundColor is the background color of the bottom tab
5.borderStyle and on the bottom tab not content dividing line style

(b) the project title settings applet background color, background style, font style title name and title



1. pages is the absolute path of each page applet
2. The background style backgroundTextStyle projects
3. "navigationBarBackgroundColor": "# 33a7d6 ", the background color of the navigation bar

4. "navigationBarTitleText": "applet demo", the title of the navigation bar

5."navigationBarTextStyle": "white", 导航栏的标题样式

6."enablePullDownRefresh": true  页面是否允许下拉刷新

 

2.数据绑定
在做页面开发和或者文本显示的时候需要动态更新界面中的文本数据,

例如获取用户信息后点击显示头像用来更新数据绑定

(一).定义信息对象



(二).获取信息后进行数据绑定


(三),界面中数据赋值,数据展示


(四).固定信息赋值
绑定数据赋值


绑定数据显示

3.数据存储
数据存储分为两种:1.异步存储  2.同步存储
wx.setStorage(Object object)

将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。数据存储生命周期跟小程序本身一致,即除用户主动删除或超过一定时间被自动清理,否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。

 

1.异步存储 wx.setStorage 和 同步存储 wx.setStorageSync



2.获取 存储数据



3.删除存储数据

wx.removeStorage({

  key: 'key',

  success (res) {

    console.log(res)

  }})

 

 

try {

  wx.removeStorageSync('key')} catch (e) {

  // Do something when catch error}



4.清理全部存储数据

wx.clearStorage()

try {

  wx.clearStorageSync()} catch(e) {

  // Do something when catch error}

小程序api可参考文档
https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.clearStorageSync.html



demo下载地址:
https://github.com/chenjianpeng/project.git
https://download.csdn.net/download/jianpengxuexikaifa/11234555

 

 

 

Guess you like

Origin blog.csdn.net/jianpengxuexikaifa/article/details/91405366