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

前端
在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.js
var _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 */

这里写图片描述

  • 15
    点赞
  • 104
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
微信小程序的用户登录界面代码可以通过使用信开发者工具进行编写和调试。下面是一个简单的微信小程序用户登录界面的代码示例: ```html <!-- login.wxml --> <view class="container"> <view class="title">用户登录</view> <view class="form"> <input class="input" placeholder="请输入用户名" bindinput="bindUsernameInput" /> <input class="input" type="password" placeholder="请输入密码" bindinput="bindPasswordInput" /> <button class="btn" bindtap="login">登录</button> </view> </view> ``` ```css /* login.wxss */ .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } .title { font-size: 24px; margin-bottom: 20px; } .form { display: flex; flex-direction: column; } .input { width: 200px; height: 30px; margin-bottom: 10px; } .btn { width: 100px; height: 30px; background-color: #007aff; color: #fff; } ``` ```javascript // login.js Page({ data: { username: '', password: '' }, bindUsernameInput(e) { this.setData({ username: e.detail.value }); }, bindPasswordInput(e) { this.setData({ password: e.detail.value }); }, login() { // 在这里编写登录逻辑,可以调用后端接口进行验证等操作 console.log('用户名:', this.data.username); console.log('密码:', this.data.password); } }); ``` 以上代码示例中,`login.wxml`文件定义了用户登录界面的布局,`login.wxss`文件定义了界面的样式,`login.js`文件定义了页面的逻辑。用户输入用户名和密码后,点击登录按钮会触发`login`方法,可以在该方法中编写登录逻辑,例如调用后端接口进行验证等操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值