昨晚一位给我微信留言碰到类似的问题，我感觉可以用这个方法。 直接入主题： 说的是利用小程序后台的开发->运维中心里面的监控报警功能实现当小程序脚本发生错误时自动发送报警信息到你的微信上的功能 在社区经常看到各位抱怨体验版正常，开发者工具正常，线上版本却没有数据之类的话题，其实这里可能的原因之一就是小程序内部脚本出错了。如果你的小程序编码没有做容错处理（这个要详细说可以说一整天），那就会导致出错后的代码无法正常运行，这样反映在界面上就可能是白屏，没有数据，或者数据不全导致界面错位等等一系列想象不到的问题。 使用本方法生效后小程序运行出错报警到微信的效果截图： [图片] 所以，监控小程序运行过程中运行出错很利于小程序的运维工作。官方早就为我们想好了，提供了一个用来监控错误并报警的平台。只是很多人没有好好利用起来。小编从去年开始接触小程序用了将近1年时间了，老实说为我解决了不少问题。使用教程，如图登陆小程序后台后按1，2，3，4，5，6步就好了： [图片] [图片] 这里有个小技巧，人工制造错误代码来监控后端接口异常报警： 比如有个场景要求后端接口出错时能快速通知到微信上，那就可以在小程序里调用该接口的地方，接口返回数据异常时，故意调用一个不存在的JS函数，比如，下单失败接口出错了，在接口返回fail的情况下写上 throw_NewOrderError();实际上throw_NewOrderError并不存在的，这个时候会让小程序故意产生脚本错误并通知到你的微信。 还有一个业务和性能监控报警也是很有用的，比如监控后端接口性能，数据渲染时间，这个对整个小程序产品的品控很有用，比如要求高频后端接口必须在300ms以下的性能要求，当达不到这个性能的时候就会发送报警。 [图片] 这个大家也可以深挖下功能，除了报警还能提供详细的统计数据。当你的小程序产品日活超过5万时你会发现这个对你整个产品链的性能提升和业务监控是很有用的。这里点到为止。 社区的markDown编辑模式下图片无法上传，所以没用markDown来编辑，各位将就看吧。 PS：鉴于写的文章虽然看的人多但是无法入一些大佬的法眼，认为都是「水文，刷赞」等等一些恶毒字眼（最近多了个职业回复的「雅称」），各种帽子戴得，做一个开发爱好者积极分享和解决各种问题太难了，姑且不论咱写一篇文章需要截图多少，单单排版就得废掉俺多少时间哈，很受伤，所以本人决定在微信开放者社区封笔。你看到是俺最后一篇发表在微信开放社区的文章。如果你想继续查看俺的一些文章可以私聊我。我会在其他平台保持继续创作。bye-bye~

开发过小程序的朋友们应该都遇到这样的情况，可能很多个页面有相同的函数，例如[代码]onShareAppMessage[代码]，有什么最佳实践吗，应该如何处理呢？ 本次开发技巧，我从以下几种解决办法剖析： 将它复制粘贴到每个地方（最烂的做法） 抽象成一个公共函数，每个[代码]Page[代码]都手动引用 提取一个behavior，每个页面手动注入 通过[代码]Page[代码]封装一个新的[代码]newPage[代码]，以后每个页面都通过[代码]newPage[代码]注册 劫持Page函数，注入预设方法，页面仍可使用[代码]Page[代码]注册 复制粘贴大法 这是最直观，也是初学者最常用到的办法。也是作为工程师最不应该采取的办法。这有一个致命的问题，如果某一天，需要改动这个函数，岂不是要将所有的地方都翻出来改，所以这个办法直接否决。 抽象公共函数 这种方式，解决了复制粘贴大法的致命问题，不需要改动很多地方，只需要改动这个抽象出来的函数即可。但是其实，这个方式不便捷，每次新增页面都需要手动引入这个函数。 以下都通过[代码]onShareAppMessage[代码]方法举例。 假设在[代码]app.js[代码]通过[代码]global[代码]注册了[代码]onShareAppMessage[代码]方法： [代码]// app.js global.onShareAppMessage = function() { return { title: '我在这里发现了很多好看的壁纸', path: 'pages/index/index', imageUrl: '' } } [代码] 那么此时每次新增的Page都需要这样引入： [代码]// page.js Page({ ...global.onShareAppMessage, data: {} }) [代码] 这样的缺点也是非常明显的： 创建新页面时，容易遗忘 如果多个相同的函数，则需要每个独立引入，不方便 提取Behavior 将多个函数集成到一个对象中，每个页面只需要引入这个对象即可注入多个相同的函数。这种方式可以解决 抽象公共函数 提到的 缺点2。 大致的实现方式如下： 同样在[代码]app.js[代码]通过[代码]global[代码]注册一个[代码]behavior[代码]对象： [代码]// app.js global.commonPage = { onShareAppMessage: function() { return { title: '我在这里发现了很多好看的壁纸', path: 'pages/index/index', imageUrl: '' } }, onHide: function() { // do something } } [代码] 在新增的页面注入： [代码]// page.js Page({ data: {}, ...global.commonPage, }}) [代码] 缺点仍然是，新增页面时容易遗忘 封装新Page 封装新的[代码]Page[代码]，然后每个页面都通过这个新的[代码]Page[代码]注册，而不是采用原有的[代码]Page[代码]。 同理，在[代码]app.js[代码]先封装一个新的[代码]Page[代码]到全局变量[代码]global[代码]： [代码]// app.js global.newPage = function(obj) { let defaultSet = { onShareAppMessage: function() { return { title: '我在这里发现了很多好看的壁纸', path: 'pages/index/index', imageUrl: '' } }, onShow() { // do something } } return Page({...defaultSet, ...obj}) } [代码] 往后在每个页面都使用新的[代码]newPage[代码]注册： [代码]// page.js global.newPage({ data: {} }) [代码] 好处即是全新封装了[代码]Page[代码]，后续只需关注是否使用了新的[代码]Page[代码]即可；此外大家也很清晰知道这个是采用了新的封装，避免了覆盖原有的[代码]Page[代码]方法。 我倒是觉得没什么明显缺点，要是非要鸡蛋里挑骨头的话，就是要显式调用新的函数注册页面。 劫持Page 劫持函数其实是挺危险的做法，因为开发人员可能会在定位问题时，忽略了这个被劫持的地方。 劫持[代码]Page[代码]的做法，简单的说就是，覆盖[代码]Page[代码]这个函数，重新实现[代码]Page[代码]，但这个新的[代码]Page[代码]内部仍会调用原有的[代码]Page[代码]。说起来可能有点拗口，通过代码看就一目了然： [代码]// app.js let originalPage = Page Page = function(obj) { let defaultSet = { onShareAppMessage: function() { return { title: '我在这里发现了很多好看的壁纸', path: 'pages/index/index', imageUrl: '' } }, onShow() { // do something } } return originalPage({ ...defaultSet, ...obj}) } [代码] 通过这种方式，不改变页面的注册方式，但可能会让不了解底层封装的开发者感到困惑：明明没注册的方法，怎么就自动注入了呢？ 这种方式的缺点已经说了，优点也很明显，不改变任何原有的页面注册方式。 其实这个是一个挺好的思路，在一些特定的场景下，会有事半功倍的效果。

习惯于 VUE 或其他一些框架的同学们可能会经常使用它们的 [代码]computed[代码] 和 [代码]watch[代码] 。 小程序框架本身并没有提供这个功能，但我们基于现有的特性，做了一个 npm 模块来提供 [代码]computed[代码] 和 [代码]watch[代码] 功能。 先来个 GitHub 链接：https://github.com/wechat-miniprogram/computed 如何使用？ 安装 npm 模块 [代码]npm install --save miniprogram-computed [代码] 示例代码 [代码]const computedBehavior = require('miniprogram-computed') Component({ behaviors: [computedBehavior], data: { a: 1, b: 1, }, computed: { sum(data) { return data.a + data.b }, }, }) [代码] [代码]const computedBehavior = require('miniprogram-computed') Component({ behaviors: [computedBehavior], data: { a: 1, b: 1, sum: 2, }, watch: { 'a, b': function(a, b) { this.setData({ sum: a + b }) }, }, }) [代码] 怎么在页面中使用？ 其实上面的示例不仅在自定义组件中可以使用，在页面中也是可以的——因为小程序的页面也可用 [代码]Component[代码] 构造器来创建！ 如果你已经有一个这样的页面： [代码]Page({ data: { a: 1, b: 1, }, onLoad: function() { /* ... */ }, myMethod1: function() { /* ... */ }, myMethod2: function() { /* ... */ }, }) [代码] 可以先把它改成： [代码]Component({ data: { a: 1, b: 1, }, methods: { onLoad: function() { /* ... */ }, myMethod1: function() { /* ... */ }, myMethod2: function() { /* ... */ }, }, }) [代码] 然后就可以用了： [代码]const computedBehavior = require('miniprogram-computed') Component({ behaviors: [computedBehavior], data: { a: 1, b: 1, }, computed: { sum(data) { return data.a + data.b }, }, methods: { onLoad: function() { /* ... */ }, myMethod1: function() { /* ... */ }, myMethod2: function() { /* ... */ }, }, }) [代码] 应该使用 [代码]computed[代码] 还是 [代码]watch[代码] ？ 看起来 [代码]computed[代码] 和 [代码]watch[代码] 具有类似的功能，应该使用哪个呢？ 一个简单的原则： [代码]computed[代码] 只有 [代码]data[代码] 可以访问，不能访问组件的 [代码]methods[代码] （但可以访问组件外的通用函数）。如果满足这个需要，使用 [代码]computed[代码] ，否则使用 [代码]watch[代码] 。 想知道原理？ [代码]computed[代码] 和 [代码]watch[代码] 主要基于两个自定义组件特性： 数据监听器 和 自定义组件扩展 。其中，数据监听器 [代码]observers[代码] 可以用来监听数据被 [代码]setData[代码] 操作。 对于 [代码]computed[代码] ，每次执行 [代码]computed[代码] 函数时，记录下有哪些 data 中的字段被依赖。如果下一次 [代码]setData[代码] 后这些字段被改变了，就重新执行这个 [代码]computed[代码] 函数。 对于 [代码]watch[代码] ，它和 [代码]observers[代码] 的区别不大。区别在于，如果一个 data 中的字段被设置但未被改变，普通的 [代码]observers[代码] 会触发，但 [代码]watch[代码] 不会。 如果遇到问题或者有好的建议，可以在 GitHub 提 issue 。

