pp电子

登录
免费开通
产品中心
更多服务

微信小程序开发之OFO共享单车,微信小程序个人中心页制作

—— 2017 ——
12/20
00:00

泉源：

作者：未知

阅读：0

栏目：小程序开发

2017/12/20 0:00:00 泉源：不详 作者：未知
上一节我们实现了单车报障页，，，，，，这一节我们来实现个人中心页面：
老套路，，，，，，先举行页面剖析
  • 个人中心页有两种状态，，，，，，即未登录和已登录，，，，，，以是要求差别数据驱动爆发的差别页面
  • 点击登录/退出登录按钮需要响应合理逻辑，，，，，，并改变按钮样式
  • 只有登录状态下才会显示我的钱包按钮

页面结构
  1. <!--pages/my/index.wxml-->
  2. <view class="container">
  3.     <view class="user-info">
  4.     <!-- 用户未登录就没有头像-->
  5.     <block wx:if="{{userInfo.avatarUrl != ''}}">
  6.         <image src="{{userInfo.avatarUrl}}"></image>
  7.     </block>
  8.         <text>{{userInfo.nickName}}</text>
  9.     </view>
  10.     <!-- 用户未登录就没有钱包按钮-->
  11.     <block wx:if="{{userInfo.avatarUrl != ''}}">
  12.     <view class="my-wallet tapbar" bindtap="movetoWallet">
  13.         <text>我的钱包</text>
  14.         <text>></text>
  15.     </view>
  16.     </block>
  17.     <button bindtap="bindAction" class="btn-login" hover-class="gray" type="{{bType}}" >{{actionText}}</button>
  18. </view>
复制代码

指令wx:if="boolean"：
当boolean为true，，，，，，被它（block）包裹的元素将会显示，，，，，，否则不现实，，，，，，这样可以处理在未登录状态下不显示头像和钱包按钮

页面样式
  1. /* pages/my/index.wxss */
  2. .user-info{
  3.         background-color: #fff;
  4.         padding-top: 60rpx;
  5. }
  6. .user-info image{
  7.         display: block;
  8.         width: 180rpx;
  9.         height: 180rpx;
  10.         border-radius: 50%;
  11.         margin: 0 auto 40rpx;
  12.         box-shadow: 0 0 20rpx rgba(0,0,0,.2)
  13. }
  14. .user-info text{
  15.         display: block;
  16.         text-align: center;
  17.         padding: 30rpx 0;
  18.         margin-bottom: 30rpx;
  19. }
  20. .btn-login{
  21.         position: absolute;
  22.         bottom: 60rpx;
  23.         width: 90%;
  24.         left: 50%;
  25.         margin-left: -45%;
  26. }
  27. .gray{
  28.         background-color: #ccc;
  29. }
复制代码

