1、授权登录的页面基本实现:
1)、这个是.xml页面的样式:
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class='content'>
<view class="contentText">申请获取以下权限</view>
<text>获得你的公开信息(昵称,头像等)</text>
</view>
<button class='bottom' type='primary' open-type="getUserInfo" bindgetuserinfo="getUserInfo">
授权登录
</button>
</view>
```现在的微信小程序不能直接进入获取个人基本信息,必须通过button标签触发函数来获取,所以这个“getUserInfo”
函数是核心函数,
<div class="se-preview-section-delimiter"></div>
这里写代码片
“`
getUserInfo: function(e) {
var that = this;
console.log(e.detail.userInfo);
if (e.detail.userInfo) {
wx.login({
success: res => {
//console.log(res.code, e.detail.iv, e.detail.encryptedData)
//console.log(e.detail.userInfo)
wx.request({
//后台接口地址
url: 'http://5849124c.ngrok.io/mollymall/authorize', //这个是写自己后台提供的api接口
data: {
code: res.code,
// nickname: e.detail.userInfo.nickName,
// sex: e.detail.userInfo.gender,
// country: e.detail.userInfo.country,
// province: e.detail.userInfo.province,
// city: e.detail.userInfo.city,
// headurl: e.detail.userInfo.avatarUrl,
iv: e.detail.iv,
encryptedData: e.detail.encryptedData
},
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
console.log(res);
if(res.statusCode == 200){
wx.setStorageSync("mollySession", res.data.data);//可以把openid保存起来,以便后期需求的使用
wx.redirectTo({
url: "/pages/subscriber/subscriber"
})
}else{
wx.redirectTo({
url: "/pages/login/login"
})
}
}
})
}
})
}else{
console.log(333, '测试而已!')
wx.showToast({
title: "为了您更好的体验,请先同意授权",
icon: 'none'
});
}
//跳转到另一个页面
// wx.navigateTo({
// url: "/pages/index/index"
// })
//console.log(e);
}
接着触发这个getUserInfo里面要调用微信的wx.login({})这个函数才能获取在授权登录需要传过去的code、iv、encryptedData参数;基本的就操作完成了