微信小程序登录方案

登录是我们项目研发中经常容易忽略的一块，但它会对我们小程序开发产生重要影响，比如新客转化、小程序审核等，微信官方在登录这一块也做了明确限制，2019.07发布了相关规范 规范地址

对于用户注册流程是对外开放、无需验证特定范围用户，且注册后即可提供线上服务的小程序，不得在用户清楚知悉、了解小程序的功能之前，要求用户进行帐号登录。

参考市场主流小程序以及微信官方案例后，我们整理出我们项目中的登录方案，方案以用户体验为准，主要考虑以下几点：

• 新用户可以在不登录的情况下浏览信息。
• 只在需要用户身份的操作，如加购、下单等操作时才会提示新用户需要授权登录。
• 老用户在登录后再次进入小程序不需要重新登录。
• 用户使用什么方式登录（授权、手机号、账号注册登录等）。

那我们在研发中需要注意和解决的包括：

• 确定哪些接口可以无token访问。
• 如何引导用户主动授权。
• 当用户浏览商品下单时增加授权登录流程需要顺畅。
• 老用户再次进入小程序时不需要登录就能获取token。

方案主要包含两个部分，页面展现和内部逻辑。

页面展现形式

• 用户可以在未登录的情况下浏览首页、商品详情等主要页面，在首页、我的页面增加引导用户主动授权功能。

  
  
  

  image.png

• 在需要用户身份的操作按钮增加授权，比如立即购买，用户完成授权后直接跳到下一步。

  
  
  
  
  

  新用户选择好商品规格后点击确定时跳转授权页授权，完成授权后进入确认订单页下单支付即可。

内部逻辑

• 在可以免登陆查看的页面，如果有必需要用户token的接口，增加token判断，没有则不读取。
• 当用户触发操作进入授权页时，记录用户操作，以及下一步动作，当用户授权完成后继续执行。
  使用时分几种场景：
  1、下一步动作为跳转页面，如选择好规格后点击确定需要跳到确认订单页。

const url = `${this.$routes.kind.SUBMIT_ORDER}?type=${deliveryType}&goodsType=${this.goodsType}&sourceType=${this.sourceType}`
if (!await this.$checkToken(false, {next: url})) return false

2、下一步动作为执行当前页面某个方法， 传入方法名，如授权后需要重新读取页面信息。

if (!await this.$checkToken(false, {fn: 'goToExchange'})) return false

登录页面根据不同的参数处理

const pages = getCurrentPages()
const fromPage = pages[pages.length - 2]
const targetPage = this.nextUrl
if (targetPage) {
    wx.redirectTo({ url: '' + targetPage })
} else {
    this.factory && fromPage.onUnload()
    fromPage.onLoad(Object.assign({}, fromPage.options, {$fn: this.fn}))
    wx.navigateBack()
}
// 跳转则直接跳转，方法需要先获取上一个页面实例，再执行onLoad方法

这里需要注意mpvue的一个坑，'mpvue-page-factory'这个插件会重新生成新的this,需要在页面定义一个变量装载之前的this

let that = {} // 解决

that = key ? Object.assign({}, this) : that

• 当用户进入小程序时，如果没有token，尝试调用静默授权接口，拿code找后台换取token，失败视为新用户。

// 静默
async silenceLogin() {
   // 初始化获取静默授权
  this.codeMsg = await this.$wechat.login().catch(e => null)
  const accountId = this.$storage('userInfo') && this.$storage('userInfo').account_id
  if (!this.$storage('token') || !accountId) {
     let res = await API.Login.getToken({
       data: { code: this.codeMsg.code },
       loading: false,
       toast: false
     }).catch(e => null)
     if (res.error_code !== this.$ERR_OK) return
     this.$storage('token', res.data.access_token)
     this.$storage('userInfo', res.data.customer_info)
     HTTP.setHeaders({ Authorization: res.data.access_token })
  }
}

这里利用的是静默授权的code可以解析到用户的openId，再到用户表中查询是否有该用户，有则直接登录成功，没有则视为新用户，不作处理。

流程上大体为

image.png

关于登录这一块，还有部分问题需要考虑到：
1、用户体系设计，是否要考虑多个微信小程序、多个终端小程序（支付宝、百度、抖音等）或者app的情况。
2、购物车设计是否可以不登录先加购，登录后合并本地购物车。（参考京东）