您好,登錄后才能下訂單哦!
這篇文章主要介紹微信小程序商城開發(fā)之怎么用微信授權(quán)并實(shí)現(xiàn)個(gè)人中心的示例,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
看效果
開發(fā)計(jì)劃
1、實(shí)現(xiàn)微信授權(quán)并獲取用戶信息
2、個(gè)人中心頁面布局
一、實(shí)現(xiàn)微信授權(quán)并獲取用戶信息
mine.js
onLoad: function () { if (app.globalData.userInfo) { this.setData({ userInfo: app.globalData.userInfo, hasUserInfo: true }) } else if (this.data.canIUse) { // 由于 getUserInfo 是網(wǎng)絡(luò)請(qǐng)求,可能會(huì)在 Page.onLoad 之后才返回 // 所以此處加入 callback 以防止這種情況 app.userInfoReadyCallback = res => { this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } } else { // 在沒有 open-type=getUserInfo 版本的兼容處理 wx.getUserInfo({ success: res => { app.globalData.userInfo = res.userInfo this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } }) } }, getUserInfo: function (e) { console.log(e) app.globalData.userInfo = e.detail.userInfo this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) }
二、實(shí)現(xiàn)微信授權(quán)并獲取用戶信息
mine.wxml
<view class="userinfo"> <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo" class="userinfo-btn"> 點(diǎn)擊微信授權(quán) </button> <block wx:else> <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </block></view><view class="separate"></view><view class="order" catchtap="toOrder"> <text class="myorder-text">我的訂單</text> <text class="myorderlook-text">查看全部訂單</text></view><view class="line"></view><view class="navs"> <block wx:for-items="{{orderItems}}" wx:key="name"> <view class="nav-item" catchtap="toOrder" data-type="{{item.name}}" data-typeid="{{item.typeId}}"> <image src="{{item.imageurl}}" class="nav-image" /> <text>{{item.name}}</text> </view> </block></view><view class="separate"></view><view class="person-list"> <view class="list-item"> <image class="item-image" src="../../images/person/personal_card.png"></image> <text class="item-text">優(yōu)惠券</text> </view> <view class="person-line"></view> <view class="list-item"> <image class="item-image" src="../../images/person/personal_favorite.png"></image> <text class="item-text">我的收藏</text> </view> <view class="person-line"></view> <view class="list-item"> <image class="item-image" src="../../images/person/personal_site.png"></image> <text class="item-text">收貨地址</text> </view> <view class="person-line"></view> <view class="list-item"> <image class="item-image" src="../../images/person/personal_sale_record.png"></image> <text class="item-text">售后記錄</text> </view> <view class="person-line"></view> <view class="list-item"> <image class="item-image" src="../../images/person/personal_evaluated.png"></image> <text class="item-text">我的評(píng)價(jià)</text> </view> <view class="person-line"></view> <view class="list-item"> <image class="item-image" src="../../images/person/personal_customer.png"></image> <text class="item-text">在線客服</text> </view></view><view class="separate"></view>
mine.wxss
.userinfo { display: flex; flex-direction: column; align-items: center; background: #f0145a; width: 100%; height: 300rpx; } .userinfo-btn{ margin-top: 50rpx; background: none !important; color: #fff !important; font-size: 40rpx; } .account-bg { width: 100%; height: 150rpx; } .userinfo-avatar { width: 108rpx; height: 108rpx; margin: 40rpx; border-radius: 50%; } .userinfo-nickname { color: #fff; } /* 訂單 */ .order { display: flex; flex-direction: row; align-items: center; width: 100%; height: 90rpx; } .myorder-text { font-size: 34rpx; color: gray; margin: 20rpx; width: 40%; } .myorderlook-text { font-size: 32rpx; color: gray; position: relative; right: 20rpx; width: 60%; text-align: right; } .next-image { width: 20rpx; height: 25rpx; position: relative; right: 10rpx; } .navs { display: flex; } .nav-item { width: 25%; display: flex; align-items: center; flex-direction: column; padding: 20rpx; } .nav-item .nav-image { width: 55rpx; height: 55rpx; margin: 5rpx; } .nav-item text { margin-top: 20rpx; font-size: 28rpx; color: gray; } /* 列表 */ .person-list { display: flex; flex-direction: column; align-items: left; } .list-item { display: flex; flex-direction: row; align-items: center; height: 80rpx; } .item-image { width: 40rpx; height: 40rpx; margin: 20rpx; } .item-text { color: gray; font-size: 30rpx; margin-left: 20rpx; } .person-line { width: 80%; height: 2rpx; background: lightgray; margin-left: 90rpx; }
mine.js
var app = getApp() Page({ data: { userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo'), orderItems: [ { typeId: 0, name: '待付款', url: 'bill', imageurl: '../../images/person/personal_pay.png', }, { typeId: 1, name: '待收貨', url: 'bill', imageurl: '../../images/person/personal_receipt.png', }, { typeId: 2, name: '待評(píng)價(jià)', url: 'bill', imageurl: '../../images/person/personal_comment.png' }, { typeId: 3, name: '退換/售后', url: 'bill', imageurl: '../../images/person/personal_service.png' } ], }, //事件處理函數(shù) toOrder: function () { wx.navigateTo({ url: '../order/order' }) } }
mine.json
{ "navigationBarTitleText": "個(gè)人中心"}
以上是“微信小程序商城開發(fā)之怎么用微信授權(quán)并實(shí)現(xiàn)個(gè)人中心的示例”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。