小程序近期的官方公告：官方原文链接

为了优化用户的使用体验，平台将回收“使用 wx.getUserInfo 接口直接弹出授权框”的能力，开发者需要使用组件方式唤起登录授权弹窗。

2018年10月10日后发布新版本的小程序，将无法在线上版本中使用接口直接弹出授权框。开发者可结合平台设计建议，提前做好兼容，合理使用微信登录能力。

在做小程序调整的同时，我也想改变用户登录授权的流程，因为以前的授权，在用户首次打开小程序时，就要求点击授权，确定之类的，对用户而言不是很友好，可能会产生抵触心理；

想做的优化：

不论用户什么时候进入小程序首页，无需任何授权，点击动作，可以以游客的身份浏览查看小程序，当用户进入“用户中心”、“商品详情时”，才弹出授权，这样一来，用户体验就能得到很大提升。

其实一般的情况，openid及头像昵称之类的，可以静默获取，不需要任何点击授权，但是我们当时做了小程序端与公众号端，网页也是可以访问的，所以这个登录流程是强制的，不能省略，一旦省略就不能加载后端信息。

小程序完整的登录流程：

如果当前端仅仅为小程序，那么可以参考小程序官方文档中的做法：

首先看app.js中的全局方法：

其实就是打开一个新的授权页面，路径位于 /pages/wx/auth；

<view class='user-auth'>
  <icon type='success' size='60'></icon>
  <text>授权获取用户信息</text>
  <button type="primary" open-type="getUserInfo" hover-class='none' bindgetuserinfo="getUserInfoFun">确认获取</button>
</view>

之前说过，由于微信小程序官方的要求，不能强制获取用户信息，必须使用按钮的方式，让用户主动去点击，同意我们获取个人信息，不得不吐槽下微信官方的这个机制，用户都使用你的小程序了，就算主动点击了buuton按钮，还是会出现一个允许授权的页面，还是要点击允许才可以使用，90%的用户还是会同意的，为什么要脱了裤子放屁，搞得那么复杂？看看官方公告下的吐槽，程序员何苦为难程序员！

回到正题， /page/wx/auth这个页面最终的样式为：

可以看下微信小程序的官方API，获取用户信息的方法必须写在button按钮中：

当用户点击“确认获取”按钮，并且允许授权：

具体的方法为：

  /**
   * 点击button按钮,获取用户授权信息
   */
  getUserInfoFun: function(event) {
    //console.log(event);
    let that = this;
    let encryptedData = event.detail.encryptedData;
    let iv = event.detail.iv;

    wx.login({
      //获取临时code
      success: res => {
        //使用临时code换取openid与session_key
        core.post('wxapp/login', {
          code: res.code
        }, res => {
          console.log(res);
          console.log('获取openid成功: ' + res.openid);
          console.log('获取session_key成功: ' + res.session_key);
          let openid = res.openid;
          let session_key = res.session_key;

          //利用encryptedData,iv,session_key登录
          core.get('wxapp/auth', {
            data: encryptedData,
            iv: iv,
            sessionKey: session_key
          }, res => {
            console.log('登录成功!');
            console.log(res);
            let userInfo = {
              authkey: res.authkey,
              avatarUrl: res.avatarUrl,
              id: res.id,
              nickName: res.nickName,
              openid: openid,
              uniacid: res.uniacid,
            };

            let needauth = 0;

            //console.log(userInfo);

            App.setCache('userinfo', userInfo);

            that.goBack();
          });
        });
      }


    });


  },

其实最终的目的是，得到userInfo这个对象，并储存在缓存中，而且在此过程中，服务器已经收到所有信息，证明用户登录完成，此时才将后端的用户数据返回给前端（这个问题是属于我们框架的原因，必须完整登录才可以获得用户信息）；

最后要说的是，如果需要openid，只需要调用wx.login方法，就可以静默获取，不用点击任何按钮；

如果需要展示用户的头像以及微信昵称，只需要在wxml页面中写一个open-data组件即可，需要注意的是，<open-data></open-data>是一个非块级元素，具体可以使用css3来定义样式；

现在授权的方法已经做好了，优化的重点在于，当用户访问商品详情页面及用户中心页面时，才调用授权，用户再进行手动操作允许，一般的首页等，用户全部是以游客身份浏览，不用点击任何按钮，都可以正常使用，这样一来用户使用小程序时，体验较之以前要好很多，我们已经从一个首页强制获取用户授权信息的流氓变成了一个当真正需要时才会烦你一下的佛系少年。

商品详情及个人中心调用授权的具体方法为：

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    let self = this;

    //运行检测更新
    APP.updateCheck();

    e.url(r),
      "" == e.getCache("userinfo") && e.openAuthUserInfo();

    self.getInfo();
  },

在页面onShow的时候，检测缓存中是否有用户信息，如果没有那么调用全局方法openAuthUserInfo()来进行一系列操作。

经过了这一系列的调整，用户体验直接上了几层楼，因为之前有很多用户反馈授权特别烦，怎么一个小程序用起来这么麻烦，现在将问题完美解决，啪啪啪啪给自己鼓掌！

感谢阅读~