问题产生原因:是由微信官方对接口进行升级引起的。
在之前我们在小程序获取用户信息是如下方式:
<van-button bind:getuserinfo="getUserInfo" open-type="getUserInfo" plain round block size="small" type="primary" > 点击这里登录 </van-button>
注:bind:getuserinfo="getUserInfo" 中的getUserInfo是个响应事件,当然事件名可以随便取的,不一定非是 getUserInfo 这个名字
open-type="getUserInfo" 则是微信小程序的一个开放能力,在按钮上设置此属性则会触发 getuserinfo 事件。
下面则是事件的响应函数
async getUserInfo(e) { // 微信授权 let that = this let userInfo = e.detail.userInfo if (userInfo) { let login = () => { return new Promise(resolve => { wx.login({ success(res) { resolve(res) }, fail() { resolve() } }) }) } let getUserInfo = () => { return new Promise(resolve => { wx.getUserInfo({ success(res) { resolve(res) }, fail() { resolve() } }) }) } let res = await login() let res2 = await getUserInfo() showLoading(\'加载中\') if (res && res.code && res2) { let { encryptedData, iv, rawData, signature } = res2 await that.userLoginFunc( res.code, encryptedData, iv, rawData, signature ) hideLoading() } } }
根据官方文档
调整后,开发者如需获取用户身份标识符只需要调用wx.login接口即可。开发者若需要在界面中展示用户的头像昵称信息,可以通过<open-data>组件进行渲染,该组件无需用户确认,可以在界面中直接展示。在部分场景(如社交类小程序)中,开发者需要在获取用户的头像昵称信息,可调用wx.getUserProfile接口,开发者每次通过该接口均需用户确认,请开发者妥善处理调用接口的时机,避免过度弹出弹窗骚扰用户。
解决过程分析:
主要就是变化几点,无需再用 open-type="getUserInfo" 了,wx.getUserInfo接口也不用了,改为调用 wx.getUserProfile接口 ,触发的方式要改为事件:
<van-button bind:click="getUserProfile" plain round block size="{{ fullPage?\'large\':\'small\' }}" type="primary" > 点击这里登录 </van-button>
async getUserProfile(e){ let that = this let getuserinfo = new Promise((resolve, reject) => { wx.getUserProfile({ desc: \'用于完善会员资料\', success(res) { resolve(res) }, fail() { resolve() } }) }) let login = new Promise((resolve, reject) => { wx.login( { success(res) { resolve(res) }, fail() { resolve() } }) } ) //console.log("params=" + params ) let flag = true Promise.all([login, getuserinfo]).then(res=>{ console.log(\'所有操作完成---\',res) let code = "" //let params = { encryptedData:\'\', iv:\'\', rawData:\'\', signature:\'\' } if(res[0] && res[0].code ) { code = res[0].code }else{ falg = false } if(res[1]){ console.log( "-----oooo----------") //console.log("signature:" + params.signature) }else{ falg = false } showLoading(\'加载中\') //console.log("") if (flag) { let { encryptedData, iv, rawData, signature } = res[1] //调用后端接口 that.userLoginFunc( code, encryptedData, iv, rawData, signature ) hideLoading() } }).catch((error) => { console.log(error) }) }
上面的代码在一次请求中以promise方式调了两个微信口 wx.getUserProfile 和 wx.login ,
但这在小程序中是不允许的,所以需要以Promise.all的方式去调用 ,Promise.all可以接受一个promise数组作为参数,
当所有的子Promise都完成,该Promise完成,返回值是全部值的数组。如果有任何一个失败,该Promise失败。
请发表评论