本文基于初期只开放微信小程序，后期向 iOS/Android/H5 等多终端开放的场景设计，且并不要求“登录即必须绑定手机号码”。如初期即同时多终端推出请参考此文。

项目初期，微信小程序以 openid 作为用户的唯一标识，因此在其它平台也需要用微信来授权登录。但同一微信用户在小程序和 App 上使用微信授权登录后的 openid 并不相同，必须同时绑定到微信开放平台，通过 unionid 关联用户，作为用户的唯一标识。

uni-app 的 input，当 type = "text" 时，设置 confirm-type = "next" 可以提供键盘的“下一项”，通过 @confirm 触发设置下一个文本框的焦点，即可实现只操作键盘即可完成表单填写。

我们以从 a 组件跳转到 b 组件为例：

<input v-model="a" type="text" confirm-type="next" @confirm="moveNext('b')" />

uni-app 的组件只有属性和事件，不提供方法，那么我们只能设置提供了 focus 属性的组件的焦点。

<input v-model="b" :focus="focusList['b']" />

moveNext() 方法实现：

moveNext(dom){
	this.focusList[dom] = true;
}

当然 focusList 必须先定义并初始化，否则设置 focus 为 true 将失效：

data() {
	return {
		a: '',
		b: '',
		focusList: {
			b: false
		}
	}
}

几个注意点：

• confirm-type = "next" 仅支持微信小程序

• “下一项”按钮效果是一次性的，使用一次后再次在 a 上触摸“下一项”将不再跳转到 b，即使在 moveNext() 中先设置为 false 再设置为 true 也没用

• 其它组件也可以通过自带的方法实现跳转到带 focus 属性的组件（如在 picker 的 @change 中设置 this.focusList['b'] = true）

• 限制于 confirm-type = "next" 只当 type = "text" 时有效，因此非文本键盘（如数字键盘）就不能提供“下一项”功能

• textarea 组件的右下角始终是“换行”，由其右上角的“完成”按钮来实现“下一项”功能

• textarea 组件在“下一项”跳转过程中，组件可能会被 tabBar 遮挡（几率很大）
  

见流程图：

微信小程序建议使用 getPhoneNumber 接口来获取用户授权的手机号码，以提高用户体验、节省开发成本、节省短信运营成本。

本文作为 多平台用户登录模块设计 的扩展设计，即以手机号作为用户的唯一凭证。

官方文档的小程序登录时序：
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

（图片摘自 2018.10.30）

session_key 是密钥，仅保存于开发者服务器，用于将小程序通过前端接口获取到的数据解密来验证其真实性。详见 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html

小程序与服务器是通过自定义登录态来识别用户身份的，以下简称口令（token）。

由于微信未告知 session_key 的有效期，那么为保证小程序发起业务请求成功，token 须要永久有效，但这会带来安全隐患。

如果设置 token 的有效期（如 7200 秒），那么小程序发起业务请求后，服务器必须把 token 的验证结果告知小程序，若失效则重新登录。

微信授权登录（含绑定手机号码）流程图

子流程：授权登录

子流程：绑定手机号

为保证数据安全，针对每个须要授权登录的业务请求，服务器都都会检验 token 的有效性。如果小程序同时发起多个业务请求，并几乎同时收到 token 过期，那么会同时发起多个重新登录流程，服务器多次 code2Session，重新生成多个 token 返回到小程序，那么小程序最终保存的 token 可能不是服务器上认为的最新的一个 token。这样，如果程序设计为获取到 token 继而重新发起业务请求，可能会进入死循环。解决的方法是在同时发起多个业务请求之前先向服务器验证一次 token 的有效性，再发起多个业务请求时就不会出现都过期的情况了。

查看详细的短信验证码登录或绑定流程

确定唯一凭证：

