【微信小程序】（2）：登录页面

01 设计思路

1.1 小程序设计思路

1.1.1 页面设计思路

• wxml中设定两个页面，第一个页面 实现登录并获取用户信息 ，第二个页面 获取用户的手机号
• 设定值isHide，判断是否实现登录，以确定展示 登录页 还是 手机获取页
• 登录页设定值canIUse，以判断 正常显示 ，还是 提醒微信版本更新

1.1.2 js设计思路

• Page的data中，canIUse: wx.canIUse('button.open-type.getUserInfo'),，判断小程序的API，回调，参数，组件等是否在当前版本可用
• OnLoad()中使用wx.getSetting()判断是否授权，是否需要改变isHide
• 第一个页面中按键绑定函数bindGetUserInfo()，
  该函数设计思路为：
  • ①设计弹窗，不授权则提示“取消授权，将无法查看更多”
  • ②成功授权，则wx.login()获取code
  • ③wx.request()发送code给后端，后端加密，返回程序段token与是否成功状态
  • ④若状态为成功，将token通过wx.setStorage()保存到本地
    并将token，通过wx.setData()保存在 页面的data
  • ⑤由于wx.setData()是异步，当保存成功后，再获取用户信息（头像、昵称），并reques发送
• 第二个页面中按键绑定函数 getPhoneNumber()，获取encryptedData和iv，request获取解密后的手机号

1.1.3 app.js设计思路

希望首次登录的用户，跳出登录页面，之后每次登录，首页面为主页面

• 在页面的js中，完成所有登录流程后，加入语句wx.setStorageSync('isFirst', 1);，设置标志isFirst，并放入storage，本地存储
• 在app.js中，取isFirst，判断是否是已登陆，确定不同的起始页面

02 详细说明

2.1 用户登录

2.1.1 参考

• 【B站讲解视频】https://www.bilibili.com/video/BV1cK4y1t75f?p=13

• 微信官方登录流程讲解

• wx.login() 官方文档

2.1.2 关于登录流程

→ wx.login 获取 临时登录凭证code （每个code只能使用一次，5分钟有效）
→ 后台根据code，获取 用户唯一标识 OpenID 和 会话密钥 session_key

2.2.3 关于openid

说明：
每个用户对同一个小程序有相同的OpenID，对不同的小程序OpenID不同
具体可参考：https://www.jianshu.com/p/9ea1f27773b1

2.2.4 程序说明

wxml：

<button class='bottom' type='primary' bindtap="bindGetUserInfo" >
            微信登录
</button>

js：

Page({
   
  bindGetUserInfo(){
   
    wx.login({
   
      success (res) {
   
        if (res.code) {
   
          //发起网络请求
          console.log(res.code)
	          // wx.request({
   
	          //   url: 'https://test.com/onLogin',
	          //   data: {
   
	          //     code: res.code
	          //   }
	          // })
        } else {
   
          console.log('登录失败！' + res.errMsg)
        }
      }
    })
  }
})

• 将 wx.login 官方文档 中的程序复制到js文件中
• 加入 console.log(res.code)
• 运行成功后即可获得 code