微信小程序：登录的流程

整理总结近几个月开发小程序走过的弯路，不定期更新的日常。

版本使用的是微信的快速启动模板

• 微信登录的流程和项目的业务逻辑相关,我的理解不外乎就两种:

            a.用户不用授权就可直接进入小程序。

            b.另外就是需要用户授权登录才可进入小程序

     相比第一中比较简单，而且在开发过程中，也许要用户的自主授权，如果要获取用户的信息必须用户授权同意，还符合保密用户的隐私，正是因为如此，微信才废弃getUerInfo()这个接口

     第二种就比较强制性了（个人认为要授权获取我的信息才能使用小程序我感觉体验不佳）这也跟项目的用途逻辑有关

微信小程序开发API快速传送门

首先上图（登录流程）

 微信的登录的获取用户授权后的信息：

1. 首先调用wx.login()方法获取code(code有效期为5分钟)
2. 小程序使用wx.request()请求后台，用code，appid，appsecret,grant_type请求微信服务器获取session_key和openid（建议请求在后台,附上链接）https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
3. 得到openid和session_key和openid之后就可以自定义用户的登录状态，根据 session_key和openid  生成 3rd_session（微信方提出的基于安全性的考虑，建议开发者不要将openid等关键性信息进行数据传输） 并返回 3rd_session 到小程序端
4. 官方说3rd_session 存入storage中（个人认为存入到app全局变量中较好），后续的请求中附带参数即可 （实际开发中写一个公共的请求包更好，方便统一管理，参数的组装，请求全屏的遮罩，打印请求url日志及请求时间在控制台一目了然）
5. 来回请求就结束了，有的第三方接口中还加入了token来确保数据的安全性

整理下登录流程，在实际codeing中就游刃有余就像老师教我们写作文一样，得有贯穿整片文章的“线”。很优(zhuang)秀(cha)哦

微信废弃了getUserInfo()这个接口，要获取用户的基本信息就只能引导用户授权登录来获取。

废话少说，上代码吧，先来js和wxml：

上代码前先说一下在小程序中的页面的加载顺序，在app.json文件的pages中谁在第一个就先加载那个页面，下图就是index

咱们就以test为例吧。

先来说下两种获取用户的的方法

• 前台的按钮使用open-type="getUserInfo" 当然这个值有好多（电话，地理位置授权等）
• 用户同意授权之后返回的参数中encryptedData就是用户的信息(这是加密后的信息需要在后台使用iv来解码)

先说第一种：js和wxml

这个匆忙写了一个没有考虑微信的版本兼容的问题，只是演示下，微信公台大家可以自己注册一个

附微信公众平台传送门

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  bindgetuserinfo:function(e){
    console.log(e)
    wx.login({
      success:res => {
        console.log('code is:' + res.code)
        wx.getSetting({
          success: res => {
            if (res.authSetting['scope.userInfo']) {
              console.log('授权成功,用户基本信息为：');
              console.log(e.detail.userInfo);
            } else {
              wx.showModal({
                title: '提示',
                content: '为了有良好体验建议授权',
                showCancel: false,
                success(res) {
                  if (res.confirm) {
                    console.log('用户点击了“授权”');
                  } else if (res.cancel) {
                    console.log('用户点击取消');
                  }
                }
              })
            }
          },
          fail: err => {
            console.log(err)
          }
        })
      }
    })
  }
})

<!--pages/test/test.wxml-->
<text>pages/test/test.wxml</text>

<!-- 背景色来个爱是一道光吧，毕竟可以保护眼睛 -->
<button style='background-color:green;' open-type="getUserInfo" bindgetuserinfo='bindgetuserinfo'>测试登录</button>
<view>{{userInfo.nickName}}</view>
<view><image src='{{userInfo.avatarUrl}}'></image></view>

来个效果图吧：