博客 (7)

情况：

马甲 App 添加链接 a（域名 A），该页面跳转至页面 b（域名 B），信任域名添加 B。

现象：

无法获取 token，即授权不成功。

原因：

马甲 App 是判断首次打开的域名（即本例中的域名 A）是否在信任域名中。

解决：

将上述两个域名都填到信任域名中，或直接添加链接 b，不使用链接 a 作跳转。

另外提醒：

信任域名是真实的 token，合作域名是临时的 token，区别是权限高低；

配置完域名白名单后，应该重启 App 再测试，因为客户端有缓存。

前提：

若需获取用户 unionid，则小程序必须已绑定到微信开放平台。

1. 小程序调用 wx.login()，将 code 发送到开发者服务器

2. 开发者服务器请求微信接口 code2Session，获得 session_key、openid，有机会获得 unionid（参 UnionID 机制说明）。因此无需任何用户授权即可获取 openid

3. 访问须要已获取用户信息的页面时，可通过小程序端使用 button + getUserInfo 的方式请求用户授权

4. 访问须要已获取手机号码的页面时，可通过小程序端使用 button + getPhoneNumber 的方式请求用户授权
   

5. code2session、getUserInfo、getPhoneNumber 等接口返回数据存入数据库 dt_weapp_user

6. 服务端的任何接口均返回口令状态包（含自定义会话口令等信息），小程序端应保存于 storage
   

7. 请求 getUserInfo 后应判断 detail.errMsg 是否为 getUserInfo:ok，请求 getPhoneNumber 后应判断 detail.errMsg 是否为 getPhoneNumber:ok

8. 授权窗口的弹出情况参此文

9. 口令状态包是用来传递到客户端用来标识用户唯一凭证的，包含字段：会话口令（自定义用户凭证）、会话口令有效时间（秒）、是否已获取 unionid 或昵称（视业务需求）、是否已获取手机号码、uid（可选），以及其他用来标识业务身份字段。服务端可根据会话口令从数据库中获取该用户的所有已知信息。

   一般情况下，当已获取手机号码时，uid 必有值，否则，uid 必为空。因此 uid 不是必须传递到客户端的。

   通过 code2Session 获得的 session_key、以及 openid、unionid、手机号码等机密信息不允许包含在口令状态包中并缓存在客户端，客户端需要用到手机号码时单独调用接口获取。

10. 若业务不要求以手机号码作为用户唯一标识，那么口令状态包中不需要包含是否已获取手机号码，仅 uid 即可。在客户端访问须要业务用户登录的页面时，也仅判断 uid 有值即可。
    

流程图：

为更好地适应 2017.7.19 发布的《小程序内用户帐号登录规范调整和优化建议》，开发者服务器提供的所有业务逻辑接口的返回值中都应包含口令状态包，约定有以下相关的返回值和处理动作（返回值按个人喜好来定）：

• WWW-Authenticate 有大小写的问题，千万别入坑，参：https://xoyozo.net/Blog/Details/header-www-authenticate
  

• 返回内容是根据业务逻辑在服务端决定的，客户端在处理每个接口返回值时对返回内容作相应的处理即可。

【推荐】临时口令和会话口令合二为一的流程（适合随时授权）

前提：

小程序已绑定到微信开放平台。

分两种场景：

场景一：仅需要获取 unionid，且不需要获取头像昵称等用户信息，且已经有很大部分用户仅通过 code2Session 就能获取到 unionid（如：已关注了绑定同一微信开放平台的其它公众号，参 UnionID 机制说明）；

场景二：仅需要获取 unionid，或需要获取 unionid 及头像昵称等用户信息，或很大部分用户不能通过 code2Session 获取到 unionid。

场景一步骤：

1. 小程序调用 wx.login()，将 code 发送到开发者服务器

2. 开发者服务器请求微信接口 code2Session，获得 session_key、openid，有机会获得 unionid

3. 若没有返回 unionid，尝试用 openid 从数据库中获取 unionid

4. 如果数据库中没有找到对应的 unionid，告知小程序端使用 button + getUserInfo 的方式请求用户授权

5. 授权允许（判断 detail.errMsg 是否为 getUserInfo:ok）则将加密数据传回开发者服务器进行解密，得到 unionid、头像、昵称等信息，保存到数据库

