微信小程式 “萬利商城”實戰之十五：“我的”頁面編碼實現
阿新 • • 發佈：2020-11-17
“我的”頁面只實現最簡單的功能，使用者登入，基本資訊的設定，及檢視訂單資訊 ，頁面如下 ：
先看member.wxml頁面的程式碼：
1 <view class="container"> 2 3 <view class="imageInfo1 pad1"> 4 <image class="image1" src="../../images/logo1.png" ></image> 5 <button class="button1" bindtap="bindLogin">點選登入</button> 6</view> 7 8 <view class="orderInfo1 pad1"> 9 <view class="order1"> 10 <text>我的訂單</text> 11 <text data-state="1" bindtap="bindOrder">全部>></text> 12 </view> 13 <view class="order2"> 14 <view class="order3"> 15 <image class="image2" src="../../images/order1.png" ></image> 16 <text data-state="2" bindtap="bindOrder">待支付</text> 17 </view> 18 <view class="order3"> 19 <image class="image2" src="../../images/order2.png" ></image> 20<text data-state="3" bindtap="bindOrder">待收貨</text> 21 </view> 22 <view class="order3"> 23 <image class="image2" src="../../images/order3.png" ></image> 24 <text data-state="4" bindtap="bindOrder">已完成</text> 25 </view> 26 <view class="order3"> 27 <image class="image2" src="../../images/order4.png" ></image> 28 <text data-state="5" bindtap="bindOrder">已失效</text> 29 </view> 30 </view> 31 </view> 32 33 <view class="setting1 pad1"> 34 <text>設定</text> 35 <text bindtap="bindSetting">>></text> 36 </view> 37 38 </view>
對應的樣式檔案程式碼如下：
1 /* pages/member/member.wxss */ 2 page{height: 100%;background-color: #f1f1f1;} 3 4 .pad1 5 { 6 padding-left:20rpx; 7 padding-right:20rpx; 8 padding-bottom:20rpx; 9 padding-top:20rpx; 10 } 11 12 13 .imageInfo1 14 { 15 background-color: #ffffff; 16 border-radius: 10rpx; 17 box-sizing: border-box; 18 width: 100%; 19 display:flex; 20 flex-direction: column; 21 justify-content: flex-start; 22 flex-wrap:nowrap; 23 align-items: center; 24 } 25 .image1 26 { 27 width: 100rpx; 28 height: 100rpx; 29 } 30 .button1 31 { 32 height: 70rpx; 33 line-height: 70rpx; 34 border-radius: 35rpx; 35 margin-top: 20rpx; 36 } 37 .button1::after { 38 border: none; 39 } 40 41 42 .orderInfo1 43 { 44 background-color: #ffffff; 45 border-radius: 20rpx; 46 width: 100%; 47 box-sizing: border-box; 48 margin-top: 20rpx; 49 } 50 .order1 51 { 52 display: flex; 53 justify-content: space-between; 54 height: 100rpx; 55 line-height: 100rpx; 56 } 57 .order2 58 { 59 display: flex; 60 justify-content: space-between; 61 } 62 .order3 63 { 64 display: flex; 65 flex-direction: column; 66 align-content: center; 67 } 68 .image2{ 69 width: 100rpx; 70 height: 100rpx; 71 } 72 73 74 .setting1 75 { 76 background-color: #ffffff; 77 border-radius: 10rpx; 78 box-sizing: border-box; 79 width: 100%; 80 margin-top: 20rpx; 81 display: flex; 82 justify-content: space-between; 83 align-content:center; 84 height: 100rpx; 85 }
下面具體介紹member.js檔案的程式碼：
1 .
點我登入對應的是bindLogin:function(options){}函式，如果任何一個頁面中呼叫 wx.checkSession()函式時session過期，則跳轉到“我的”頁面，在這個頁面中需要重新執行一次 wx.login()的函式中的登入邏輯，具體程式碼可以參考前面章節中app.js的程式碼，其原理是一樣的， 不同的是當用戶登入完之後需要將按鈕隱藏起來，並顯示“已登入”這樣的提示就可以了。 2 . 檢視不同狀態下的訂單資料在bindOrder:function(options){}函式中完成，程式碼如下：1 bindOrder: function (options) { 2 let orderState = options.currentTarget.dataset.state; 3 wx.navigateTo({ 4 url: 'orderList?orderState='+orderState, 5 }) 6 },
使用者點選時跳轉到訂單列表頁面，並將引數傳遞過去，
當我們在<text data-state="1" bindtap="bindOrder">全部>></text>中用data-這樣的形式給事件函式傳遞引數的時候，
在函式中用let orderState = options.currentTarget.dataset.state;語句來接收引數，
options.currentTarget.dataset是固定的屬性，state保持與data-後定義的引數名稱一致就可以了.
3 .
點設定時的事件函式如下 ：
1 bindSetting: function (options) { 2 wx.navigateTo({ 3 url: 'setting', 4 }) 5 },
在這裡做一個簡單的頁面跳轉，在新頁面完成設定的功能。
注：在跳轉的時候如果希望使用者點底部返回按鈕時能回到上一個頁面就用wx.navigageTo()做跳轉，
象支付這樣的頁面我們希望使用者去付款，不希望在退回上一個頁面就用wx.redirectTo()做跳轉。