最近因为小程序官方,逐步废除UserInfo接口的这个决定,让很多微信小程序的开发者,很烦恼,同时我也因为这个上火,公司有重要会议要展示,突然来着这么一招。真的是够了,但是没办法,开始改吧。
于是我,在社区找了很多官方的文档小程序•小故事(4)--获取用户信息 | 微信公众平台 开发者社区。 你会发现跟原来的方式,只是改变了userinfo的数据返回。 login的接口拿 res.code,
然后点击登陆按钮的返回值相结合,就可以换取到unionid,来开始业务逻辑了。
function login(userInfo,callback,reset) {
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
if(res.code){
//存用户信息
wx.setStorageSync('UserInFo', userInfo)
// 扫面二维码进入
let Scene = wx.getStorageSync('scene')
let userInfoStr = JSON.stringify(userInfo);
wx.request({
url: api.WxUnionId,
data: {
appid: 'xxx',//测试
secret: 'xxx',
js_code: res.code,
grant_type: 'authorization_code',
userInfo: userInfoStr,
scene:Scene//这个是我们的业务逻辑的参数 忽略
},
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: callback
})
}else{
}
}
}) 复制代码
封装好这个,就可以开始用button 来开始弹授权的吐司了。
<button class =“login-btn”open-type =“getUserInfo”bindgetuserinfo =“hand
leUserInfo”>
登录
</ button>
// 然后打印events 你就可以加密数据 数据 调接口 后端解析 换 unionId
handleUserInfo(e) {
let msg = e.detail.errMsg;
if(msg === 'getUserInfo:ok'){
let user = e.detail.userInfo;
user.encryptedData = e.detail.encryptedData;
user.iv = e.detail.iv;
utils.setDataBase('islogin',true);//set 本地数据
utils.login(user,this.handleLogin.bind(this))
this.setData({
islogin:false
});
}else{
utils.setDataBase('islogin',false);//set 本地数据
this.setData({
islogin:true
});
utils.showModal('xxx,申请获得您的公开信息(头像,昵称等)。授权后,您能体验到我们更完善的功能,谢谢您关注五色糖。',false,this);
}
},
在handleLogin 里面 拿到后端的res 就可以开始业务逻辑了。涉及到业务逻辑 就不贴代码了。复制代码
因为我当时,是一个人写电商商城,那会mpvue 没有出 wepy 公司没有留学习的时间,以上的代码全是原生的写法,但是改这个最重要的,就是别烦,其实你慢慢捋顺了就好了。
https://www.zhihu.com/video/979511841957826560 效果在这里。
登陆页面比较丑,UI 还没有出图,就不要在意这些细节了。
https://juejin.im/post/5b0ccd4e51882515861d2347#comment
我还总结了一些我写小程序的笔记,写的有不好的地方,还请大神指点。