6. 若授权拒绝，则无动作，用户再次点击 button 会重新弹起授权框

* 该流程仅部分用户的首次使用才要求授权。其它注意事项和流程细节见下方流程图。

场景二步骤：

1. 小程序调用 wx.login()，将 code 发送到开发者服务器

2. 开发者服务器请求微信接口 code2Session，获得 session_key、openid

3. 尝试用 openid 从数据库中获取 unionid 和/或 用户信息

4. 如果数据库中没有找到对应的 unionid 和/或 用户信息，告知小程序端使用 button + getUserInfo 的方式请求用户授权

5. 授权允许（判断 detail.errMsg 是否为 getUserInfo:ok）则将加密数据传回开发者服务器进行解密，得到 unionid、头像、昵称等信息，保存到数据库

6. 若授权拒绝，则无动作，用户再次点击 button 会重新弹起授权框

* 该流程仅每个用户的首次使用才要求授权。其它注意事项和流程细节见下方流程图。

上述两种场景的设计流程，只要数据库中已保存用户的 unionid（和/或 用户信息），都不再需要用户再次授权（即使在“设置”中关闭了“用户信息”授权，点击小程序右上角三点按钮，选择关于小程序，点击右上角的三点，选择设置）。

场景一流程图：

场景二流程图：

流程图中的“临时口令”仅用于关联“通过 code2Session 获得的 session_key”，并在用户授权后带回换取 session_key。原因是 session_key 是机密数据，不允许被传到小程序端。临时口令用完即删（设置表 dt__weapp_code2session 中相应记录的该字段为空）。

【推荐】临时口令和会话口令合二为一的流程（适合随时授权）

确定唯一凭证：

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

登录唤起条件：

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

场景实现：

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

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

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

流程图：

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

各平台登录设计：

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

本文不定时更新中……

收集了一些在开发过程中遇到的一些问题的解决方法，适合新手。

异常：

出现脚本错误或者未正确调用 Page()

原因：不小心删了第一行内容：<template>

异常：

模块编译失败：TypeError: Cannot read property 'for' of undefined

at fixDefaultIterator (D:\HBuilderX\plugins\uniapp\lib\mpvue-template-compiler\build.js:4277:24)

at mark (D:\HBuilderX\plugins\uniapp\lib\mpvue-template-compiler\build.js:4306:5)

at markComponent (D:\HBuilderX\plugins\uniapp\lib\mpvue-template-compiler\build.js:4371:5)

at baseCompile (D:\HBuilderX\plugins\uniapp\lib\mpvue-template-compiler\build.js:4384:15)

at compile (D:\HBuilderX\plugins\uniapp\lib\mpvue-template-compiler\build.js:4089:28)

at Object.module.exports (D:\HBuilderX\plugins\uniapp\lib\mpvue-loader\lib\template-compiler\index.js:43:18)

原因：新建的页面（简单模板）只有以下 3 个标签，须在 <template /> 中添加一些代码，如 <view />

<template>
</template>

<script>
</script>

<style>
</style>

异常：

模块编译失败：TypeError: Cannot read property 'toString' of undefined

at Object.preprocess (D:\HBuilderX\plugins\uniapp\lib\preprocess\lib\preprocess.js:56:15)

at Object.module.exports (D:\HBuilderX\plugins\uniapp\lib\preprocessor-loader.js:9:25)

原因：没有原因，纯抽风，HX 关掉再开就好了。

异常：

Cannot set property 'xxx' of undefined;at pages/... onLoad function;at api request success callback function

原因：属性未定义，例如 

data() {
	return {
		item: { }
	}
}

而直接赋值 this.item.abc.xxx = '123';

解决：

data() {
	return {
		item: {
			abc: ''
		}
	}
}

问：page 页面怎样修改 tabBar？

答：官方文档未给出答案，百度了一圈也无果（2018-10-23），但有人说小程序的 setTabBarBadge() 方法设置角标是可以用的。

坑：

VM1694:1 获取 wx.getUserInfo 接口后续将不再出现授权弹窗，请注意升级

参考文档: https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01

填坑：放弃使用 uni.getUserInfo 接口来获取用户信息，uni.login 可返回用于换取 openid / unionid 的 code，参：uni.login、 code2Session

坑：字符搜索（当前目录）（Ctrl+Alt+F）搜不出所有结果