若项目仅提供微信端访问，那么使用微信的授权（即以微信 openid / unionid 作为唯一凭证）是一种体现注重用户体验的方式。如果项目需要应用到多个平台上，那么通过微信来授权变得不那么完美（譬如未安装微信客户端或平台不支持使用微信授权等）。因手机的使用率已明显高于电脑的使用率，再加上用户帐号实名认证的要求，以手机号码为作为帐号的唯一凭证是非常合理的。

登录唤起条件：

当用户打开需要登录授权的页面或触发需要登录授权才能执行的操作时。

场景实现：

l  【“手机号码 + 密码”登录】页面显示填写手机号码和密码框的表单，提供“忘记密码”、“短信验证码登录”、“手机快速注册”等功能。如果在可长期记住登录状态的场景中（如手机 App）也可取消密码，直接使用短信验证码登录。“手机快速注册”必须通过短信验证码实现实名认证。

l  【第三方帐号登录 / 扫二维码登录】App 中提供跳转相应第三方 App（如微信）授权登录，PC 端网页中提供微信扫二维码登录。登录获得 unionid，同时判断是否已经绑定过手机号码，若未绑则强制绑定，确保数据库中的每一条用户信息都有手机号码。

注：同一个微信帐号在不同的公众号和 App 中的 openid 不同，将这些公众号和 App 通过微信开放平台绑定后，同一个微信帐号的 unionid 是相同的，可用于判断同一用户。

流程图：

多平台用户登录模块设计.vsdx

各平台登录设计：

• 微信小程序授权登录流程
  

苹果宣布 2017 年 1 月 1 日开始所有上架的应用必须启用 ATS 安全传输功能。ATS 要求服务器必须支持传输层安全(TLS)协议 1.2 以上版本；证书必须使用 SHA256 或更高的哈希算法签名；必须使用 2048 位以上 RSA 密钥或 256 位以上 ECC 算法等等，不满足条件的证书，ATS 都会拒绝连接。查看具体要求

微信小程序进入开发公测阶段，同样要求提供 HTTPS 方式安全连接。

证书类型对比

* 表格中，单域名指单个子域名（如：123.abc.com），多域名指多个子域名（可以不属于同一个顶级域名，如：123.abc.com / 456.abc.com / 456.def.com），通配符指单个顶级域名的所有子域名（如：*.abc.com）。
* 若 https 的网页中包含 http 资源，则地址栏的锁可能会消失。
* 浏览器上点击地址栏的锁可以查看具体的证书详情。

证书颁发机构（CA）

* 赛门铁克收购了 VeriSign，VeriSign 又收购了 GeoTrust，所以 Symantec 和 GeoTrust 在 SSL 认证服务上就不知道是什么关系了，请自行百度。

* 代理商也可以购买，或许价格优惠，或许申请方便，如：阿里云、腾讯云等，甚至上淘宝购买。

* 查看：Netcraft 统计的市场份额

* 网上说使用 Let's Encrypt 的 SSL 在遇到国内第三方 DNS 解析服务时会超时，我认为只是在申请证书时偶尔超时（DNS query timed out），重试即可，证书部署后访问网站时应该没有问题，请知情者告知实情。

* 各版本 Windows 对 SSL/TLS 协议的支持

下一步

购买和部署阿里云的免费型 DV SSL 证书服务

在 IIS 中部署 SSL

在 nginx 中部署 SSL

注册

• 微信公众号功能对比

开发文档

• 

• 

•  

• 资源中心

• 

开发教程

• 微信公众平台域名配置和相关功能实现

• 微信中的网页如何判断当前用户是否关注某微信订阅号

• PC 端引导关注微信公众号（服务号）的简单思路

• 微信·开放平台开发笔记

• 多平台用户登录模块设计

• 微信小程序登录获取 openid，授权获取 unionid、手机号码、昵称等用户信息

• 开发微信小程序

设计

• WeUI：GitHub / Wiki / Demo

运营

• 微信外部链接内容管理规范 2016/4/12