小程序 获取用户信息跨页面的多种情况分析、canvas生成海报不显示头像的简单处理方法

时间:2020-04-28 17:21:41   收藏:0   阅读:109

本期重在编程思想分享,代码仅供参考,要根据自己的需求来写。

本文主要讲用户拒绝授权后的逻辑处理;用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拒绝后再点同意(好闲啊这个人)

其实就是第二种情况的变形而已。

-------------------------------割割割-------------------------------

比不上大神的思想,以上是我自己悟出来的,实践证明也很有效且简单。啊啊 我好喜欢小逻辑哈哈哈哈哈。

如果有什么问题欢迎私信戳我!

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!