[图片] 一、背景与简介 在传统的 PC Web 前端开发中，浏览器为开发者提供了体验良好、功能丰富且强大的开发调试工具，比如常见的 Chrome devtools 等，这些调试工具极大的方便了开发者，它们普遍提供查看页面结构、监听网络请求、管理本地数据存储、debugger 代码、使用 Console 快速显示数据等功能。 但是在近几年兴起的微信小程序的前端开发中，却少有类似的体验和功能对标的开发调试工具出现。当然微信小程序的官方也提供了类似的工具，那就是 vConsole，但是相比 PC 端提供的工具来说确实无论是功能和体验都有所欠缺，所以我们开发了 weconsole 来提供更加全面的功能和更好的体验。 基于上述背景，我们想开发一款运行在微信小程序环境上，无论在用户体验还是功能等方面都能媲美 PC 端的前端开发调试工具，当然某些（如 debugger 代码等）受限于技术在当前时期无法实现的功能我们暂且忽略。 我们将这款工具命名为[代码]Weimob Console[代码]，简写为[代码]WeConsole[代码]。 项目主页：https://github.com/weimobGroup/WeConsole 二、安装与使用 1、通过 npm 安装 [代码]npm i weconsole -S [代码] 2、普通方式安装 可将 npm 包下载到本地，然后将其中的[代码]dist/full[代码]文件夹拷贝至项目目录中； 3、引用 WeConsole 分为[代码]核心[代码]和[代码]组件[代码]两部分，使用时需要全部引用后方可使用，[代码]核心[代码]负责重写系统变量或方法，以达到全局监控的目的；[代码]组件[代码]负责将监控的数据显示出来。 在[代码]app.js[代码]文件中引用[代码]核心[代码]： [代码]// NPM方式引用 import 'weconsole/init'; // 普通方式引用 import 'xxx/weconsole/init'; [代码] 引入[代码]weconsole/init[代码]后，就是默认将 App、Page、Component、Api、Console 全部重写监控！如果想按需重写，可以使用如下方式进行： [代码]import { replace, restore, showWeConsole, hideWeConsole } from 'weconsole'; // scope可选值：App/Page/Component/Console/Api // 按需替换系统变量或函数以达到监控 replace(scope); // 可还原 restore(scope); // 通过show/hide方法控制显示入口图标 showWeConsole(); [代码] 如果没有显式调用过[代码]showWeConsole/hideWeConsole[代码]方法，组件第一次初始化时，会根据小程序是否[代码]开启调试模式[代码]来决定入口图标的显示性。 在需要的地方引用[代码]组件[代码]，需要先将组件注册进[代码]app/page/component.json[代码]中： [代码]// NPM方式引用 "usingComponents": { "weconsole": "weconsole/components/main/index" } // 普通方式引用 "usingComponents": { "weconsole": "xxx/weconsole/components/main/index" } [代码] 然后在[代码]wxml[代码]中使用[代码]<weconsole>[代码]标签进行初始化： [代码]<!-- page/component.wxml --> <weconsole /> [代码] [代码]<weconsole>[代码]标签支持传入以下属性： [代码]properties: { // 组件全屏化后，距离窗口顶部距离 fullTop: String, // 刘海屏机型（如iphone12等）下组件全屏化后，距离窗口顶部距离 adapFullTop: String, } [代码] 4、建议 如果不想将 weconsole 放置在主包中，建议将组件放在分包内使用，利用小程序的 分包异步化 的特性，减少主包大小 三、功能 1、Console 界面如图 1 实时显示[代码]console.log/info/warn/error[代码]记录； [代码]Filter[代码]框输入关键字已进行记录筛选； 使用分类标签[代码]All, Mark, Log, Errors, Warnings...[代码]等进行记录分类显示，分类列表中[代码]All, Mark, Log, Errors, Warnings[代码]为固定项，其他可由配置项[代码]consoleCategoryGetter[代码]产生 点击[代码]🚫[代码]按钮清空记录（不会清除[代码]留存[代码]的记录） [代码]长按[代码]记录可弹出操作项（如图 2）： [代码]复制[代码]：将记录数据执行复制操作，具体形式可使用配置项[代码]copyPolicy[代码]指定，未指定时，将使用[代码]JSON.stringify[代码]序列化数据，将其复制到剪切板 [代码]取消置顶/置顶显示[代码]：将记录取消置顶/置顶显示，最多可置顶三条（置顶无非是想快速找到重要的数据，当重要的数据过多时，就不宜用置顶了，可以使用[代码]标记[代码]功能，然后在使用筛选栏中的[代码]Mark[代码]分类进行筛选显示） [代码]取消留存/留存[代码]：留存是指将记录保留下来，使其不受清除，即点击[代码]🚫[代码]按钮不被清除 [代码]取消全部留存[代码]：取消所有留存的记录 [代码]取消标记/标记[代码]：标记就是将数据添加一个[代码]Mark[代码]的分类，可以通过筛选栏快速分类显示 [代码]取消全部标记[代码]：取消所有标记的记录 [图片] 图 1 [图片] 图 2 2、Api 界面如图 3 实时显示[代码]wx[代码]对象下的相关 api 执行记录 [代码]Filter[代码]框输入关键字已进行记录筛选 使用分类标签[代码]All, Mark, Cloud, xhr...[代码]等进行记录分类显示，分类列表由配置项[代码]apiCategoryList[代码]与[代码]apiCategoryGetter[代码]产生 点击[代码]🚫[代码]按钮清空记录（不会清除[代码]留存[代码]的记录） [代码]长按[代码]记录可弹出操作项（如图 4）： [代码]复制[代码]：将记录数据执行复制操作，具体形式可使用配置项[代码]copyPolicy[代码]置顶，未指定时，将使用系统默认方式序列化数据（具体看实际效果），将其复制到剪切板 其他操作项含义与[代码]Console[代码]功能类似 点击条目可展示详情，如图 5 [图片] 图 3 [图片] 图 4 [图片] 图 5 3、Component 界面如图 6 树结构显示组件实例列表 根是[代码]App[代码] 二级固定为[代码]getCurrentPages[代码]返回的页面实例 三级及更深通过[代码]this.selectOwnerComponent()[代码]进行父实例定位，进而确定层级 点击节点名称（带有下划虚线），可显示组件实例详情，以 JSON 树的方式查看组件的所有数据，如图 7 [图片] 图 6 [图片] 图 7 4、Storage 界面如图 8 显示 Storage 记录 [代码]Filter[代码]框输入关键字已进行记录筛选 点击[代码]🚫[代码]按钮清空记录（不会清除[代码]留存[代码]的记录） [代码]长按[代码]操作项含义与[代码]Console[代码]功能类似 点击条目后，再点击[代码]❌[代码]按钮可将其删除 点击[代码]Filter[代码]框左侧的[代码]刷新[代码]按钮可刷新全部数据 点击条目显示详情，如图 9 [图片] 图 8 [图片] 图 9 5、其他 界面如图 10 默认显示 系统信息 可通过[代码]customActions[代码]配置项进行界面功能快速定制，也可通过[代码]addCustomAction/removeCustomAction[代码]添加/删除定制项目 几个简单的定制案例如下，效果如图 11： [代码]import { setUIRunConfig } from 'xxx/weconsole/index.js'; setUIRunConfig({ customActions: [ { id: 'test1', title: '显示文本', autoCase: 'show', cases: [ { id: 'show', button: '查看', showMode: WcCustomActionShowMode.text, handler(): string { return '测试文本'; } }, { id: 'show2', button: '查看2', showMode: WcCustomActionShowMode.text, handler(): string { return '测试文本2'; } } ] }, { id: 'test2', title: '显示JSON', autoCase: 'show', cases: [ { id: 'show', button: '查看', showMode: WcCustomActionShowMode.json, handler() { return wx; } } ] }, { id: 'test3', title: '显示表格', autoCase: 'show', cases: [ { id: 'show', button: '查看', showMode: WcCustomActionShowMode.grid, handler(): WcCustomActionGrid { return { cols: [ { title: 'Id', field: 'id', width: 30 }, { title: 'Name', field: 'name', width: 70 } ], data: [ { id: 1, name: 'Tom' }, { id: 2, name: 'Alice' } ] }; } } ] } ] }); [代码] [图片] 图 10 [图片] 图 10 四、API 通过以下方式使用 API [代码]import { showWeConsole, ... } from 'weconsole'; showWeConsole(); [代码] replace(scope:‘App’|‘Page’|‘Component’|‘Api’|‘Console’) 替换系统变量或函数以达到监控，底层控制全局仅替换一次 restore(scope:‘App’|‘Page’|‘Component’|‘Api’|‘Console’) 还原被替换的系统变量或函数，还原后界面将不在显示相关数据 showWeConsole() 显示[代码]WeConsole[代码]入口图标 hideWeConsole() 隐藏[代码]WeConsole[代码]入口图标 setUIConfig(config: Partial<MpUIConfig>) 设置[代码]WeConsole[代码]组件内的相关配置，可接受的配置项及含义如下： [代码]interface MpUIConfig { /**监控小程序API数据后，使用该选项进行该数据的分类值计算，计算后的结果显示在界面上 */ apiCategoryGetter?: MpProductCategoryMap | MpProductCategoryGetter; /**监控Console数据后，使用该选项进行该数据的分类值计算，计算后的结果显示在界面上 */ consoleCategoryGetter?: MpProductCategoryMap | MpProductCategoryGetter; /**API选项卡下显示的数据分类列表，all、mark、other 分类固定存在 */ apiCategoryList?: Array<string | MpNameValue<string>>; /**复制策略，传入复制数据，可通过数据的type字段判断数据哪种类型，比如api/console */ copyPolicy?: MpProductCopyPolicy; /**定制化列表 */ customActions?: WcCustomAction[]; } /**取数据的category字段值对应的prop */ interface MpProductCategoryMap { [prop: string]: string | MpProductCategoryGetter; } interface MpProductCategoryGetter { (product: Partial<MpProduct>): string | string[]; } interface MpProductCopyPolicy { (product: Partial<MpProduct>); } /**定制化 */ interface WcCustomAction { /**标识，需要保持唯一 */ id: string; /**标题 */ title: string; /**默认执行哪个case？ */ autoCase?: string; /**该定制化有哪些情况 */ cases: WcCustomActionCase[]; } const enum WcCustomActionShowMode { /**显示JSON树 */ json = 'json', /**显示数据表格 */ grid = 'grid', /** 固定显示<weconsole-customer>组件，该组件需要在app.json中注册，同时需要支持传入data属性，属性值就是case handler执行后的结果 */ component = 'component', /**显示一段文本 */ text = 'text', /**什么都不做 */ none = 'none' } interface WcCustomActionCase { id: string; /**按钮文案 */ button?: string; /**执行逻辑 */ handler: Function; /**显示方式 */ showMode?: WcCustomActionShowMode; } interface WcCustomActionGrid { cols: DataGridCol[]; data: any; } [代码] addCustomAction(action: WcCustomAction) 添加一个定制化项目；当你添加的项目中需要显示你自己的组件时： 请将 case 的[代码]showMode[代码]值设置为[代码]component[代码] 在[代码]app.json[代码]中注册名称为[代码]weconsole-customer[代码]的组件 定制化项目的 case 被执行时，会将执行结果传递给[代码]weconsole-customer[代码]的[代码]data[代码]属性 开发者根据[代码]data[代码]属性中的数据自行判断内部显示逻辑 removeCustomAction(actionId: string) 根据 ID 删除一个定制化项目 getWcControlMpViewInstances():any[] 获取小程序内 weconsole 已经监控到的所有的 App/Page/Component 实例 log(type = “log”, …args) 因为 console 被重写，当你想使用最原始的 console 方法时，可以通过该方式，type 就是 console 的方法名 on/once/off/emit 提供一个事件总线功能，全局事件及相关函数定义如下： [代码]const enum WeConsoleEvents { /**UIConfig对象发生变化时 */ WcUIConfigChange = 'WcUIConfigChange', /**入口图标显示性发生变化时 */ WcVisableChange = 'WcVisableChange', /**CanvasContext准备好时，CanvasContext用于JSON树组件的界面文字宽度计算 */ WcCanvasContextReady = 'WcCanvasContextReady', /**CanvasContext销毁时 */ WcCanvasContextDestory = 'WcCanvasContextDestory', /**主组件的宽高发生变化时 */ WcMainComponentSizeChange = 'WcMainComponentSizeChange' } interface IEventEmitter<T = any> { on(type: string, handler: EventHandler<T>); once(type: string, handler: EventHandler<T>); off(type: string, handler?: EventHandler<T>); emit(type: string, data?: T); } [代码] 五、后续规划 优化包大小 单元测试 体验优化 定制化升级 基于网络通信的界面化 weconsole 标准化 支持 H5 支持其他小程序平台（支付宝/百度/字节跳动） 六、License WeConsole 使用 MIT 协议. 七、声明 生产环境请谨慎使用。

