三、微信小程序实现个人信息页面及利用tabar实现多个页面布局

开发微信小程序必不可少的就是用户授权，获取授权之后我们总要给人家把信息显示出来吧，这样更符合我们一般人的逻辑。当然，除了显示微信用户头像和昵称之外（这一部分的代码上一篇文章已经详细说明了），最好是把和我们开发的小程序的有关信息及用户个人信息显示出来更好不过了，也需要让用户有修改个人信息的权限，那么我们该怎么编写相关代码呢？如果我们想让我们的小程序有不止一个页面，又该怎么使用tabar进行设置？
1、首先，你要对你的小程序有的功能模块非常了解，下面是我的小程序的个人信息页面以及tabar设置

这个页面的所有组件都是用的vant组件库中的，有兴趣的童鞋可以考虑使用使用。记得在使用之前一定要在.json文件中进行配置。
vant组件配置代码：

{
  "usingComponents": {
    "van-cell": "../../vant/cell/index",
    "van-cell-group": "../../vant/cell-group/index"
  },
  "navigationBarBackgroundColor": "#405f80",
  "navigationBarTitleText": "个人中心"
}

WXML代码：

<van-cell-group>
  <van-cell title="学号" value="{{userlists.name}}" />
  <van-cell title="电话" value="{{userlists.phone}}" />
  <van-cell title="院系" value="{{userlists.address}}" />
  <van-cell title="密码" value="重置" is-link link-type="navigateTo"
  url="/pages/psdupdate/psdupdate?id={{userInfo.openid}}"/>
    <van-cell title="个人信息更改" is-link link-type="navigateTo"
  url="/pages/infoupdate/infoupdate?id={{userInfo.openid}}"/>
  <van-cell title="账号切换" is-link link-type="redirectTo"
  url="/pages/welcome/welcome"/>
van-cell-group>

因为组件中已经实现了页面跳转功能，所以就没有编写JS的代码。

2、Tabar设置：
需要在app.json文件中进行设置

"tabBar": {
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/user/user",   //对应的页面的地址
        "text": "首页",      //这个就是下面小图标下面的字体
        "iconPath": "/images/tap/first-page-none.png",  //小图标的图片地址
        "selectedIconPath": "images/tap/first-page.png"  //当选中当前页面时图标变成的样子
      },
      {
        "pagePath": "pages/user-appointment/user-appointment",
        "text": "预约维修",
        "iconPath": "/images/tap/form.png",
        "selectedIconPath": "images/tap/edit.png"
      },
      {
        "pagePath": "pages/user-info/user-info",
        "text": "个人信息",
        "iconPath": "/images/tap/my.png",
        "selectedIconPath": "images/tap/my-fill.png"
      }
    ]
  }