小程序 获取用户信息跨页面的多种情况分析、canvas生成海报不显示头像的简单处理方法
本期重在编程思想分享,代码仅供参考,要根据自己的需求来写。
本文主要讲用户拒绝授权后的逻辑处理;用canvas制作海报需要画出用户头像,点击“生成海报”用户明明同意授权了,可是不显示该怎么办。
我说一个场景:
这里有两个页面A和B,A点一下能调转到B。
A是一个获取用户信息的按钮,点一下就一个逻辑:获得授权,就so一下跳到B了;
B是一个生成海报(需要用到用户头像和昵称)的按钮,点一下有两个逻辑:获得授权和生成海报。
那么现在有三种情况:
1、A页面同意授权;B页面顺利生成海报。
2、A页面拒绝授权;B页面同意授权。
3、A页面拒绝授权;B页面拒绝授权、再点一下同意授权。
假如用户同意授权的话,用户信息应该存放在哪里去??我这里用的是wx.setStorageSync方法存入本地。
第一种情况,没什么问题,到B页面的时候wx.getStoragesync就可以把用户信息拿出来了。
第二种情况,同意授权的同时海报要生成出来,就会出现:海报上没有显示用户信息(因为还没来得及读出来呢!)。
这就是“canvas生成海报不显示头像” 的问题,由网络延迟问题和函数的异步执行问题导致,解决的简单方法就是传参+强制顺序执行,见下面我后面打“!!!”的地方。
(先插入一下B页面的代码)(A、B页面的代码有删减一些和本文无关的逻辑,如果直接粘贴复制,请根据自己的情况修改代码,如果出了不懂得bug和问题,欢迎私聊我)
<!--wxml文件 -->
<button class=‘btn3‘ open-type="getUserInfo" bindgetuserinfo="onGotUserInfo"> <image class=‘btnImg‘ src=‘你的图片的地址‘></image> <view>生成海报</view> </button>
//js文件
onGotUserInfo:function(e){ wx.showToast({ title: ‘海报生成中...‘, icon: ‘loading‘, duration: 1000 }); //如果“同意授权” if(e.detail.userInfo){ console.log("我点了确定") if(!wx.getStorageSync(‘userNickname‘)&&!wx.getStorageSync(‘userImg‘)){//如果A页面用户就是拒绝的,那还要想法子再获取的 wx.setStorageSync(‘userNickname‘,e.detail.userInfo.nickName) this.downuserHead(e.detail.userInfo.avatarUrl) //!!!用户头像的处理,不赘述 } else{//如果我A页面已经授权了,那就直接开始画海报吧! setTimeout(function () { wx.hideToast() // console.log("有获取到头像吗?"+wx.getStorageSync(‘userImg‘)) that.createNewImg();//这个函数是画背景和文字 that.darwAvatarArc(context, wx.getStorageSync(‘userImg‘), 50, 50, 60, 60);//这个函数是画用户头像 that.setData({ maskHidden: true }); }, 1000) } } else{//在B页面又拒绝了,那就什么都不用做,当然也就不要画了 console.log("用户又拒绝授权了"); wx.navigateTo({ url: ‘B页面(相当于啥也没干)‘, }) } },
downuserHead:function(userImg){//!!! var that = this; wx.downloadFile({//显示用户头像的重要代码,但是这里不赘述,参考其他更详细的文档把。 url: userImg, success: function(res) { if (res.statusCode === 200) { wx.setStorageSync(‘userImg‘, res.tempFilePath)//!!! console.log("A页面我是拒绝的,不过我现在在B页面同意授权了,现在我的头像地址="+wx.getStorageSync(‘userImg‘)); } }, }) //以下是画海报 setTimeout(function () { wx.hideToast() console.log("有获取到头像吗?"+wx.getStorageSync(‘userImg‘)) that.createNewImg(); that.darwAvatarArc(context, wx.getStorageSync(‘userImg‘), 50, 50, 60, 60);//!!! that.setData({ maskHidden: true }); }, 1000) },
(A页面代码)
wxml:
<button type="primary" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="GotUserInfo">确定</button>
js:
GotUserInfo: function (info) {//同意了就把用户信息保存到本地去,不同意就不同意呗,跳到B去 var that = this if(info.detail.userInfo){ console.log("用户同意了获取用户信息!") this.downuserHead(info.detail.userInfo.avatarUrl) //和B页面是重复的逻辑 wx.setStorageSync(‘userNickname‘, info.detail.userInfo.nickName) } }, downuserHead:function(userImg){ wx.downloadFile({ url: userImg, success: function(res) { if (res.statusCode === 200) { wx.setStorageSync(‘userImg‘,res.tempFilePath) } console.log("临时地址"+res.tempFilePath) }, })
wx.navigateTo({ url: ‘B页面‘, })
},
第三种情况,A拒绝,B拒绝后再点同意(好闲啊这个人)
其实就是第二种情况的变形而已。
-------------------------------割割割-------------------------------
比不上大神的思想,以上是我自己悟出来的,实践证明也很有效且简单。啊啊 我好喜欢小逻辑哈哈哈哈哈。
如果有什么问题欢迎私信戳我!