一个简单集成到项目中的底部导航栏，目前支持的特性有 适配iPhone X 无需额外配置，甚至不用传参，自动读取app.json中tabBar的配置 使用wx.showTabBarRedDot方法可以设置红点 可以自定义样式，摆脱微信限制（如borderStyle仅支持black/white的限制） 可以定制个性化逻辑

[图片] 需求场景 因为微信只能使用人民币结算，在海外使用就无法使用线上支付，所以这里只给用户生成的订单展示，在每个订单上会将所使用的优惠券以QRCode的方式展现给线下到场的服务人员 开发遇到的问题 在使用canvas生成二维码过程中，第一次点击二维码很顺利渲染，但是第二次就不会显示 [图片] 问题定位及解决 经过360°问题定位以及扣官方文档的字眼[/手动捂脸] [图片] canvas的渲染对id有唯一性的要求，如果一个id重复渲染就会出现画布隐藏并不再正常工作的问题，在实现过程中，我把优惠券的id和每次点击时间的时间戳拼接起来以保证canvas-id唯一性 [代码]<canvas canvas-id="{{couponqr.id+timestamp}}" class='qr' /> [代码] [代码]onyh:function(e){ var that = this that.setData({ showqrbox: true, timestamp: e.timeStamp, couponqr: e.currentTarget.dataset.qr, }) wxbarcode.qrcode(e.currentTarget.dataset.qr.id + e.timeStamp, 'http://www.mohennet.com/', 230, 230); }, [代码]

