微信小程序获取不到unionid还有小程序无法解析JSON字符串的问题

一、背景

      这边在开发小程序的时候，发现使用wx.login给出的code去请求微信服务器的时候，有时候能取到unionid，有时会取不到unionid。这就造成很多业务上的不便，因为我们在用户第一次授权进来的时候，都是通过unionid来确定这是哪个用户，是否需要注册等。

二、原因

      如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过 unionid 来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的 unionid 是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，unionid 是相同的。
　　同一个微信开放平台下的相同主体的 App、公众号、小程序，如果用户已经关注公众号，或者曾经登录过App或公众号，则用户打开小程序时，开发者可以直接通过 wx.login 获取到该用户UnionID，无须用户再次授权。（解读：用户如果没有登录过app，也没有登录过公众号，也没有关注过公众号的情况下，小程序中通过 wx.login 是获取不到 unionid的）

      那就很明确了，可能是在用户没有关注公众号的情况下，他们第一次进入小程序，此时使用wx.login是无法获取到unionid的。因此才会造成错误。

三、解决方案

1、微信官方文档

大家先看下微信关于wx.getUserInfo的解释，在这个文档上，我们可以知道，通过getUserInfo获取到的encryptedData 还有iv是微信给出的加密数据，我们可以通过解密等方法，获取到用户的unionid。

加密解密算法点这里

2、重写wx.login方法

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        this.globalData.code = res.code;
        if (this.globalData.code) {
          //发起网络请求
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
            var encryptedData = res.encryptedData;
            var iv = res.iv;
            wx.request({
              url: 'https://你的后台接口',
              data: {
                code: this.globalData.code,
                encryptedData:encryptedData,
                iv:iv
              },
              method: "POST",
              dataType:'json',
              success: res => {
                var data = res.data;
                data = data.replace(/\ufeff/g, "");//重点
                var jj = JSON.parse(data);
                console.log(jj);
                if (jj.code == 200) {
                  console.log(jj.data.token);
                  this.globalData.token = jj.data.token;
                  if (this.tokenCallback) {
                    this.tokenCallback(jj.data.token);
                  }
                  wx.setStorage({
                    key: "token",
                    data: jj.data.token
                  })
                }
              }
            })
              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })

        } else {
          console.log('获取用户登录态失败！' + res.errMsg)
        }
      }
    });

解释：
1、这里是先获取code，因为后面要通过code来获取session_key，这部分参考加密解密算法，就能知道都需要什么参数了。
2、把获取到的code放入到全局的code变量中。之所以这么做是因为我用wx.login获取到code之后，发现在wx.getUserInfo方法中无法直接使用，因此就放到全局变量中。
3、请求我们的https接口，后台部分加上自己的逻辑即可。

3、后台部分

1）引入微信官方给出的php加密文件，里面包含，demo.php，wxBizDataCrypt.php，还有一个errorCode.php文件。

2）我这里是放到laravel框架的app/Libs/PHP文件下了，所以引入的代码：

require_once base_path() . '/app/Libs/PHP/wxBizDataCrypt.php';

3）获取unionid的关键代码

//实例化加密算法类
  $pc = new \WXBizDataCrypt(env('xcx_appid'), $session_key);
        $errCode = $pc->decryptData($encryptedData, $iv, $data );

        if ($errCode == 0) {
        //微信返回的是字符串，我们这里把它变成JSON对象
          $data = json_decode($data);
          //获取到unionid
          $unionid = $data->unionId;
        } else {
         return MyResponse::error(40002,'获取unionid失败');
        }

4、按照以上的步骤，就能获取到用户的unionid了

四、碰到的问题

1、返回的JSON字符串，微信不能正常获取

//以下是我返回的数据
{"code":200,"detail":"success","data":{"token":"0911678b4579457xxxxxa89d0"}}

这部分数据微信小程序不能识别它，也不能通过res.code等方法来获取。我们采用JSON.parse(),结果报错，说明这段代码也不是标准的json字符串

2、原因

百度之后，看到一个博主说的很好，这种情况是因为BOOM头的原因。
如图：

通过微信开发工具调试模式下Network看到返回的东西前面有两个小红点，鼠标放上去弹出\ufeff，搜索之，非法字符？

3、去掉boom头代码

//替换掉boom头，转换为空
var data = res.data;
 data= data.replace(/\ufeff/g,"");//重点
              var jj = JSON.parse(data);
            console.log(JJ)

打印之后，我们就发现，已经变成json对象了。此时我们就可以进行正常的取值了。

{code: 200, detail: "success", data: {…}}

参考链接：https://www.jianshu.com/p/ad8a0664d642
参考链接：http://blog.csdn.net/weixin_40024174/article/details/78905288

整体来说，我个人觉得小程序的bug挺多的。有时候出问题，过个几分钟自己就好了。。。我也是很无奈。加油吧。

end