填坑：顾名思义他只搜索当前目录，即当前打开文件所在目录，而非我误认为的整个项目根目录。在“项目管理器”中选中要搜索字符的目录即可。

坑：uni.navigateTo() 或 uni.redirectTo() 没反应

填坑：这两个方法不允许跳转到 tabbar 页面，用 uni.switchTab() 代替。

坑：使用“Ctrl+/”快捷键弹出“QQ五笔小字典”窗口

解决：打开QQ五笔“属性设置”，切换到“快捷键设置”选项卡，把“五笔小字典”前的勾取消（即使该组合键是设置为Ctrl+?）。

坑：<rich-text /> 中的 <img /> 太大，超出屏幕宽度

填坑：用正则表达式给 <img /> 加上最大宽度

data.data.Content = data.data.Content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');

坑：无法重命名或删除目录或文件

填坑一：“以管理员身份运行”HBuilder X 后再试。

填坑二：关闭微信开发者工具、各种手机和模拟器后再试。

填坑三：打开“任务管理器”，结束所有“node.exe”进程后再试。

坑：

 thirdScriptError 
 sdk uncaught third Error 
 (intermediate value).$mount is not a function 
 TypeError: (intermediate value).$mount is not a function
Page[pages/xxxx/xxxx] not found. May be caused by: 1. Forgot to add page route in app.json. 2. Invoking Page() in async task.
Page is not constructed because it is not found.

填坑：关闭微信开发者工具、各种手机和模拟器后，删除“unpackage”目录。

坑：

Unexpected end of JSON input;at "pages/news/view" page lifeCycleMethod onLoad function
SyntaxError: Unexpected end of JSON input

填坑：给 uni.navigateTo() 的 url 传参时，如果简单地将对象序列化 JSON.stringify(item)，那么如果内容中包含“=”等 url 特殊字符，就会发生在接收页面 onLoad() 中无法获取到完整的 json 对象，发生异常。

uni.navigateTo({
	url: "../news/view?item=" + JSON.stringify(item)
})

所以应该把参数值编码：

uni.navigateTo({
	url: "../news/view?item=" + escape(JSON.stringify(item))
})

如果是一般的 web 服务器来接收，那么会自动对参数进行解码，但 uni-app 不会，如果直接使用：

onLoad(e) {
	this.item = JSON.parse(e.item);
}

会发生异常：

Unexpected token % in JSON at position 0;at "pages/news/view" page lifeCycleMethod onLoad function
SyntaxError: Unexpected token % in JSON at position 0

需要解码一次：

onLoad(e) {
	this.item = JSON.parse(unescape(e.item));
}

需要注意的是，unescape(undefined) 会变成 'undefined'，如果要判断是否 undefined，应是 unescape 之前。

坑：图片变形

填坑：mode="widthFix"

坑：页面如何向 tabBar 传参

填坑：全局或缓存

坑：编译为 H5 后，出现：Access-Control-Allow-Origin

填坑：参阅

坑：编译为 H5 后，GET 请求的 URL 中出现“?&”

填坑 ：客户端只求 DCloud 官方能够尽快修复这个 bug，IIS 端可以暂时用 URL 重写来防止报 400 错误，参此文。

坑：[system] errorHandler TypeError: Cannot read property 'forEach' of undefined

填坑：待填

• 因为只有“认证的服务号”才有“网页授权获取用户基本信息”接口功能，所以首先你得拥有已认证的服务号，和一个已认证的订阅号（就是本例中用来被加粉的）。订阅号必须认证才有“获取用户基本信息”接口功能
• 注册微信·开放平台，绑定这两个公众号
• 实现过程：用订阅号的权限获取所有用户信息（绑定到开放平台后用户接口返回的数据已包含 UnionID），并且当用户关注或取消关注时更新用户信息；打开网页时，用服务号的权限获取当前用户的 UnionID；由于这两个公众号绑定在同一个开放平台，所以这两个 UnionID 对同一用户是一样的，这样就可以实现在网页上判断用户是否已关注订阅号

注册

• 微信公众号功能对比

开发文档

• 

• 

•  

• 资源中心

• 

开发教程

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

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

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

• 微信&middot;开放平台开发笔记

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

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

• 开发微信小程序

设计

• WeUI：GitHub / Wiki / Demo

运营

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