很多的时候我们在做小程序应用的时候,希望用户在使用小程序前进行登录授权,之前登录后通过wx.getUserInfo直接弹出授权的登录方式官方的意思是将不再支持,而是让用户通过下面的方式授权用户信息
<button open-type="getUserInfo" bindgetuserinfo="getUserInfoAction">授权用户信息</button>
这样的话当小程序在使用前一定需要用户登录,或者已经进行到需要用户登录的操作时;这样的话就需要一个button授权页面。这种改变,感觉个人还是喜欢默认弹层的的授权方式,这个方式可能一时不适应吧,有种排斥。
下面是通过button授权的方式做的一个登录:这里我只是展示了login.js 与 index.js 过程,有不对或者不好的地方欢迎加群交流指正。
login.js
const ajax = require("../../common/ajax.js")const tips = require("../../common/tips.js")Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { let that = this; }, getUserInfoAction(res){ let that = this; const encryptedData = res.detail.encryptedData; const iv = res.detail.iv; if (encryptedData && iv){ // console.log("允许") that.login().then((login)=>{ const params = { "code": login.code, "encryptedData": encryptedData, "iv": iv, "type": "small_wechat" } ajax.posts(params, "api/passport/thirdSign").then((res) => { let userinfo = { avatar: res.data.data.avatar, nickname: res.data.data.nickname, token: res.data.data.token, user_id: res.data.data.user_id } wx.setStorageSync("userinfo", userinfo); // console.log(wx.getStorageSync("userinfo")); if (wx.getStorageSync("userinfo")){ wx.redirectTo({ url: '/page/index/index' }) } }).catch((errMsg) => { tips.showToast("网络连接失败", "none") console.log(errMsg) }) }).catch((errMsg) => { console.log("登录:" + errMsg) }) }else{ // console.log("拒绝") tips.showToast("请授权公开信息,登录小程序", "none") } }, login(){ // 登录 let promise = new Promise((resolve, reject) => { wx.login({ success: function (res) { if (res.code) { resolve(res) } else { tips.showToast("登录失败", "none") } }, fail: function (err) { reject(err) } }) }) return promise; }})
index.js
const tips = require("../../common/tips.js")Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { let that = this; if (!wx.getStorageSync("userinfo")) { //是否登录 that.isloginindex() } }, isloginindex() { //是否进入首页 if (wx.getStorageSync("userinfo")) { console.log("登录") } else { //无信息 console.log("否登录") wx.redirectTo({ url: '/page/login/login' }) } }})
通过button open-type="getUserInfo"的方式授权登录小程序流程,还没有想到一个更好的办法,目前是这么干的;如果有不对或者更好方式的欢迎指正或者一起交流