舟山闪爸电子技术有限公司

產(chǎn)品中心
更多服務

微信小程序開發(fā)之OFO共享單車,微信小程序個人中心頁制作

—— 2017 ——
12/20
00:00

來源：

作者：未知

閱讀：0

欄目：小程序開發(fā)

2017/12/20 0:00:00 來源：不詳 作者：未知
上一節(jié)我們實現(xiàn)了單車報障頁，這一節(jié)我們來實現(xiàn)個人中心頁面：
老套路，先進行頁面分析
  • 個人中心頁有兩種狀態(tài)，即未登錄和已登錄，所以要求不同數(shù)據(jù)驅動產(chǎn)生的不同頁面
  • 點擊登錄/退出登錄按鈕需要響應合理邏輯，并改變按鈕樣式
  • 只有登錄狀態(tài)下才會顯示我的錢包按鈕

頁面結構
  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）包裹的元素將會顯示，否則不現(xiàn)實，這樣可以處理在未登錄狀態(tài)下不顯示頭像和錢包按鈕

頁面樣式
  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. }
復制代碼

頁面數(shù)據(jù)邏輯（未登錄狀態(tài)下的數(shù)據(jù)模板初始值定義在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 //登錄按鈕狀態(tài)，false表示未登錄
  12.   },
  13. // 頁面加載
  14.   onLoad:function(){
  15.     // 設置本頁導航標題
  16.     wx.setNavigationBarTitle({
  17.       title: '個人中心'
  18.     })
  19.     // 獲取本地數(shù)據(jù)-用戶信息
  20.     wx.getStorage({
  21.       key: 'userInfo',
  22.       // 能獲取到則顯示用戶信息，并保持登錄狀態(tài)，不能就什么也不做
  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.     // 如果已經(jīng)登錄，退出登錄按鈕操作     
  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來設置和獲取本地存儲，用于模擬維護用戶登錄狀態(tài)。真實情況下需要使用session

其他章節(jié)
微信小程序開發(fā)之OFO共享單車——掃碼
微信小程序開發(fā)之OFO共享單車——單車報障頁
微信小程序開發(fā)之OFO共享單車——個人中心頁
微信小程序開發(fā)之OFO共享單車——錢包與充值
【本站聲明】
  1、本站文章中所選用的圖片及文字來源于網(wǎng)絡以及用戶投稿，由于未聯(lián)系到知識產(chǎn)權人或未發(fā)現(xiàn)有關知識產(chǎn)權的登記，如有知識產(chǎn)權人并不愿意我們使用，如果有侵權請立即聯(lián)系。
  2、本網(wǎng)站不對文章中所涉及的內(nèi)容真實性、準確性、可靠性負責，僅系客觀性描述，如您需要了解該類商品/服務詳細的資訊，請您直接與該類商品/服務的提供者聯(lián)系。


KESION 科汛軟件

KESION 科汛軟件是國內(nèi)領先的在線教育軟件及私域社交電商軟件服務提供商，長期專注于為企業(yè)提供在線教育軟件及社交電商SaaS平臺解決方案。
公司核心產(chǎn)品云開店SaaS社交電商服務平臺、在線教育SaaS服務平臺、教育企業(yè)數(shù)字化SaaS云平臺、企微營銷助手、私有化獨立部署品牌網(wǎng)校和在線教育咨詢等。

KESION 不斷通過技術創(chuàng)新，提供產(chǎn)品和服務，助力企業(yè)向數(shù)字化轉型，通過科技驅動商業(yè)革新，讓商業(yè)變得更智慧！



▼點擊進入科汛官網(wǎng)了解更多



上/下篇
換一換相關推薦
精選內(nèi)容
熱點精選