页面数据逻辑（未登录状态下的数据模板初始值界说在data工具里）
  1. // pages/my/index.js
  2. Page({
  3.   data:{
  4.     // 用户信息
  5.     userInfo: {
  6.       avatarUrl: "",
  7.       nickName: "未登录"
  8.     },
  9.     bType: "primary", // 按钮类型
  10.     actionText: "登录", // 按钮文字提醒
  11.     lock: false //登录按钮状态，，，，，，false体现未登录
  12.   },
  13. // 页面加载
  14.   onLoad:function(){
  15.     // 设置本页导航问题
  16.     wx.setNavigationBarTitle({
  17.       title: '个人中心'
  18.     })
  19.     // 获取外地数据-用户信息
  20.     wx.getStorage({
  21.       key: 'userInfo',
  22.       // 能获取到则显示用户信息，，，，，，并坚持登录状态，，，，，，不可就什么也不做
  23.       success: (res) => {
  24.         wx.hideLoading();
  25.         this.setData({
  26.           userInfo: {
  27.             avatarUrl: res.data.userInfo.avatarUrl,
  28.             nickName: res.data.userInfo.nickName
  29.           },
  30.           bType: res.data.bType,
  31.           actionText: res.data.actionText,
  32.           lock: true
  33.         })
  34.       }
  35.     });
  36.   },
  37. // 登录或退出登录按钮点击事务
  38.   bindAction: function(){
  39.     this.data.lock = !this.data.lock
  40.     // 若是没有登录，，，，，，登录按钮操作
  41.     if(this.data.lock){
  42.       wx.showLoading({
  43.         title: "正在登录"
  44.       });
  45.       wx.login({
  46.         success: (res) => {
  47.           wx.hideLoading();
  48.           wx.getUserInfo({
  49.             withCredentials: false,
  50.             success: (res) => {
  51.               this.setData({
  52.                 userInfo: {
  53.                   avatarUrl: res.userInfo.avatarUrl,
  54.                   nickName: res.userInfo.nickName
  55.                 },
  56.                 bType: "warn",
  57.                 actionText: "退出登录"
  58.               });
  59.               // 存储用户信息到外地
  60.               wx.setStorage({
  61.                 key: 'userInfo',
  62.                 data: {
  63.                   userInfo: {
  64.                     avatarUrl: res.userInfo.avatarUrl,
  65.                     nickName: res.userInfo.nickName
  66.                   },
  67.                   bType: "warn",
  68.                   actionText: "退出登录"
  69.                 },
  70.                 success: function(res){
  71.                   console.log("存储乐成")
  72.                 }
  73.               })
  74.             }     
  75.           })
  76.         }
  77.       })
  78.     // 若是已经登录，，，，，，退出登录按钮操作     
  79.     }else{
  80.       wx.showModal({
  81.         title: "确认退出?",
  82.         content: "退出后将不可使用ofo",
  83.         success: (res) => {
  84.           if(res.confirm){
  85.             console.log("确定")
  86.             // 退出登录则移除外地用户信息
  87.             wx.removeStorageSync('userInfo')
  88.             this.setData({
  89.               userInfo: {
  90.                 avatarUrl: "",
  91.                 nickName: "未登录"
  92.               },
  93.               bType: "primary",
  94.               actionText: "登录"
  95.             })
  96.           }else {
  97.             console.log("cancel")
  98.             this.setData({
  99.               lock: true
  100.             })
  101.           }
  102.         }
  103.       })
  104.     }   
  105.   },
  106. // 跳转至钱包
  107.   movetoWallet: function(){
  108.     wx.navigateTo({
  109.       url: '../wallet/index'
  110.     })
  111.   }
  112. })
复制代码

使用wx.login({})API来举行登录，，，，，，使用wx.getUserInfo({})API来获取用户信息
我们将用户信息使用wx.setStorage({})API和wx.getStorage({})这两个API来设置和获取外地存储，，，，，，用于模拟维护用户登录状态。。 。真真相形下需要使用session

其他章节
微信小程序开发之OFO共享单车——扫码
微信小程序开发之OFO共享单车——单车报障页
微信小程序开发之OFO共享单车——个人中心页
微信小程序开发之OFO共享单车——钱包与充值
【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿，，，，，，由于未联系到知识产权人或未发明有关知识产权的挂号，，，，，，若有知识产权人并不肯意我们使用，，，，，，若是有侵权请连忙联系。。 。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真，，，，，，仅系客观性形貌，，，，，，如您需要相识该类商品/服务详细的资讯，，，，，，请您直接与该类商品/服务的提供者联系。。 。


KESION pp电子软件

KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商，，，，，，恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。 。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。 。

KESION 一直通过手艺立异，，，，，，提供产品和服务，，，，，，助力企业向数字化转型，，，，，，通过科技驱动商业刷新，，，，，，让商业变得更智慧！



▼点击进入pp电子官网相识更多



上/下篇
换一换相关推荐
精选内容
热门精选
pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站
【网站地图】
微信小程序开发之OFO共享单车,微信小程序个人中心页制作 -