1.底部选项卡

小程序开发中很常用的主界面就是底部选项卡的切换，底部选项卡作为小程序的主框架界面

（一）添加tabBar

在小程序项目的app.json中添加tabBar 用于展示底部的选项的数量和功能说明。

如图所示，

1. tabBar中list集合大小就是底部选项卡的菜单数量，（其中pagePath是切换页面的绝对路径，text是切换的页面的名称，iconPath是底部选项卡切换的默认图标，selectIconPath是底部选项卡切换的点击状态图标）2.color 是底部选项卡字体的默认颜色

3.selectedColor是底部选项卡的字体选中颜色

4.backgroundColor是底部选项卡的背景颜色

5.borderStyle是底部选项卡和上不内容分割线样式

（二）设置小程序整个项目标题背景颜色，背景样式，标题名称字体样式和标题

1. pages中是小程序的各个页面的绝对路径2. backgroundTextStyle 项目的背景样式3. "navigationBarBackgroundColor": "#33a7d6", 导航栏的背景颜色

4. "navigationBarTitleText": "小程序demo", 导航栏的标题

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可参考文档：developers.weixin.qq.com/miniprogram…

总结

使用小程序可以非常方便、快速开发小应用程序，我们不用关心api中的组件等的其他，适用版本等各种问题，我们想使用任何东西，仅仅按照组件和api添加就可以。

附演示demo地址：github.com/chenjianpen…

程序职场，一个执着的支持程序员。