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

Posted 2021-02-21 Amy鱼

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

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

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

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

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

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