微信小程序相关解释

1 登录

unionid和openid

了解⼩程序登陆之前，我们写了解下⼩程序/公众号登录涉及到两个最关键的⽤户标识：

• OpenId 是⼀个⽤户对于⼀个⼩程序／公众号的标识，开发者可以通过这个标识识别出⽤户。
• UnionId 是⼀个⽤户对于同主体微信⼩程序／公众号／ APP 的标识，开发者需要在微信开放平台下绑定相同账号的主体。开发者可通过 UnionId ，实现多个⼩程序、公众号、甚⾄APP 之间的数据互通了。

关键Api

• wx.login 官⽅提供的登录能⼒
• wx.checkSession 校验⽤户当前的 session_key 是否有效
• wx.authorize 提前向⽤户发起授权请求
• wx.getUserInfo 获取⽤户基本信息

登录流程设计

利⽤现有登录体系

直接复⽤现有系统的登录体系，只需要在⼩程序端设计⽤户名，密码/验证码输⼊⻚⾯，便可以简便的实现登录，只需要保持良好的
⽤户体验即可

利⽤ OpenId 创建⽤户体系

OpenId 是⼀个⼩程序对于⼀个⽤户的标识，利⽤这⼀点我们可以轻松的实现⼀套基于⼩程序的⽤户体系，值得⼀提的是这种⽤户体系
对⽤户的打扰最低，可以实现静默登录。具体步骤如下

• ⼩程序客户端通过 wx.login 获取 code
• 传递 code 向服务端，服务端拿到 code 调⽤微信登录凭证校验接⼝，微信服务器返回openid 和会话密钥 session_key ，此时开发者服务端便可以利⽤ openid ⽣成⽤户⼊库，再向⼩程序客户端返回⾃定义登录态
• ⼩程序客户端缓存 （通过 storage ）⾃定义登录态（ token ），后续调⽤接⼝时携带该登录态作为⽤户身份标识即可

利⽤ Unionid 创建⽤户体系

如果想实现多个⼩程序，公众号，已有登录系统的数据互通，可以通过获取到⽤户 unionid 的⽅式建⽴⽤户体系。因为 unionid
 在同⼀开放平台下的所所有应⽤都是相同的，通过 unionid 建⽴的⽤户体系即可实现全平台数据的互通，更⽅便的接⼊原有的功能，
 那如何获取 unionid 呢，有以下两种⽅式

• 如果户关注了某个相同主体公众号，或曾经在某个相同主体 App 、公众号上进⾏过微信登录授权，通过 wx.login 可以直接获取 到 unionid
• 结合 wx.getUserInfo 和 这两种⽅式引导⽤户主动授权，主动授权后通过返回的信息和服务端交互 (这⾥有⼀步需要服务端解密数据的过程，很简单，微信提供了示例代码) 即可拿到 unionid 建⽴⽤户体系， 然后由服务端返回登录态，本地记录即可实现登录，附上微信提供的最佳实践
  • 调⽤ wx.login 获取 code ，然后从微信后端换取到 session_key ，⽤于解密getUserInfo 返回的敏感数据
  • 使⽤ wx.getSetting 获取⽤户的授权情况
    • 如果⽤户已经授权，直接调⽤ API wx.getUserInfo 获取⽤户最新的信息；
    • ⽤户未授权，在界⾯中显示⼀个按钮提示⽤户登⼊，当⽤户点击并授权后就获取到⽤户的最新信息
  • 获取到⽤户数据后可以进⾏展示或者发送给⾃⼰的后端。

注意事项

• 需要获取 unionid 形式的登录体系，在以前（18年4⽉之前）是通过以下这种⽅式来实现，但后续微信做了调整（因为⼀进⼊⼩程序，主动弹起各种授权弹窗的这种形式，⽐较容易导致⽤户流失），调整为必须使⽤按钮引导⽤户主动授权的⽅式，这次调整对开发者影响较⼤，开发者需要注意遵守微信的规则，并及时和业务⽅沟通业务形式，不要存在侥幸⼼理，以防造成⼩程序不过审等情况

wx.login(获取code) ===> wx.getUserInfo(⽤户授权) ===> 获取 unionid

• 因为⼩程序不存在 cookie 的概念， 登录态必须缓存在本地，因此强烈建议为登录态设置过期时间
• 值得⼀提的是如果需要⽀持⻛控安全校验，多平台登录等功能，可能需要加⼊⼀些公共参数，例如 platform ， channel ， deviceParam 等参数。在和服务端确定⽅案时，作为前端同学应该及时提出这些合理的建议，设计合理的系统。
• openid ， unionid 不要在接⼝中明⽂传输，这是⼀种危险的⾏为，同时也很不专业

2 图⽚导出

这是⼀种常⻅的引流⽅式，⼀般同时会在图⽚中附加⼀个⼩程序⼆维码。

基本原理

• 借助 canvas 元素，将需要导出的样式⾸先在 canvas 画布上绘制出来 （ api 基本和h5 保持⼀致，但有轻微差异，使⽤时注意即可
• 借助微信提供的 canvasToTempFilePath 导出图⽚，最后再使⽤saveImageToPhotosAlbum （需要授权）保存图⽚到本地

如何优雅实现

