登录是我们项目研发中经常容易忽略的一块，但它会对我们小程序开发产生重要影响，比如新客转化、小程序审核等，微信官方在登录这一块也做了明确限制，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、购物车设计是否可以不登录先加购，登录后合并本地购物车。（参考京东）
网友评论