一、前言 最近在做小程序的需求中碰到需要可以支持用户自定义信息再生成二维码的需求，之前在PC端对应的功能我们是利用jquery-qrcode.js来实现的，但是在小程序里不支持操作dom，所以这个插件就用不了啦。然后在github上找到了weapp-qrcode这个插件，只要我们注意避免一些坑，利用好它的各种属性，功能还是挺强大的，基本画二维码的各种需求都能照顾到。 二、使用 在 github 上下载工程，主要用到的文件是 /dist/weapp-qrcode.js 文件。 github地址：weapp-qrcode 在 wxml 文件中，创建绘制的 canvas，并定义好 width, height, canvasId [代码]<canvas style="width: 220px; height: 220px;background:pink;" canvas-id="myQrcode"></canvas> [代码] 引入文件，这里直接将文件copy到了util文件夹下，再在需要用到的文件里引用。 [代码]let drawQrcode = require("../../utils/weapp.qrcode.min.js"); [代码] 使用 drawQrcode() 绘制二维码。 注意：在 调用 drawQrcode() 方法之前，一定要确保可以获取到 canvas context 。 [代码]drawQrcode({ width: 200, height: 200, canvasId: 'myQrcode', // ctx: wx.createCanvasContext('myQrcode'), text: 'https://github.com/yingye', // v1.0.0+版本支持在二维码上绘制图片 // ctx: wx.createCanvasContext('myQrcode'), text: 'https://github.com/yingye', // v1.0.0+版本支持在二维码上绘制图片 image: { imageResource: '../../image/icon.png', dx: 70, dy: 70, dWidth: 60, dHeight: 60 } }) [代码] 三、雷坑盘点 上面介绍了 weapp-qrcode 的基本用法，使用上面的方法已经可以成功画出一个二维码图片了， 但是它里面还有许多坑需要注意避免。 在二维码中间绘制logo图片：如果使用的是网络地址的图片, 直接设置 options.image 的值logo会绘制失败，所以需要先使用 wx.getImageInfo 去获取图片信息； 利用 x,y 可以画出有 padding 感觉的二维码图片 (需要给canvas设置背景颜色)； 直接在callback中调用 wx.canvasToTempFilePath 在部分安卓机上转出来的二维码图片异常(不完整), 需要自行设置计时器； 在组件中使用 drawQrcode() 需要传_this。 canvas 绘图的尺寸单位是px, 但是小程序中我们一般使用 rpx 作为尺寸单位, 所以如果 canvas 是使用 rpx 来设置它的大小, 需要注意 rpx 与 px 之间的转换。 下面是一个相对比较复杂一点的绘制二维码的例子： [代码]let that = this; // 直接设置 options.image 的值，在手机上logo会绘制失败 new Promise((resolve, reject) => { // 绘制网络地址的logo时需要先使用 wx.getImageInfo 获取到图片信息 // 注意网络图片需先配置download域名 wx.getImageInfo 才能生效。 wx.getImageInfo({ src: 'https://.../qrcode.jpg', success: (res) => { resolve(res.path); }, fail: (e) => { // 获取logo失败也不应该影响正确生成二维码图片 // 这里可以给出失败提示 resolve(); } }) }).then((path) => { let options = { width: 180, height: 180, x: 10, y: 10, canvasId: 'myQrcode', text: 'https://www.baidu.com', callback: (e) => { // 使用 setTimeout, 避免部分安卓机转出来的二维码图片不完整 setTimeout(() => { wx.canvasToTempFilePath({ canvasId: 'myQrcode', x: 0, y: 0, width: 200, height: 200, success: (e) => { that.setData({ qrcodeImg: e.tempFilePath }); } }) }, 0); } } if(!!path){ options.image = { imageResource: path, dx: 70, dy: 70, dWidth: 60, dHeight: 60 } } drawQrcode(options); }) [代码] API drawQrcode([options]) options{ Type: Object } 参数 说明 示例 width 必须，二维码宽度，与canvas的width保持一致 200 height 必须，二维码高度，与canvas的height保持一致 200 canvasId 非必须，绘制的canvasId ‘myQrcode’ ctx 非必须，绘图上下文，可通过 wx.createCanvasContext(‘canvasId’) 获取，v1.0.0+版本支持 ‘wx.createCanvasContext(‘canvasId’)’ text 必须，二维码内容 ‘https://github.com/yingye’ typeNumber 非必须，二维码的计算模式，默认值-1 8 correctLevel 非必须，二维码纠错级别，默认值为高级，取值：{ L: 1, M: 0, Q: 3, H: 2 }} 1 background 非必须，二维码背景颜色，默认值白色 ‘#ffffff’ foreground 非必须，二维码前景色，默认值黑色 ‘#000000’ _this 非必须，若在组件中使用，需要传入，v0.7.0+版本支持 this callback 非必须，绘制完成后的回调函数，v0.8.0+版本支持。安卓手机兼容性问题，可通过自行设置计时器来解决，更多可以参考 issue #18 function (e) { console.log(‘e’, e) } x 非必须，二维码绘制的 x 轴起始位置，默认值0，v1.0.0+版本支持 100 y 非必须，二维码绘制的 y 轴起始位置，默认值0，v1.0.0+版本支持 100 image 非必须，在 canvas 上绘制图片，层级高于二维码，v1.0.0+版本支持，更多可参考drawImage { imageResource: ‘’, dx: 0, dy: 0, dWidth: 100, dHeight: 100 }

前提说明     小程序app.js的globalData中定义了userInfo属性，并且在首页和我的tab中引用了，当在其它页面更新userInfo后，在首页和我的中引用的userInfo未更新。 解决思路     利用发布-订阅的设计模式，app.js中的userInfo用Object.defineProperty实现数据劫持，当监听到userInfo值改变时，通知每个订阅者。在首页和我的页面调用app.js中的订阅方法，将更新数据的方法追加到userInfo的订阅者列表中。 实现代码 [代码]// app.js onLaunch: async function () { this.initObserve(); }, // 监听globalData中属性变化 initObserve() { const obj = this.globalData; const keys = ['userInfo']; keys.forEach(key => { let value = obj[key]; obj[`${key}SubscriberList`] = []; Object.defineProperty(obj, key, { configurable: true, enumerable: true, set(newValue) { obj[`${key}SubscriberList`].forEach(watch => { watch(newValue); }); value = newValue; }, get() { return value; } }); }); }, // 订阅globalData中某个属性变化 subscribe(key, watch) { watch(this.globalData[key]); this.globalData[`${key}SubscriberList`].push(watch); }, // 首页和我的page页 onLoad() { app.subscribe('userInfo', (userInfo) => { this.setData({ userInfo, }); }); }, [代码]   遇到的问题     小心Object.defineProperty中的set方法死循环导致栈溢出。在set用obj[key] = value时将会导致死循环，因为给属性赋值后，会再次调用set方法。解决的办法是利用闭包的原理，定义临时变量为obj[key]，在set方法中对临时变量赋值。或者在obj中声明一个变量的副本，set中对变量副本赋值，get中返回变量副本。

已经很久没有写技术文章了，脑袋瓜有点生锈，写的不好别见怪，今天就是想带点干货给大家分享一下。文章的内容有一点点难度，不过基本都是计算机组成原理的知识，算是温故而知新吧！ 学过JavaScript的童鞋应该非常清楚，0.1 + 0.2 是不等于0.3的，而是等于0.30000000000000004，至于为什么会这样？好像有点说不清楚，只知道是JavaScript精确度问题，其他不得而知了。没关系，看完慢慢就懂了！ 目录 浮点数十进制转二进制IEEE 754 标准浮点数二进制运算实践扩展十进制转二进制 0.1的二进制：0.000110011......0011......(0011无限循环) 0.2的二进制：0.00110011......0011...... (0011无限循环) 说明：转换过程就不在这边描述了 IEEE 754 标准 IEEE二进制浮点数算术标准（IEEE 754）是20世纪80年代以来最广泛使用的浮点数运算标准，为许多CPU与浮点运算器所采用。这个标准定义了表示浮点数的格式（包括负零-0）与反常值（denormal number）），一些特殊数值（无穷（Inf）与非数值（NaN）），以及这些数值的“浮点数运算符”；它也指明了四种数值舍入规则和五种例外状况（包括例外发生的时机与处理方式）。百度百科浮点数存储格式 [图片] 上图是64位的双精度浮点数，最高位是符号位S（sign），中间的11位是指数E（exponent），剩下的52位为尾数（有效数字）M（mantissa）。 浮点数科学计数法 根据IEEE 754标准，任意一个浮点数的二进制都可以用如下公式进行表示： [图片] S为符号位：表示浮点数的正负（0代表正数，1代表负数）； E为指数位：存储指数，该数都会加上一个常数（偏移量），用来表示次方数； M为尾数位：表示有效位（尾数），超出的部分自动进1舍0； 双精度的浮点数真值（带有正负号的数值是真值）最终可以表示为： [图片] 说明：E是无符号整数，长度是11位，取值范围是为0~2047。因为科学计数法中的指数是可以为负数，所以约定减去一个中间数（偏移量）1023，[0，1022] 表示为负，[1024，2047] 表示为正。 浮点数二进制运算 规格化 大部分二进制浮点数都以规格化格式进行存放，以便将有效数字的精度最大化，提升精确度。 0.1的二进制 0.000110011001100110011001100110011001100110011001100110011...... (0011无限循环) 0.1科学计数法表示 小数点向右移动4位，让其小数点左边只有一个“1”。 1.10011001100110011001100110011001100110011001100110011......(0011无限循环) * 2^-4 根据IEEE754标准，双精度浮点的尾数只能存储52位，红色的“1”是第53位，根据进1舍0的原则进行操作，操作后的值为： 1.1001100110011001100110011001100110011001100110011010* 2^-4 0.1二进制存储格式 指数-4等于1019（E） – 1023（常量），由此可得E等于1019，把1019转为二进制1111111011。 最终表示如下： 0,01111111011;1001100110011001100110011001100110011001100110011010 说明：红色为符号位；绿色为指数位；蓝色为尾数位； 0.2的二进制 0.001100110011001100110011001100110011001100110011001100110011...... (0011无限循环) 0.2科学计数法表示 小数点向右移动3位，让其小数点左边只有一个“1”。 1.10011001100110011001100110011001100110011001100110011......(0011无限循环) * 2^-3 红色的“1”是第53位，根据进1舍0的原则进行操作，操作后的值为： 1.1001100110011001100110011001100110011001100110011010...... (0011无限循环) * 2^-3 0.2二进制存储格式 指数-3等于1020（E） – 1023（常量），由此可得E等于1020，把1020转为二进制1111111100。 最终表示如下： 0,01111111100;1001100110011001100110011001100110011001100110011010 说明：红色为符号位；绿色为指数位；蓝色为尾数位； 对阶 对阶的目的是使两数的小数点位置对齐，方便两数进行运算，换句话说就是两数的阶码要相等。根据小阶向大阶看齐的原则，应使0.1的尾数向右移动1位（可以理解为小数点向左移动1位），阶码加1。 尾数向右移动1位后，阶码和尾数的值变化如下： 阶码：01111111011 + 1 ——> 01111111100 尾数： 11001100110011001100110011001100110011001100110011010 ——> 1100110011001100110011001100110011001100110011001101 蓝色的“1”是右移补的位，红色的0是舍去的位，根据IEEE 754标准双精度浮点的尾数只能存储52位，遵循进1舍0的原则进行操作。 0.1的科学计数法表示： 0.1100110011001100110011001100110011001100110011001101 *2^-3 0.1的二进制存储格式： 0,01111111100;1100110011001100110011001100110011001100110011001101 尾数求和 尾数部分M通常都是规格化表示的，非"0"的尾数其第1位总是"1"，而这一位也称作隐藏位，因为存储的时候该位会被省略。比如存储1.0110时，只存储尾数0110，等到读取的时候才把第1位的1加补上去，这么做相当于多保存了1位有效数字。 0.1的尾数 + 0.2的尾数 =  0.1100110011001100110011001100110011001100110011001101 + 1.1001100110011001100110011001100110011001100110011010 = 10.0110011001100110011001100110011001100110011001100111 由此可得： 0.1 + 0.2 = 10.0110011001100110011001100110011001100110011001100111* 2^-3 结果规格化 根据尾数求和的结果，进行规格化处理，即尾数向右移1位，阶码加1。 1.00110011001100110011001100110011001100110011001100111 * 2^-2 尾数只能存储52位，红色的“1”需要舍去，根据进1舍0的原则进行操作可得： 1.0011001100110011001100110011001100110011001100110100* 2^-2 二进制存储格式： 指数-2等于1021（E） – 1023（常量），由此可得E等于1021，把1021转为二进制01111111101； 0,01111111101;0011001100110011001100110011001100110011001100110100 溢出判断 浮点数的溢出其实是阶码的溢出表现出来的，在算术运算过程中要检查是否产生了溢出。若阶码正常，算术运算正常结束；若阶码溢出，则要进行相应处理。 如上求和结果的阶码为01111111101，没有产生溢出，因此运算结束。 结果转为十进制 二进制存储格式是计算机存储和运算的格式，此时把二进制转为十进制，我们可以看看最终求和的值会是多少？ 规格化的值是转为非规格化 指数的值为2，将规格化的小数点向左移动2位即可。 1.0011001100110011001100110011001100110011001100110100* 2^-2 ——> 0.010011001100110011001100110011001100110011001100110100 非规格化的值转成十进制 0.1 + 0.2 =  0.3000000000000000444089209850062616169452667236328125 此时此刻，你应该明白JavaScript中0.1 + 0.2 = 0.30000000000000004 这个值是怎么来的吧。 实践扩展： 为了方便大家学习与实践，提供如下PHP实践代码，它是将“0.010011001100110011001100110011001100110011001100110100”转成十进制的功能代码，大家可以尝试测试一下。 var_dump(number_format(0+ 1 * pow(2, -2) + 0 + 0 + 1 * pow(2, -5) + 1 * pow(2, -6) + 0 + 0 + 1 * pow(2,-9) + 1 * pow(2, -10) + 0 + 0 + 1 * pow(2, -13) + 1 * pow(2, -14) + 0 + 0 + 1 *pow(2, -17) + 1 * pow(2, -18) + 0 + 0 + 1 * pow(2, -21) + 1 * pow(2, -22) + 0 +0 + 1 * pow(2, -25) + 1 * pow(2, -26) + 0 + 0 + 1 * pow(2, -29) + 1 * pow(2,-30) + 0 + 0 + 1 * pow(2, -33) + 1 * pow(2, -34) + 0 + 0 + 1 * pow(2, -37) + 1* pow(2, -38) + 0 + 0 + 1 * pow(2, -41) + 1 * pow(2, -42) + 0 + 0 + 1 * pow(2,-45) + 1 * pow(2, -46) + 0 + 0 + 1 * pow(2, -49) + 1 * pow(2, -50) + 0 + 1 *pow(2, -52) + 0 + 0, 52)); 好了，干货分享完毕，谢谢大家！[图片]

问题描述在 JavaScript 中整数和浮点数都属于 [代码]Number[代码] 数据类型，所有数字都是以 64 位浮点数形式储存，即便整数也是如此。 所以我们在打印 [代码]1.00[代码] 这样的浮点数的结果是 [代码]1[代码] 而非 [代码]1.00[代码] 。在一些特殊的数值表示中，例如金额，这样看上去有点变扭，但是至少值是正确了。然而要命的是，当浮点数做数学运算的时候，你经常会发现一些问题，举几个例子： JavaScript 代码: // 加法 ===================== // 0.1 + 0.2 = 0.30000000000000004 // 0.7 + 0.1 = 0.7999999999999999 // 0.2 + 0.4 = 0.6000000000000001 // 2.22 + 0.1 = 2.3200000000000003 // 减法 ===================== // 1.5 - 1.2 = 0.30000000000000004 // 0.3 - 0.2 = 0.09999999999999998 // 乘法 ===================== // 19.9 * 100 = 1989.9999999999998 // 19.9 * 10 * 10 = 1990 // 1306377.64 * 100 = 130637763.99999999 // 1306377.64 * 10 * 10 = 130637763.99999999 // 0.7 * 180 = 125.99999999999999 // 9.7 * 100 = 969.9999999999999 // 39.7 * 100 = 3970.0000000000005 // 除法 ===================== // 0.3 / 0.1 = 2.9999999999999996 // 0.69 / 10 = 0.06899999999999999 计算过程比如在 JavaScript 中计算 [代码]0.1 + 0.2[代码]时，到底发生了什么呢？ 首先，十进制的[代码]0.1[代码]和[代码]0.2[代码]都会被转换成二进制，但由于浮点数用二进制表达时是无穷的，例如。 JavaScript 代码: 0.1 -> 0.0001100110011001...(无限) 0.2 -> 0.0011001100110011...(无限) IEEE 754 标准的 64 位双精度浮点数的小数部分最多支持 53 位二进制位，所以两者相加之后得到二进制为： JavaScript 代码: 0.0100110011001100110011001100110011001100110011001100 因浮点数小数位的限制而截断的二进制数字，再转换为十进制，就成了 [代码]0.30000000000000004[代码]。所以在进行算术计算时会产生误差。 整数的精度问题在 Javascript 中，整数精度同样存在问题，先来看看问题： JavaScript 代码: console.log(19571992547450991); //=> 19571992547450990 console.log(19571992547450991===19571992547450992); //=> true 同样的原因，在 JavaScript 中 [代码]Number[代码]类型统一按浮点数处理，整数是按最大54位来算最大([代码]253- 1[代码]，[代码]Number.MAX_SAFE_INTEGER[代码],[代码]9007199254740991[代码]) 和最小([代码]-(253[代码] [代码]- 1)[代码]，[代码]Number.MIN_SAFE_INTEGER[代码],[代码]-9007199254740991[代码]) 安全整数范围的。所以只要超过这个范围，就会存在被舍去的精度问题。 当然这个问题并不只是在 Javascript 中才会出现，几乎所有的编程语言都采用了 IEEE-745 浮点数表示法，任何使用二进制浮点数的编程语言都会有这个问题，只不过在很多其他语言中已经封装好了方法来避免精度的问题，而 JavaScript 是一门弱类型的语言，从设计思想上就没有对浮点数有个严格的数据类型，所以精度误差的问题就显得格外突出。 解决方案上面说了这么多问题和原因，这里给出一些解决方案。 类库通常这种对精度要求高的计算都应该交给后端去计算和存储，因为后端有成熟的库来解决这种计算问题。前端也有几个不错的类库： Math.jsMath.js 是专门为 JavaScript 和 Node.js 提供的一个广泛的数学库。它具有灵活的表达式解析器，支持符号计算，配有大量内置函数和常量，并提供集成解决方案来处理不同的数据类型 像数字，大数字(超出安全数的数字)，复数，分数，单位和矩阵。 功能强大，易于使用。 官网：http://mathjs.org/ GitHub：https://github.com/josdejong/mathjs decimal.js为 JavaScript 提供十进制类型的任意精度数值。 官网：http://mikemcl.github.io/decimal.js/ GitHub：https://github.com/MikeMcl/decimal.js big.js官网：http://mikemcl.github.io/big.js GitHub：https://github.com/MikeMcl/big.js/ 这几个类库帮我们解决很多这类问题，不过通常我们前端做这类运算通常只用于表现层，应用并不是很多。所以很多时候，一个函数能解决的问题不需要引用一个类库来解决。 下面介绍各个更加简单的解决方案。 整数表示对于整数，我们可以通过用[代码]String[代码]类型的表示来取值或传值，否则会丧失精度。 格式化数字、金额、保留几位小数等如果只是格式化数字、金额、保留几位小数等可以查看这里 https://www.html.cn/archives/7324 浮点数运算toFixed() 方法浮点数运算的解决方案有很多，这里给出一种目前常用的解决方案, 在判断浮点数运算结果前对计算结果进行精度缩小，因为在精度缩小的过程总会自动四舍五入。 toFixed() 方法使用定点表示法来格式化一个数，会对结果进行四舍五入。语法为： JavaScript 代码: numObj.toFixed(digits) 参数 [代码]digits[代码] 表示小数点后数字的个数；介于 0 到 20 （包括）之间，实现环境可能支持更大范围。如果忽略该参数，则默认为 0。 返回一个数值的字符串表现形式，不使用指数记数法，而是在小数点后有 [代码]digits[代码] 位数字。该数值在必要时进行四舍五入，另外在必要时会用 0 来填充小数部分，以便小数部分有指定的位数。 如果数值大于 [代码]1e+21[代码]，该方法会简单调用 [代码]Number.prototype.toString()[代码]并返回一个指数记数法格式的字符串。 特别注意：toFixed() 返回一个数值的字符串表现形式。具体可以查看 MDN中的说明，那么我们可以这样解决精度问题： JavaScript 代码: parseFloat((数学表达式).toFixed(digits))； // toFixed() 精度参数须在 0 与20 之间 // 运行 parseFloat((1.0 - 0.9).toFixed(10)) // 结果为 0.1 parseFloat((0.3 / 0.1).toFixed(10)) // 结果为 3 parseFloat((9.7 * 100).toFixed(10)) // 结果为 970 parseFloat((2.22 + 0.1).toFixed(10)) // 结果为 2.32

[代码]var[代码] [代码]meta = e.currentTarget.dataset.meta;[代码] [代码]if[代码] [代码](this.data.meta.length != [代码][代码]0[代码][代码]) {[代码] [代码]this[代码][代码].setData({[代码] [代码][meta]: this.data.meta.concat(res.tempFilePaths)[代码] [代码]})[代码] [代码]}[代码] meta是一个变量,从前端传递过来的字符串 我需要访问 this.data.(前端传递过来的字符串) 但是这个写是同不过的,有其他的写法么?

做了个自定义的图片上传组件，发现了个问题不知如何解决 第一次进入页面的时候，会调用的attached方法，这没问题，当我点击返回，然后从上个页面重新进来的时候，并没有调用到attached方法 说明：页面返回的时候，首先调用到页面的onUnload()的方法调用，然后才调用了组件的detached()方法，导致了我想在detached()方法中删掉已经上传的图片，但是却没有执行。 然后再进入组件的页面，发现图片依然存在，原因就是页面进来的时候并没有重新加载组件（为什么说没有重新加载组件，因为我发现attached()方法根本没调用）

按照官方文档显示 如果未支持getUserProfile 则 可以继续使用getUserinfo， 但是实际开发中 在开发者工具中 手动去修改 调试基础库版本 去判断是否支持getUserProfile的时候，不支持该接口的时候，我调用原来的getUserinfo接口，返回的用户名字和头像都是默认的 微信用户和灰显图片。请问 这事正常的？ [图片]

开发者工具不支持查看组件中的data，页面构成如果组件化程度比较高，调试起来就很无奈啊，没办法实时查看data

先上效果图 [图片] 原理很简单，就是在原文本结尾补个会换行的空标签，模拟成2行文本 wxml [代码] [代码] [代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"foods"[代码][代码]>[代码] [代码]   [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"eat"[代码][代码]>[代码][代码]      [代码][代码]<[代码][代码]view[代码][代码]>早上吃什么<[代码][代码]text[代码][代码]></[代码][代码]text[代码][代码]></[代码][代码]view[代码][代码]>: 洗衣粉[代码][代码]   [代码][代码]</[代码][代码]view[代码][代码]>[代码][代码]   [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"eat"[代码][代码]>[代码][代码]      [代码][代码]<[代码][代码]view[代码][代码]>午餐呢<[代码][代码]text[代码][代码]></[代码][代码]text[代码][代码]></[代码][代码]view[代码][代码]>: 肥皂[代码][代码]   [代码][代码]</[代码][代码]view[代码][代码]>[代码][代码]   [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"eat"[代码][代码]>[代码][代码]      [代码][代码]<[代码][代码]view[代码][代码]>最重要的晚餐<[代码][代码]text[代码][代码]></[代码][代码]text[代码][代码]></[代码][代码]view[代码][代码]>: 沐浴露[代码][代码]   [代码][代码]</[代码][代码]view[代码][代码]>[代码][代码]</[代码][代码]view[代码][代码]>[代码] [代码] [代码] wxss [代码] [代码] [代码].foods {[代码] [代码]   [代码][代码]padding[代码][代码]: [代码][代码]0[代码] [代码]20[代码][代码]rpx;[代码][代码]   [代码][代码]background-color[代码][代码]: [代码][代码]#fff[代码][代码]}[代码][代码].eat {[代码][代码]   [代码][代码]line-height[代码][代码]: [代码][代码]100[代码][代码]rpx[代码][代码]}[代码][代码].eat + .eat {[代码][代码]   [代码][代码]border-top[代码][代码]: [代码][代码]1[代码][代码]rpx [代码][代码]solid[代码] [代码]#f5f5f5[代码][代码]}[代码][代码].eat view {[代码][代码]   [代码][代码]height[代码][代码]: [代码][代码]100[代码][代码]rpx;[代码][代码]   [代码][代码]width[代码][代码]: [代码][代码]240[代码][代码]rpx;[代码][代码]   [代码][代码]display[代码][代码]: inline-[代码][代码]block[代码][代码];[代码][代码]   [代码][代码]text-align[代码][代码]: [代码][代码]justify[代码][代码];[代码][代码]   [代码][代码]vertical-align[代码][代码]: [代码][代码]top[代码][代码]}[代码][代码].eat view text {[代码][代码]   [代码][代码]display[代码][代码]: inline-[代码][代码]block[代码][代码];[代码][代码]   [代码][代码]height[代码][代码]: [代码][代码]0[代码][代码];[代码][代码]   [代码][代码]width[代码][代码]: [代码][代码]100%  /* 换行 */[代码][代码]}[代码] [代码] [代码]

小程序提供了路由功能来实现页面跳转，但是在使用的过程中我们还是发现有些不方便的地方，通过封装，我们可以实现诸如路由管理、简化api等功能。 页面的跳转存在哪些问题呢？ 与接口的调用一样面临url的管理问题； 传递参数的方式不太友好，只能拼装url； 参数类型单一，只支持string。 alias 第一个问题很好解决，我们做一个集中管理，比如新建一个[代码]router/routes.js[代码]文件来实现alias： [代码]// routes.js module.exports = { // 主页 home: '/pages/index/index', // 个人中心 uc: '/pages/user_center/index', }; [代码] 然后使用的时候变成这样： [代码]const routes = require('../../router/routes.js'); Page({ onReady() { wx.navigateTo({ url: routes.uc, }); }, }); [代码] query 第二个问题，我们先来看个例子，假如我们跳转[代码]pages/user_center/index[代码]页面的同时还要传[代码]userId[代码]过去，正常情况下是这么来操作的： [代码]const routes = require('../../router/routes.js'); Page({ onReady() { const userId = '123456'; wx.navigateTo({ url: `${routes.uc}?userId=${userId}`, }); }, }); [代码] 这样确实不好看，我能不能把参数部分单独拿出来，不用拼接到url上呢？ 可以，我们试着实现一个[代码]navigateTo[代码]函数： [代码]const routes = require('../../router/routes.js'); function navigateTo({ url, query }) { const queryStr = Object.keys(query).map(k => `${k}=${query[k]}`).join('&'); wx.navigateTo({ url: `${url}?${queryStr}`, }); } Page({ onReady() { const userId = '123456'; navigateTo({ url: routes.uc, query: { userId, }, }); }, }); [代码] 嗯，这样貌似舒服一点。 参数保真 第三个问题的情况是，当我们传递的参数argument不是[代码]string[代码]，而是[代码]number[代码]或者[代码]boolean[代码]时，也只能在下个页面得到一个[代码]string[代码]值： [代码]// pages/index/index.js Page({ onReady() { navigateTo({ url: routes.uc, query: { isActive: true, }, }); }, }); // pages/user_center/index.js Page({ onLoad(options) { console.log(options.isActive); // => "true" console.log(typeof options.isActive); // => "string" console.log(options.isActive === true); // => false }, }); [代码] 上面这种情况想必很多人都遇到过，而且感到很抓狂，本来就想传递一个boolean，结果不管传什么都会变成string。 有什么办法可以让数据变成字符串之后，还能还原成原来的类型？ 好熟悉，这不就是json吗？我们把要传的数据转成json字符串（[代码]JSON.stringify[代码]），然后在下个页面把它转回json数据（[代码]JSON.parse[代码]）不就好了嘛！ 我们试着修改原来的[代码]navigateTo[代码]： [代码]const routes = require('../../router/routes.js'); function navigateTo({ url, data }) { const dataStr = JSON.stringify(data); wx.navigateTo({ url: `${url}?jsonStr=${dataStr}`, }); } Page({ onReady() { navigateTo({ url: routes.uc, data: { isActive: true, }, }); }, }); [代码] 这样我们在页面中接受json字符串并转换它： [代码]// pages/user_center/index.js Page({ onLoad(options) { const json = JSON.parse(options.jsonStr); console.log(json.isActive); // => true console.log(typeof json.isActive); // => "boolean" console.log(json.isActive === true); // => true }, }); [代码] 这里其实隐藏了一个问题，那就是url的转义，假如json字符串中包含了类似[代码]?[代码]、[代码]&[代码]之类的符号，可能导致我们参数解析出错，所以我们要把json字符串encode一下： [代码]function navigateTo({ url, data }) { const dataStr = encodeURIComponent(JSON.stringify(data)); wx.navigateTo({ url: `${url}?encodedData=${dataStr}`, }); } // pages/user_center/index.js Page({ onLoad(options) { const json = JSON.parse(decodeURIComponent(options.encodedData)); console.log(json.isActive); // => true console.log(typeof json.isActive); // => "boolean" console.log(json.isActive === true); // => true }, }); [代码] 这样使用起来不方便，我们封装一下，新建文件[代码]router/index.js[代码]： [代码]const routes = require('./routes.js'); function navigateTo({ url, data }) { const dataStr = encodeURIComponent(JSON.stringify(data)); wx.navigateTo({ url: `${url}?encodedData=${dataStr}`, }); } function extract(options) { return JSON.parse(decodeURIComponent(options.encodedData)); } module.exports = { routes, navigateTo, extract, }; [代码] 页面中我们这样来使用： [代码]const router = require('../../router/index.js'); // page home Page({ onLoad(options) { router.navigateTo({ url: router.routes.uc, data: { isActive: true, }, }); }, }); // page uc Page({ onLoad(options) { const json = router.extract(options); console.log(json.isActive); // => true console.log(typeof json.isActive); // => "boolean" console.log(json.isActive === true); // => true }, }); [代码] route name 这样貌似还不错，但是[代码]router.navigateTo[代码]不太好记，[代码]router.routes.uc[代码]有点冗长，我们考虑把[代码]navigateTo[代码]换成简单的[代码]push[代码]，至于路由，我们可以使用[代码]name[代码]的方式来替换原来[代码]url[代码]参数： [代码]const routes = require('./routes.js'); function push({ name, data }) { const dataStr = encodeURIComponent(JSON.stringify(data)); const url = routes[name]; wx.navigateTo({ url: `${url}?encodedData=${dataStr}`, }); } function extract(options) { return JSON.parse(decodeURIComponent(options.encodedData)); } module.exports = { push, extract, }; [代码] 在页面中使用： [代码]const router = require('../../router/index.js'); Page({ onLoad(options) { router.push({ name: 'uc', data: { isActive: true, }, }); }, }); [代码] navigateTo or switchTab 页面跳转除了navigateTo之外还有switchTab，我们是不是可以把这个差异抹掉？答案是肯定的，如果我们在配置routes的时候就已经指定是普通页面还是tab页面，那么程序完全可以切换到对应的跳转方式。 我们修改一下[代码]router/routes.js[代码]，假设home是一个tab页面： [代码]module.exports = { // 主页 home: { type: 'tab', path: '/pages/index/index', }, uc: { path: '/pages/a/index', }, }; [代码] 然后修改[代码]router/index.js[代码]中[代码]push[代码]的实现： [代码]function push({ name, data }) { const dataStr = encodeURIComponent(JSON.stringify(data)); const route = routes[name]; if (route.type === 'tab') { wx.switchTab({ url: `${route.path}`, // 注意tab页面是不支持传参的 }); return; } wx.navigateTo({ url: `${route.path}?encodedData=${dataStr}`, }); } [代码] 搞定，这样我们一个[代码]router.push[代码]就能自动切换两种跳转方式了，而且之后一旦页面类型有变动，我们也只需要修改[代码]route[代码]的定义就可以了。 直接寻址 alias用着很不错，但是有一点挺麻烦得就是每新建一个页面都要写一个alias，即使没有别名的需要，我们是不是可以处理一下，如果在alias没命中，那就直接把name转化成url？这也是阔以的。 [代码]function push({ name, data }) { const dataStr = encodeURIComponent(JSON.stringify(data)); const route = routes[name]; const url = route ? route.path : name; if (route.type === 'tab') { wx.switchTab({ url: `${url}`, // 注意tab页面是不支持传参的 }); return; } wx.navigateTo({ url: `${url}?encodedData=${dataStr}`, }); } [代码] 在页面中使用： [代码]Page({ onLoad(options) { router.push({ name: 'pages/user_center/a/index', data: { isActive: true, }, }); }, }); [代码] 注意，为了方便维护，我们规定了每个页面都必须存放在一个特定的文件夹，一个文件夹的当前路径下只能存在一个index页面，比如[代码]pages/index[代码]下面会存放[代码]pages/index/index.js[代码]、[代码]pages/index/index.wxml[代码]、[代码]pages/index/index.wxss[代码]、[代码]pages/index/index.json[代码]，这时候你就不能继续在这个文件夹根路径存放另外一个页面，而必须是新建一个文件夹来存放，比如[代码]pages/index/pageB/index.js[代码]、[代码]pages/index/pageB/index.wxml[代码]、[代码]pages/index/pageB/index.wxss[代码]、[代码]pages/index/pageB/index.json[代码]。 这样是能实现功能，但是这个name怎么看都跟alias风格差太多，我们试着定义一套转化规则，让直接寻址的name与alias风格统一一些，[代码]pages[代码]和[代码]index[代码]其实我们可以省略掉，[代码]/[代码]我们可以用[代码].[代码]来替换，那么原来的name就变成了[代码]user_center.a[代码]： [代码]Page({ onLoad(options) { router.push({ name: 'user_center.a', data: { isActive: true, }, }); }, }); [代码] 我们再来改进[代码]router/index.js[代码]中[代码]push[代码]的实现： [代码]function push({ name, data }) { const dataStr = encodeURIComponent(JSON.stringify(data)); const route = routes[name]; const url = route ? route.path : `pages/${name.replace(/\./g, '/')}/index`; if (route.type === 'tab') { wx.switchTab({ url: `${url}`, // 注意tab页面是不支持传参的 }); return; } wx.navigateTo({ url: `${url}?encodedData=${dataStr}`, }); } [代码] 这样一来，由于支持直接寻址，跳转home和uc还可以写成这样： [代码]router.push({ name: 'index', // => /pages/index/index }); router.push({ name: 'user_center', // => /pages/user_center/index }); [代码] 这样一来，除了一些tab页面以及特定的路由需要写alias之外，我们也不需要新增一个页面就写一条alias这么麻烦了。 其他 除了上面介绍的navigateTo和switchTab外，其实还有[代码]wx.redirectTo[代码]、[代码]wx.navigateBack[代码]以及[代码]wx.reLaunch[代码]等，我们也可以做一层封装，过程雷同，所以我们就不再一个个介绍，这里贴一下最终简化后的api以及原生api的映射关系： [代码]router.push => wx.navigateTo router.replace => wx.redirectTo router.pop => wx.navigateBack router.relaunch => wx.reLaunch [代码] 最终实现已经在发布在github上，感兴趣的朋友可以移步了解：mp-router。

xml结构： <自定义navigationBar></自定义navigationBar> <view class="container" style="height:calc(100vh - {{CustomBar}}px)">  <scroll-view scroll-y="{{true}}" style="height:100%;"> <view style="height: 100%;overflow: scroll;"> ..........   </view>   </scroll-view> </view> 其中： container的高度为页面的高度减去自定义导航栏的高度（CustomBar）将scroll-view和里面的view高度都设为100%最内层的view超出部分以scroll显示如果有显示不全的地方，将scroll-view设置一个padding-bottom即可

小程序内置了[代码]wx.request[代码]，用于向后端发送请求，我们先来看看它的文档： wx.request(OBJECT) 发起网络请求。使用前请先阅读说明。 OBJECT参数说明： 参数名 类型 必填 默认值 说明 最低版本 url String 是 - 开发者服务器接口地址 - data Object/String/ArrayBuffer 否 - 请求的参数 - header Object 否 - 设置请求的 header，header 中不能设置 Referer。 - method String 否 GET （需大写）有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT - dataType String 否 json 如果设为json，会尝试对返回的数据做一次 JSON.parse - responseType String 否 text 设置响应的数据类型。合法值：text、arraybuffer 1.7.0 success Function 否 - 收到开发者服务成功返回的回调函数 - fail Function 否 - 接口调用失败的回调函数 - complete Function 否 - 接口调用结束的回调函数（调用成功、失败都会执行） - success返回参数说明： 参数 类型 说明 最低版本 data Object/String/ArrayBuffer 开发者服务器返回的数据 - statusCode Number 开发者服务器返回的 HTTP 状态码 - header Object 开发者服务器返回的 HTTP Response Header 1.2.0 这里我们主要看两点： 回调函数：success、fail、complete； success的返回参数：data、statusCode、header。 相对于通过入参传回调函数的方式，我更喜欢promise的链式，这是我期望的第一个点；success的返回参数，在实际开发过程中，我只关心data部分，这里可以做一下处理，这是第二点。 promisify 小程序默认支持promise，所以这一点改造还是很简单的： [代码]/** * promise请求 * 参数：参考wx.request * 返回值：[promise]res */ function requestP(options = {}) { const { success, fail, } = options; return new Promise((res, rej) => { wx.request(Object.assign( {}, options, { success: res, fail: rej, }, )); }); } [代码] 这样一来我们就可以使用这个函数来代替wx.request，并且愉快地使用promise链式： [代码]requestP({ url: '/api', data: { name: 'Jack' } }) .then((res) => { console.log(res); }) .catch((err) => { console.log(err); }); [代码] 注意，小程序的promise并没有实现finally，Promise.prototype.finally是undefined，所以complete不能用finally代替。 精简返回值 精简返回值也是很简单的事情，第一直觉是，当请求返回并丢给我一大堆数据时，我直接resolve我要的那一部分数据就好了嘛： [代码]return new Promise((res, rej) => { wx.request(Object.assign( {}, options, { success(r) { res(r.data); // 这里只取data }, fail: rej, }, )); }); [代码] but！这里需要注意，我们仅仅取data部分，这时候默认所有success都是成功的，其实不然，wx.request是一个基础的api，fail只发生在系统和网络层面的失败情况，比如网络丢包、域名解析失败等等，而类似404、500之类的接口状态，依旧是调用success，并体现在[代码]statusCode[代码]上。 从业务上讲，我只想处理json的内容，并对json当中的相关状态进行处理；如果一个接口返回的不是约定好的json，而是类似404、500之类的接口异常，我统一当成接口/网络错误来处理，就像jquery的ajax那样。 也就是说，如果我不对[代码]statusCode[代码]进行区分，那么包括404、500在内的所有请求结果都会走[代码]requestP().then[代码]，而不是[代码]requestP().catch[代码]。这显然不是我们熟悉的使用方式。 于是我从jquery的ajax那里抄来了一段代码。。。 [代码]/** * 判断请求状态是否成功 * 参数：http状态码 * 返回值：[Boolen] */ function isHttpSuccess(status) { return status >= 200 && status < 300 || status === 304; } [代码] [代码]isHttpSuccess[代码]用来决定一个http状态码是否判为成功，于是结合[代码]requestP[代码]，我们可以这么来用： [代码]return new Promise((res, rej) => { wx.request(Object.assign( {}, options, { success(r) { const isSuccess = isHttpSuccess(r.statusCode); if (isSuccess) { // 成功的请求状态 res(r.data); } else { rej({ msg: `网络错误:${r.statusCode}`, detail: r }); } }, fail: rej, }, )); }); [代码] 这样我们就可以直接resolve返回结果中的data，而对于非成功的http状态码，我们则直接reject一个自定义的error对象，这样就是我们所熟悉的ajax用法了。 登录 我们经常需要识别发起请求的当前用户，在web中这通常是通过请求中携带的cookie实现的，而且对于前端开发者是无感知的；小程序中没有cookie，所以需要主动地去补充相关信息。 首先要做的是：登录。 通过[代码]wx.login[代码]接口我们可以得到一个[代码]code[代码]，调用后端登录接口将code传给后端，后端再用code去调用微信的登录接口，换取[代码]sessionKey[代码]，最后生成一个[代码]sessionId[代码]返回给前端，这就完成了登录。 [图片] 具体参考微信官方文档：wx.login [代码]const apiUrl = 'https://jack-lo.github.io'; let sessionId = ''; /** * 登录 * 参数：undefined * 返回值：[promise]res */ function login() { return new Promise((res, rej) => { // 微信登录 wx.login({ success(r1) { if (r1.code) { // 获取sessionId requestP({ url: `${apiUrl}/api/login`, data: { code: r1.code, }, method: 'POST' }) .then((r2) => { if (r2.rcode === 0) { const { sessionId } = r2.data; // 保存sessionId sessionId = sessionId; res(r2); } else { rej({ msg: '获取sessionId失败', detail: r2 }); } }) .catch((err) => { rej(err); }); } else { rej({ msg: '获取code失败', detail: r1 }); } }, fail: rej, }); }); } [代码] 好的，我们做好了登录并且顺利获取到了sessionId，接下来是考虑怎么把sessionId通过请求带上去。 sessionId 为了将状态与数据区分开来，我们决定不通过data，而是通过header的方式来携带sessionId，我们对原本的requestP稍稍进行修改，使得它每次调用都自动在header里携带sessionId： [代码]function requestP(options = {}) { const { success, fail, } = options; // 统一注入约定的header let header = Object.assign({ sessionId: sessionId }, options.header); return new Promise((res, rej) => { ... }); } [代码] 好的，现在请求会自动带上sessionId了； 但是，革命尚未完成： 我们什么时候去登录呢？或者说，我们什么时候去获取sessionId？ 假如还没登录就发起请求了怎么办呢？ 登录过期了怎么办呢？ 我设想有这样一个逻辑： 当我发起一个请求的时候，如果这个请求不需要sessionId，则直接发出； 如果这个请求需要携带sessionId，就去检查现在是否有sessionId，有的话直接携带，发起请求； 如果没有，自动去走登录的流程，登录成功，拿到sessionId，再去发送这个请求； 如果有，但是最后请求返回结果是sessionId过期了，那么程序自动走登录的流程，然后再发起一遍。 其实上面的那么多逻辑，中心思想只有一个：都是为了拿到sessionId！ 我们需要对请求做一层更高级的封装。 首先我们需要一个函数专门去获取sessionId，它将解决上面提到的2、3点： [代码]/** * 获取sessionId * 参数：undefined * 返回值：[promise]sessionId */ function getSessionId() { return new Promise((res, rej) => { // 本地sessionId缺失，重新登录 if (!sessionId) { login() .then((r1) => { res(r1.data.sessionId); }) .catch(rej); } } else { res(sessionId); } }); } [代码] 好的，接下来我们解决第1、4点，我们先假定：sessionId过期的时候，接口会返回[代码]code=401[代码]。 整合了getSessionId，得到一个更高级的request方法： [代码]/** * ajax高级封装 * 参数：[Object]option = {}，参考wx.request； * [Boolen]keepLogin = false * 返回值：[promise]res */ function request(options = {}, keepLogin = true) { if (keepLogin) { return new Promise((res, rej) => { getSessionId() .then((r1) => { // 获取sessionId成功之后，发起请求 requestP(options) .then((r2) => { if (r2.rcode === 401) { // 登录状态无效，则重新走一遍登录流程 // 销毁本地已失效的sessionId sessionId = ''; getSessionId() .then((r3) => { requestP(options) .then(res) .catch(rej); }); } else { res(r2); } }) .catch(rej); }) .catch(rej); }); } else { // 不需要sessionId，直接发起请求 return requestP(options); } } [代码] 留意req的第二参数keepLogin，是为了适配有些接口不需要sessionId，但因为我的业务里大部分接口都需要登录状态，所以我默认值为true。 这差不多就是我们封装request的最终形态了。 并发处理 这里其实我们还需要考虑一个问题，那就是并发。 试想一下，当我们的小程序刚打开的时候，假设页面会同时发出5个请求，而此时没有sessionId，那么，这5个请求按照上面的逻辑，都会先去调用login去登录，于是乎，我们就会发现，登录接口被同步调用了5次！并且后面的调用将导致前面的登录返回的sessionId过期~ 这bug是很严重的，理论上来说，登录我们只需要调用一次，然后一直到过期为止，我们都不需要再去登录一遍了。 ——那么也就是说，同一时间里的所有接口其实只需要登录一次就可以了。 ——也就是说，当有登录的请求发出的时候，其他那些也需要登录状态的接口，不需要再去走登录的流程，而是等待这次登录回来即可，他们共享一次登录操作就可以了！ 解决这个问题，我们需要用到队列。 我们修改一下getSessionId这里的逻辑： [代码]const loginQueue = []; let isLoginning = false; /** * 获取sessionId * 参数：undefined * 返回值：[promise]sessionId */ function getSessionId() { return new Promise((res, rej) => { // 本地sessionId缺失，重新登录 if (!sessionId) { loginQueue.push({ res, rej }); if (!isLoginning) { isLoginning = true; login() .then((r1) => { isLoginning = false; while (loginQueue.length) { loginQueue.shift().res(r1); } }) .catch((err) => { isLoginning = false; while (loginQueue.length) { loginQueue.shift().rej(err); } }); } } else { res(sessionId); } }); } [代码] 使用了isLoginning这个变量来充当锁的角色，锁的目的就是当登录正在进行中的时候，告诉程序“我已经在登录了，你先把回调都加队列里去吧”，当登录结束之后，回来将锁解开，把回调全部执行并清空队列。 这样我们就解决了问题，同时提高了性能。 封装 在做完以上工作以后，我们都很清楚的封装结果就是[代码]request[代码]，所以我们把request暴露出去就好了： [代码]function request() { ... } module.exports = request; [代码] 这般如此之后，我们使用起来就可以这样子： [代码]const request = require('request.js'); Page({ ready() { // 获取热门列表 request({ url: 'https://jack-lo.github.io/api/hotList', data: { page: 1 } }) .then((res) => { console.log(res); }) .catch((err) => { console.log(err); }); // 获取最新信息 request({ url: 'https://jack-lo.github.io/api/latestList', data: { page: 1 } }) .then((res) => { console.log(res); }) .catch((err) => { console.log(err); }); }, }); [代码] 是不是很方便，可以用promise的方式，又不必关心登录的问题。 然而可达鸭眉头一皱，发现事情并不简单，一个接口有可能在多个地方被多次调用，每次我们都去手写这么一串[代码]url[代码]参数，并不那么方便，有时候还不好找，并且容易出错。 如果能有个地方专门记录这些url就好了；如果每次调用接口，都能像调用一个函数那么简单就好了。 基于这个想法，我们还可以再做一层封装，我们可以把所有的后端接口，都封装成一个方法，调用接口就相对应调用这个方法： [代码]const apiUrl = 'https://jack-lo.github.io'; const req = { // 获取热门列表 getHotList(data) { const url = `${apiUrl}/api/hotList` return request({ url, data }); }, // 获取最新列表 getLatestList(data) { const url = `${apiUrl}/api/latestList` return request({ url, data }); } } module.exports = req; // 注意这里暴露的已经不是request，而是req [代码] 那么我们的调用方式就变成了： [代码]const req = require('request.js'); Page({ ready() { // 获取热门列表 req.getHotList({ page: 1 }) .then((res) => { console.log(res); }) .catch((err) => { console.log(err); }); // 获取最新信息 req.getLatestList({ page: 1 }) .then((res) => { console.log(res); }) .catch((err) => { console.log(err); }); } }); [代码] 这样一来就方便了很多，而且有一个很大的好处，那就是当某个接口的地址需要统一修改的时候，我们只需要对[代码]request.js[代码]进行修改，其他调用的地方都不需要动了。 错误信息的提炼 最后的最后，我们再补充一个可轻可重的点，那就是错误信息的提炼。 当我们在封装这么一个[代码]req[代码]对象的时候，我们的promise曾经reject过很多的错误信息，这些错误信息有可能来自： [代码]wx.request[代码]的fail； 不符合[代码]isHttpSuccess[代码]的网络错误； getSessionId失败； … 等等的一切可能。 这就导致了我们在提炼错误信息的时候陷入困境，到底catch到的会是哪种[代码]error[代码]对象？ 这么看你可能不觉得有问题，我们来看看下面的例子： [代码]req.getHotList({ page: 1 }) .then((res) => { console.log(res); }) .catch((err) => { console.log(err); }); [代码] 假如上面的例子中，我想要的不仅仅是[代码]console.log(err)[代码]，而是想将对应的错误信息弹窗出来，我应该怎么做？ 我们只能将所有可能出现的错误都检查一遍： [代码]req.getHotList({ page: 1 }) .then((res) => { if (res.code !== 0) { // 后端接口报错格式 wx.showModal({ content: res.msg }); } }) .catch((err) => { let msg = '未知错误'; // 文本信息直接使用 if (typeof err === 'string') { msg = err; } // 小程序接口报错 if (err.errMsg) { msg = err.errMsg; } // 自定义接口的报错，比如网络错误 if (err.detail && err.detail.errMsg) { msg = err.detail.errMsg; } // 未知错误 wx.showModal({ content: msg }); }); [代码] 这就有点尴尬了，提炼错误信息的代码量都比业务还多几倍，而且还是每个接口调用都要写一遍~ 为了解决这个问题，我们需要封装一个方法来专门做提炼的工作： [代码]/** * 提炼错误信息 * 参数：err * 返回值：[string]errMsg */ function errPicker(err) { if (typeof err === 'string') { return err; } return err.msg || err.errMsg || (err.detail && err.detail.errMsg) || '未知错误'; } [代码] 那么过程会变成： [代码]req.getHotList({ page: 1 }) .then((res) => { console.log(res); }) .catch((err) => { const msg = req.errPicker(err); // 未知错误 wx.showModal({ content: msg }); }); [代码] 好吧，我们再偷懒一下，把wx.showModal也省去了： [代码]/** * 错误弹窗 */ function showErr(err) { const msg = errPicker(err); console.log(err); wx.showModal({ showCancel: false, content: msg }); } [代码] 最后就变成了： [代码]req.getHotList({ page: 1 }) .then((res) => { console.log(res); }) .catch(req.showErr); [代码] 至此，一个简单的wx.request封装过程便完成了，封装过的[代码]req[代码]比起原来，使用上更加方便，扩展性和可维护性也更好。 结尾 以上内容其实是简化版的[代码]mp-req[代码]，介绍了[代码]mp-req[代码]这一工具的实现初衷以及思路，使用[代码]mp-req[代码]来管理接口会更加的便捷，同时[代码]mp-req[代码]也提供了更加丰富的功能，比如插件机制、接口的缓存，以及接口分类等，欢迎大家关注mp-req了解更多内容。 以上最终代码可以在这里获取：req.js。