微信登錄的流程
需求分析：
- 首頁(yè)中, 單擊登錄按鈕痊焊，顯示微信登錄彈窗，在授權(quán)后忿峻，隱藏彈窗薄啥，并把用戶信息存儲(chǔ)在Storage中
- list頁(yè)面中，初始化進(jìn)入時(shí)逛尚，要判斷是否登錄垄惧，登錄，則直接顯示頁(yè)面內(nèi)容绰寞，沒(méi)登錄到逊，則顯示彈窗
- cloud頁(yè)面中铣口，單擊退出賬號(hào)，清除Storage
觉壶、
自定義組件 login
login.wxml
<view class="login">
<view>標(biāo)題：登錄{{num}}次------{{newMsg}}</view>
<button bindtap="getInfo" type="primary" class="btn" >微信登錄</button>
</view>
login.wxss
.login {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: #000;
z-index: 9999;
}
login.js
// components/common/login/login.js
Component({
/**
* 組件的屬性列表
*/
properties: {
newMsg: {
type: String,
value: '默認(rèn)值'
}
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
num: 9,
msg: '初始數(shù)據(jù)'
},
/**
* 組件的方法列表
*/
methods: {
getInfo(e) {
wx.getUserProfile({
desc: '用于完善會(huì)員資料', // 聲明獲取用戶個(gè)人信息后的用途脑题，后續(xù)會(huì)展示在彈窗中，請(qǐng)謹(jǐn)慎填寫
success: (res) => {
console.log(res);
//把獲取的用戶昵稱和頭像地址存在storage
let { nickName ,avatarUrl} = res.userInfo
let user = {
nickName,
avatarUrl
}
wx.setStorage({
key:"userinfo",
data: user
})
this.triggerEvent("change",false)
},
fail(err){
console.log('拒絕');
}
})
},
}
})
首頁(yè)代碼
index.json
{
"usingComponents": {
"com-login": "/components/common/login/login"
}
}
index.wxml
<view><button bindtap="onLogin">登錄</button></view>
<!-- 微信登錄的彈窗 -->
<block wx:if="{{isLoginShow}}">
<com-login bindchange="getChange" new-msg="新值"></com-login>
</block>
index.js
// index.js
// 獲取應(yīng)用實(shí)例
const app = getApp()
Page({
data: {
isLoginShow: false,
},
// 單擊登錄時(shí)铜靶，顯示彈窗
onLogin(){
this.setData({
isLoginShow: true
})
},
//監(jiān)聽(tīng)子組件發(fā)送的事件
getChange(e){
this.setData({
isLoginShow: e.detail
})
},
})
購(gòu)物車頁(yè)面
cart.json
{
"usingComponents": {
"com-login": "/components/common/login/login"
}
}
cart.wxml
<block wx:if="{{isLoginShow}}">
<com-login></com-login>
</block>
<view>列表頁(yè)其它內(nèi)容</view>
cart.js
Page({
data: {
isLoginShow: true
},
onShow: function (options) {
console.log('onshow');
wx.getStorage({
key: 'userinfo',
success:(res)=> {
this.setData({
isLoginShow: false
})
},
fail:()=>{
console.log('沒(méi)有數(shù)據(jù)');
this.setData({
isLoginShow: true
})
}
})
}
})
我的頁(yè)面
my.wxml
<view><button type="primary" bindtap="logout"> 退出登錄</button></view>
my.js
// 退出登錄
logout(){
wx.removeStorage({
key: 'userinfo',
})
},