• 绘制出需要的样式这⼀步是省略不掉的。但是我们可以封装⼀个绘制库，包含常⻅图形的绘制，例如矩形，圆⻆矩形，圆， 扇形， 三⻆形， ⽂字，图⽚减少绘制代码，只需要提炼出样式信息，便可以轻松的绘制，最后导出图⽚存⼊相册。笔者觉得以下这种⽅式绘制更为优雅清晰⼀些，其实也可以使⽤加⼊⼀个type参数来指定绘制类型，传⼊的⼀个是样式数组，实现绘制。
• 结合上⼀步的实现，如果对于同⼀类型的卡⽚有多次导出需求的场景，也可以使⽤⾃定义组件的⽅式，封装同⼀类型的卡⽚为⼀个通⽤组件，在需要导出图⽚功能的地⽅，引⼊该组件即可。

class CanvasKit {
constructor() {
}
drawImg(option = {}) {
...
return this
}
drawRect(option = {}) {
return this
}
drawText(option = {}) {
...
return this
}
static exportImg(option = {}) {
...
}
}
let drawer = new CanvasKit('canvasId').drawImg(styleObj1).drawText(styleOb
drawer.exportImg()

注意事项

• ⼩程序中⽆法绘制⽹络图⽚到 canvas 上，需要通过 downLoadFile 先下载图⽚到本地临时⽂件才可以绘制
• 通常需要绘制⼆维码到导出的图⽚上，有⼀种⽅式导出⼆维码时，需要携带的参数必须做编码，⽽且有具体的⻓度（ 32 可⻅字符）限制，可以借助服务端⽣成 短链接 的⽅式来解决

3 数据统计

数据统计作为⽬前⼀种常⽤的分析⽤户⾏为的⽅式，⼩程序端也是必不可少的。⼩程序采取的曝光，点击数据埋点其实和h5原理是
⼀样的。但是埋点作为⼀个和业务逻辑不相关的需求，我们如果在每⼀个点击事件，每⼀个⽣命周期加⼊各种埋点代码，则会⼲扰
正常的业务逻辑，和使代码变的臃肿，笔者提供以下⼏种思路来解决数据埋点

设计⼀个埋点sdk

⼩程序的代码结构是，每⼀个 Page 中都有⼀个 Page ⽅法，接受⼀个包含⽣命周期函数，数据的 业务逻辑对象 包装这层数据，
借助⼩程序的底层逻辑实现⻚⾯的业务逻辑。通过这个我们可以想到思路，对 Page 进⾏⼀次包装，篡改它的⽣命周期和点击事
件，混⼊埋点代码，不⼲扰业务逻辑，只要做⼀些简单的配置即可埋点，简单的代码实现如下

// 代码仅供理解思路
page = function(params) {
let keys = params.keys()
keys.forEach(v => {
if (v === 'onLoad') {
params[v] = function(options) {
stat() //曝光埋点代码
params[v].call(this, options)
}
}
else if (v.includes('click')) {
params[v] = funciton(event) {
let data = event.dataset.config
stat(data) // 点击埋点
param[v].call(this)
}
}
})
}

这种思路不光适⽤于埋点，也可以⽤来作全局异常处理，请求的统⼀处理等场景。

分析接⼝

对于特殊的⼀些业务，我们可以采取 接⼝埋点，什么叫接⼝埋点呢？很多情况下，我们有的 api 并不是多处调⽤的，只会在某⼀
个特定的⻚⾯调⽤，通过这个思路我们可以分析出，该接⼝被请求，则这个⾏为被触发了，则完全可以通过服务端⽇志得出埋点
数据，但是这种⽅式局限性较⼤，⽽且属于分析结果得出过程，可能存在误差，但可以作为⼀种思路了解⼀下。

微信⾃定义数据分析

微信本身提供的数据分析能⼒，微信本身提供了常规分析和⾃定义分析两种数据分析⽅式，在⼩程序后台配置即可。借助⼩程序数据
助⼿这款⼩程序可以很⽅便的查看

4 ⼯程化

⼯程化做什么

⽬前的前端开发过程，⼯程化是必不可少的⼀环，那⼩程序⼯程化都需要做些什么呢，先看下⽬前⼩程序开发当中存在哪些问题需要
解决：

• 不⽀持 css 预编译器,作为⼀种主流的 css 解决⽅案，不论是 less , sass , stylus都可以提升 css 效率
• 不⽀持引⼊npm包 （这⼀条，从微信公开课中听闻，微信准备⽀持）
• 不⽀持 ES7 等后续的 js 特性，好⽤的 async await 等特性都⽆法使⽤
• 不⽀持引⼊外部字体⽂件，只⽀持 base64
• 没有 eslint 等代码检查⼯具

⽅案选型

对于⽬前常⽤的⼯程化⽅案， webpack ， rollup ， parcel 等来看，都常⽤与单⻚应⽤的打包和处理，⽽⼩程序天⽣是
 “多⻚应⽤” 并且存在⼀些特定的配置。根据要解决的问题来看，⽆⾮是⽂件的编译，修改，拷⻉这些处理，对于这些
 需求，我们想到基于流的 gulp ⾮常的适合处理，并且相对于webpack 配置多⻚应⽤更加简单。所以⼩程序⼯程化⽅案推荐
 使⽤ gulp

具体开发思路

通过 gulp 的 task 实现：

• 实时编译 less ⽂件⾄相应⽬录
• 引⼊⽀持 async ， await 的运⾏时⽂件
• 编译字体⽂件为 base64 并⽣成相应 css ⽂件，⽅便使⽤
• 依赖分析哪些地⽅引⽤了 npm 包，将 npm 包打成⼀个⽂件，拷⻉⾄相应⽬录
• 检查代码规范