【微信小程序 三】用户界面

前端
在app.json中加入以下代码，实现tabBar的导航菜单栏的功能

 "tabBar": {    "backgroundColor": "#318EE2",    "color": "#ffffff",    "list": [      {        "pagePath": "pages/index/index",        "text": "首页",        "iconPath": "images/tabbar/2/home2.png",        "selectedIconPath": "images/tabbar/2/home.png"      },      {        "pagePath": "pages/forum/forum",        "text": "借书",        "iconPath": "images/tabbar/2/scan2.png",        "selectedIconPath": "images/tabbar/2/scan.png"      },      {        "pagePath": "pages/user/user",        "text": "我的",        "iconPath": "images/tabbar/2/user2.png",        "selectedIconPath": "images/tabbar/2/user.png"      }    ]  }

---

user.js

// user.jsvar _app = getApp()Page({  /**   * 页面的初始数据   */  data: {    menuitems: [      { text: '账号信息', url: '../userinfo/userinfo', icon: '../../images/usermenu/info.png', tips: '' },      { text: '预订单', url: '../borrowbook/borrowbook?status=N', icon: '../../images/usermenu/order.png', tips: '' },      { text: '借阅历史', url: '../borrowbook/borrowbook?status=F', icon: '../../images/usermenu/history.png', tips: '' },      { text: '待归还', url: '../borrowbook/borrowbook?status=Y', icon: '../../images/usermenu/huan.png', tips: '' },      { text: '个人喜好', url: '../favorcate/favorcate', icon: '../../images/usermenu/favor.png', tips: '' },    ]  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    let that = this    _app.getUserInfo(function (userinfo) {      console.log(userinfo)      console.log(getApp().globalData.userSign)      that.setData({        userinfo: userinfo,        userSign: getApp().globalData.userSign,      })    })  },  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady: function () {  },  /**   * 生命周期函数--监听页面显示   */  onShow: function () {    let that = this    _app.getUserInfo(function (userinfo) {      console.log(userinfo)      console.log(getApp().globalData.userSign)      that.setData({        userinfo: userinfo,        userSign: getApp().globalData.userSign,      })    })  },  /**   * 生命周期函数--监听页面隐藏   */  onHide: function () {  },  /**   * 生命周期函数--监听页面卸载   */  onUnload: function () {  },  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function () {  },  /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function () {  },  /**   * 用户点击右上角分享   */  onShareAppMessage: function () {  }})

---

user.wxml

<view class="mine-wrapper">  <view class="avatar-wrapper">    <view>      <view class="avatar">        <image style="border-radius:50%;" src="{{userinfo.avatarUrl ? userinfo.avatarUrl:'../../images/avatar/avatar_01.png'}}"></image>      </view>      <view class="text">        <text wx:if="{{userinfo.nickName}}">{{userinfo.nickName}}</text>        <text wx:else bindtap="toLogin">注册 / 登录</text>      </view>      <view class="text">        <text wx:if="{{userSign==2}}">{{"您还没有填写真实信息，暂不能借书"}}</text>        <text wx:elif="{{userSign==1}}">{{"会员用户"}}</text>      </view>    </view>  </view>  <view class="list-wrapper">    <view class="weui-cells weui-cells_after-title">      <block wx:for="{{menuitems}}" wx:key="menu_for">        <navigator url="{{item.url}}" class="weui-cell weui-cell_access" hover-class="weui-cell_active">          <view class="weui-cell__hd">            <image src="{{item.icon}}"></image>          </view>          <view class="weui-cell__bd">{{item.text}}</view>          <view class="weui-cell__ft weui-cell__ft_in-access">{{item.tips}}</view>        </navigator>      </block>    </view>  </view></view>

---

user.wxss

.avatar-wrapper {  background: #1b82d1;  padding: 25px 0;}.avatar-wrapper .avatar {  margin: 0 auto;  text-align: center;}.avatar-wrapper .avatar image {  width: 100px;  height: 100px;}.avatar-wrapper .text {  text-align: center;  color: #fff;}.weui-cell__hd image {  margin-right: 5px;  vertical-align: middle;  width: 20px;  height: 20px;}.weui-cells::after{  content: none;  border-bottom: none;}.weui-cells::before{  border-top: none;}/* user.wxss */

---