小程序快速入门到项目开发 6（选项卡切换和数据绑定，数据存储）

你好，【程序职场】专注于：Spring Boot ，微服务 和 前端APP开发，闲暇之余一起聊聊职场规划，个人成长，还能带你一起探索 副业赚钱渠道，在提升技术的同时我们一起交流 敏捷流程 提高工作效率，从技术到管理一步步提升自我！
 
标签：一个执着的职场程序员！

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可参考文档
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