- 小程序异常监控收集
前言你是否经常碰到业务反馈,线上的小程序某个页面打不开了,订单没法结算了,但是你当时测试的时候都是好好的。 由于线上环境复杂,一些问题只会在特定网络环境或者设备上发生,对于这类问题,异常信息的收集就显得格外重要了,我们不但希望收集错误的堆栈信息,还需要用户操作流程,设备信息等,以便复现错误。 简单收集小程序App()生命周期里提供了onError函数,可以通过在onError里收集异常信息 App({ // 监听错误 onError: function (err) { // 上报错误 wx.request({ url: "https://url", // 自行定义报告服务器 method: "POST", errMsg: err }) } }) 用户操作路径收集一些较隐蔽的错误如果只有错误栈信息,排查起来会比较难,如果有用户操作的路径,在排查时就方便多了。 方法一:暴力打点方法收集 优点:简单直接 缺点:污染业务代码,造成较多垃圾代码 方法二:函数劫持(推荐使用) 需要在App函数中的onLaunch、onShow、onHide生命周期插入监控代码,我们通过重写App生命周期函数来实现。 App = function(app) { ["onLaunch", "onShow", "onHide"].forEach(methodName => { app[methodName] = function(options) { // 构造访问日志对象 var breadcrumb = { type: "function", time: utils.now(), belong: "App", // 来源 method: methodName, path: options && options.path, // 页面路径 query: options && options.query, // 页面参数 scene: options && options.scene // 场景编号 }; self.pushToBreadcrumb(breadcrumb); // 把执行对象加入到面包屑中 }) }但是这样写,会把用户自定义的内容给覆盖掉,所以我们还需要把用户定义的函数和监控代码合并。 var originApp = App // 保存原对象 App = function(app) { // .... 此处省略监控代码 // .... 此处省略监控代码 originApp(app) // 执行用户定义的方法 }记录结果 可以从下面的json看出,用户到了detail页面,执行了onLoad => getDetail => onReady => buy 当执行buy方法的时候报错。 [{"method":"onLoad","route":"pages/film/detail","options":{"id":"4206"}}, {"method":"getDetail","route":"pages/film/detail","options":{"id":"4206"}}, {"method":"onReady","route":"pages/film/detail","options":{"id":"4206"}},{"method":"buy","route":"pages/film/detail","options":{"id":"4206"}}] 上报策略考虑到在大型应用中,日志量比较大,我们采取抽样,合并,过滤三个方法减少日志的输出,代码实现可以参考lib/report.js 代码组织项目使用rollup作为构建工作,实现ES6转ES5,模块加载功能。 项目目录如下: config.js // 配置文件 core.js // 劫持小程序核心代码 events.js // 监听自定义事件 report.js // 上报类 utils.js // 工具类 🌟喜欢的点个star:https://github.com/zhengguorong/xbossdebug-wechat
2018-06-06 - Kbone原理解析 & 小程序技术选型
Kbone原理解析 官方介绍 “Kbone 是一个致力于微信小程序和 Web 端同构的解决方案。” Web端框架基本原理 首先我们来看下普通Web端框架,以Vue框架为例,一份Vue模板对应一个组件,在代码构建阶段编译成调用Dom接口的JS函数,执行此JS函数就会创建出组件对应的Dom树,从而渲染到浏览器页面上。 [图片] 然而,小程序是双线程的,并没有Dom树的概念,逻辑层和视图层完全分离,逻辑层是一个纯粹的JSCore,开发者可以编写JS脚本,但是无法直接调用Dom/Bom的api, 没有任何浏览器相关的实现。 在小程序中,视图层和逻辑层的交互是通过数据和时间驱动的。 因此,要实现跨端同构,问题是:怎么将web端代码转为小程序代码? 业界常规做法 目前业界流行的第三方跨端框架们,常规做法都是:静态编译兼容。 [图片] 原理是把代码语法分析一遍,然后将其中的模板部分翻译成对应的跨端需求的模板(微信小程序、支付宝小程序、H5、APP等)。 静态编译最大的局限性是无法保证转换的完整性,因为Vue模板和WXML模板的语法并不是直接对等的,Vue的特性设计也和小程序的设计无法划等号,这自然就导致了部分Vue特性的丢失。 比如像Vue中的v-html指令、ref获取Dom节点、过滤器等就通通用不了。 除了Vue自身的特性外,一些原本依赖Dom/Bom接口的Vue插件页无法使用,例如Vue-Router。 Kbone的做法 Kbone是通过提供 适配器 的方式来实现同构,即运行时兼容,而非静态编译。 Kbone的适配器核心包含两个部分: miniprogram-render: 仿造Dom/Bom接口,构造仿造Dom树; miniprogram-element: 监听仿造Dom树变化,渲染到页面,同时监听用户行为,触发事件。 仿造Dom树和浏览器的运行时对比: 仿造Dom树: 利用内置组件和自定义组件的自引用来进行递归,创建组件树。 如图,自定义custom-dom为递归自引用组件: [图片] 递归的终止条件是遇到特定节点、文本节点或者children空节点。 在创建出组件树后,将Dom节点和自定义组件实例进行绑定,以便后续的Dom更新和操作。 [图片] kbone这里还对节点数进行了优化: 如果一个dom节点对应一个自定义组件的话,就会创建很多自定义组件,这样会很浪费开销,这里做了子树的合并,也就是说3层才创建一个自定义组件,节省开销。 优化前:17个dom=17个自定义组件; 优化后:17个dom=4个自定义组件,蓝色那个是单节点,会合并到上面的树; [图片] dom 子树作为自定义组件渲染的层级数是可以通过配置传入,理论上层级越多,使用自定义组件数量越少,性能也就越好。 一棵很大的 Dom 树,一次性 setData 到视图层,可能会超过 setData 的大小限制(1024kB),拆分成多棵子 Dom 树,然后分批的 setData 到视图层,可以节省开销。 事件监听 小程序的事件是视图层到逻辑层的通讯方式,事件绑定在组件上,当被触发时,就会执行逻辑层中对应的事件处理函数。 小程序的捕获冒泡是在视图层view端,因此逻辑层在整个捕获冒泡流程中各个节点接收到的事件不是同一个对象,小程序事件的捕获冒泡和阻止冒泡等操作必须在WXML模板中生命,无法使用接口实现。 [图片] 为了能够让web端和小程序端的事件系统行为一致,kbone除了仿造了一份Dom树外,也把整个事件系统仿造了一份,即在仿造Dom树上进行捕获冒泡。 当自定义组件监听到用户的操作后,就将事件发往仿造Dom树,后续自定义组件监听到的同一个事件的冒泡就直接忽略。 当触发改节点,仿造Dom树接收到事件后,再进行捕获和冒泡,让事件在各个节点触发。 [图片] Kbone的优势 支持多个前端框架:Vue、React、Preact 等 支持更为完整的前端框架特性: Vue 中的 v-html 指令、Vue-router 插件等 提供了常用的 dom/bom 接口 可以使用小程序本身的特性: live-player 内置组件、分包功能等 提供一些 Dom 扩展接口:getComputedStyle 接口等 Kbone实践 脚手架kbone-cli 官方已经提供了kbone-cli可以用来快速开发: 用npm全局安装kbone-cli [图片] 可以根据自己的技术栈选择不同的开发模板:React/Vue/Omi/Preact [图片] 然后就可以愉快的进行开发啦~ [图片] 生成的demo项目结构如下: [图片] demo中包含了多页跳转、vue-router、vuex等的使用示例,以及mp-webpack-plugin的配置示例。 对于多页面的应用,在 Web 端可以直接通过 a 标签或者 location 对象进行跳转,但是在小程序中则行不通。同时 Web 端的页面 url 实现和小程序页面路由也是完全不一样的。 Demo示例对比 [图片] 其中,有一部分两端差异的业务逻辑功能,也给出了3中不同的解决方案: 利用vue-improve-loader,在构建时对dom树节点进行删减,在需要提出的节点加上check-reduce属性 利用reduce-loader,将业务中不需要被打包的代码进行去除,使用行内loader和环境变量来判断 使用样式隐藏,即设置不需要显示的节点样式为 display:none 其他问题 在实际开发中,还会碰到一些细节,例如: 多页面开发:修改webpack和mp-webpack-plugin配置 小程序内置组件: 部分用html标签代替,其他用wx-component + behavior标签 小程序自定义组件:修改mp-webpack-plugin配置,补充wxCustomComponents字段,将自定义组件放入组件根目录,使用自定义组件 自定义app.js和app.wxss:监听app的生命周期,修改webpack配置补充app.js的构建入口,修改插件配置的generate.app字段,补充app.js 扩展dom/bom对象和API:使用 window.$$extend追加方法 代码优化:用reduce-loader做体积精简,dom树精简用vue-improve-loader 区分环境实现不同功能:process.env.isMiniprogram 更新迭代 kbone由于目前在快速发展期,更新迭代非常迅速,以下特性是对比了8月份的版本和11月份版本,可以看出已经解决了近2/3的问题。 [图片] 小程序技术选型 详细了解了kbone之后,我们来分析下小程序技术框架到底应该怎么选? kbone & 小程序原生 已有web版,需要小程序版:kbone 跨平台需求(web + 小程序):kbone 对性能特别苛刻 or 追求稳定 or 要用最新功能:小程序原生 页面节点数量特别多( 1000 节点以上),且对渲染性能要求高:静态模板转义方案(第三方框架:mpvue/taro等) 第三方框架 MpVue :不推荐再用了,坑越来越多,内部也表示之后不会投入太多维护 WePY 1.7.x :不推荐再用了:1.7.x 的版本在最初的设计上的缺陷导致遗留了很多比较严重的问题 WePY 2.0:现在还是 alpha 阶段,内外部有一些小程序在跑,体验和反馈还可以。但依然 issue 比较多。害怕踩坑的也不推荐使用 Taro: 也还是有不少问题,但相对来说应该是比 mpVue 和 WePY 更稳定一点 Uni-app:mpvue的衍生版,跨端 (官方示例有6端) 支持的很好,在H5端实现了一套微信模拟器,可以尝试,是目前唯一支持app端的商用方案,有独立的编辑器HBuildX Chameleon: 统一的多态协议,渐进式跨端,提供脚手架命令工具,规划比较宏大 Omi :基于Taro完成的框架,kbone有支持omi的模板 Nanachi: 基于react的编译期间的转义框架 总结 没有跨端需求,只需要微信小程序 ==> 小程序原生 web端转小程序 or 两端 or 想要尝鲜 ==> kbone 多端 or Vue 技术栈 ==> uni-app 多端 or React 技术栈 ==> taro 不介意学习新技术栈 ==> wepy 2.0 or chaemeleon 写在最后 小程序在非常快速的更新迭代,就算是原生框架也还是有一些坑的,因此没有哪种框架是百分之百完美,需要根据业务具体需求以及自身技术栈偏好来进行选择。 文章中提及到的部分第三方框架只是参考了官方文档,没有逐个一一尝试,有问题麻烦指出,鞠躬~~ [图片]
2022-03-10 - 业务域名设置--校验文件检查失败自查指引
目前不少开发者在设置业务域名时,发现检查校验文件失败,可先按照如下步骤进行自查: 如果想保存的业务为https://test.com/,下载下来的校验文件为AbC.txt,则需要确保https://test.com/AbC.txt能够访问。 校验文件内容错误。校验文件内容一般是非HTML数据,如果下载下来的校验文件内容为HTML数据,一般为登录态过期。请重新登录小程序下载校验文件。 使用4G网络尝试访问链接,确认自身服务器没有拦截请求(常见于设置了白名单或者防火墙的服务器,需开发者自行确认下) https证书过期。请确保https证书处于有效期内。 使用curl 测试链接,确保curl能够正常访问链接,且curl出来的内容为校验文件内容。 使用time curl https://test.com/abc.txt查看链接时间,建议耗时在1s之内。 请确保url中的文件名与下载下来的文件名大小写一致。如下载的文件是AbC.txt,确保url是https://test.com/AbC.txt,不能是https://test.com/abc.txt 部分用户的服务器配置较陈旧,安全性差(如配置 768位 的 DH),为了保证通信安全,微信后台不支持,请更新服务器配置。 (1)通过https://cloud.tencent.com/product/tools#userDefined12,检测网址是否支持TLS1.2。 (2)可通过工具 https://www.ssllabs.com/ssltest/analyze.html 检查自己的服务器,对该工具标红的各项漏洞逐项修补,建议更新配置直到该工具打分为 C及以上 。 9. 如上述检查都没有问题,请重新下载校验文件重试,确保上传到服务器的文件内容与新下载的文件内容一致。
2018-06-21 - 小程序测试号有什么用
请官方解答一下小程序测试号的最佳实践呗。 申请了一个测试号,给分配的新的appid和appsecret。发现替换正式的appid后,提交为体验版之后,同原有的appid,没有区别,感觉测试号这个功能很鸡肋啊
2018-09-11 - 针对新手很容易出现理解误区的微信小程序订阅消息模块
1. 写在前面 微信小程序下架了模板消息功能,取而代之的是订阅消息功能。这个订阅消息目前又分为「一次性订阅」和「永久订阅」。使用订阅消息也有一段时间了,感觉对新手订阅消息很容易让新开发者进入一个理解的误区,这里觉得有必要说出来 2. 理解误区 很多新手认为,只要用户勾选了小程序端订阅消息弹出时底部的「总是保持以上选择…」后,就可以「为所欲为」的不限次数的推送订阅消息给用户了。如下图: [图片] 3. 正确理解 如果你使用的「一次性订阅」模板(目前发现绝大多数开发者都是只能用一次性的,因为永久性的订阅消息申请门槛太高),那么勾选底部的「总是…」这个并不代表以后可以直接推送了。官方原话wx.requestSubscribeMessage的介绍里是这样写的: 3.1 官方说明 wx.requestSubscribeMessage(Object object) 基础库 2.8.2 开始支持,低版本需做兼容处理。 调起客户端小程序订阅消息界面,返回用户订阅消息的操作结果。当用户勾选了订阅面板中的“总是保持以上选择,不再询问”时,模板消息会被添加到用户的小程序设置页,通过 wx.getSetting 接口可获取用户对相关模板消息的订阅状态。 注意事项 一次性模板 id 和永久模板 id 不可同时使用。 低版本基础库2.4.4~2.8.3 已支持订阅消息接口调用,仅支持传入一个一次性 tmplId / 永久 tmplId。 2.8.2 版本开始,用户发生点击行为或者发起支付回调后,才可以调起订阅消息界面。 2.10.0 版本开始,开发版和体验版小程序将禁止使用模板消息 fomrId。 3.2 重点关注 这里重点关注第7条:「用户发生点击行为或者发起支付回调后,才可以调起订阅消息界面。」这就意味着你需要在用户主动点击某个组件是触发调用wx.requestSubscribeMessage方法再次订阅,订阅后,你才可以「为所欲为」推送一次模板消息,注意只能一次。下次再想推送时,需要用户再次点击触发wx.requestSubscribeMessage。 4. 破局方案 目前订阅消息功能,就是这么个情况,所以针对这个情况的替代方案有以下 4.1 永久性订阅消息 如果能达到申请「永久性订阅」消息的模板的门槛,那自然是极好的,直接用永久性模板「为所欲为」。 4.2 使用服务号的模板消息替代 比较常用的是使用公众号服务号的模板消息代替小程序的订阅消息功能,公众号的模板消息功能限制就比订阅号好多了,基本上可以「为所欲为」的推送。但是这个方案有个致命的运营成本:必须要用户关注公众号,还有小程序要跟公众号同一主体并绑定在开放平台下。同时开发成本有所增加,要采用unionId机制来打通小程序跟公众号的openId。这个具体的实现方案,大家有兴趣的话可以讨论下。笔者目前就是用这种方案的。 5. 几个注意点 5.1 官方提示 订阅消息如果选择选择‘总是保持以上选择,"不再询问"后的设置问题: 目前是选择‘总是保持以上选择,"不再询问"后,可以在设置中开启或拒绝接收,但不会再次拉起授权弹窗 6. 长期性订阅消息 请参考官方最新文档: 小程序模板消息能力调整通知 | 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/00008a8a7d8310b6bf4975b635a401 长期性订阅消息 一次性订阅消息可满足小程序的大部分服务场景需求,但线下公共服务领域存在一次性订阅无法满足的场景,如航班延误,需根据航班实时动态来多次发送消息提醒。为便于服务,我们提供了长期性订阅消息,用户订阅一次后,开发者可长期下发多条消息。 目前长期性订阅消息仅向政务民生、医疗、交通、金融、教育等线下公共服务开放,后期将逐步支持到其他线下公共服务业务。 7.题外话 鉴于被戴上各种「刷赞,冲级,让社区点赞“通货膨胀”」等等一些恶毒字眼(最近多了个职业回复的「雅称」),各种帽子戴得,做一个开发爱好者积极分享和解决各种问题太难了,姑且不论咱写一篇文章需要截图多少,单单排版就得废掉俺多少时间哈,很受伤,所以本人决定在微信开放者社区封笔。你看到是俺最后一篇发表在微信开放社区的文章。如果你想继续查看俺的一些文章可以私聊我。我会在其他平台保持继续创作。bye-bye~ 8. 最最重要的来了 看完后觉得有用记得点赞~~ ↓点赞处↓
2020-09-04 - 一眼告诉你什么是订阅消息了,看完就懂订阅消息。
消息通知有两种: 一、A的动作后,发消息给A自己,这种容易解决,不多说明; 二、A动作后,发消息给B(比如管理员、店家、楼主),如何保证B收到消息?这种是本方案要解决的问题。 一张图片一眼告诉你什么是订阅消息,产品经理的设计UI居然让人一眼就知道订阅消息是什么玩意。 [图片] 用户 B (管理员、商家、组长、楼主)在知道订阅数不足后,打开小程序来续订阅数,否则没法收到订阅消息。 [图片] 补充一: 关于勾选按钮,请注意话述是:“总是保持以上选择,不再询问”,而不是:“总是同意接收订阅消息”,不要幻想就成了永久性订阅消息; 相当于你打电话订外卖,对店家说“老样子”,店家只会马上送一次外卖,而不是会以后每天自动给你送外卖了。 勾选和不勾选的区别是什么呢? 区别仅仅是:不勾选时,必须点击订阅10次,弹窗10次;勾选后,仍然必须点击订阅10次,但是不弹窗。无论如何“订阅”这个点击n次的动作少不了。 补充二: 一旦勾选后,就不可逆了,没有任何办法恢复或取消勾选了,除非你小程序MP后台换一次消息模板号(删除模板,重新添加一次)。 补充三: 关于如何保存订阅数。 保存在数据库中,笔者用的是云开发,数据库表user结构如下: { _id:'openid1', nickName:'老张', msg:{ "tempId1":5, "tempId2":7, } } 补充四: 关于如何获取订阅数。两种方式: 一、wx.requestSubscribeMessage的回调success里获取; 二、消息推送机制获取;https://developers.weixin.qq.com/miniprogram/dev/framework/server-ability/message-push.html
2022-09-21 - 小程序申请长期订阅消息模板
【小程序appid】wx5e93e66150ceff33 【小程序主体】广东爱尚游互联网科技有限公司 【申请模板类目】教育 > 教育信息服务 【申请模板名称】幼儿园晨检报告 【使用场景】幼儿园学生每日晨检,学生每日到校后通过智能设备进行体温、手部、眼睛、口腔健康检测及身高体重测量 【模板字段】学生姓名,到校时间,体温,备注(体检报告) 【消息示例】学生到校通知, 小明同学在2020年11月4日08:50:12到达学校,今日晨检体温:36.5℃,体检报告:体温正常,手部正常,眼睛正常,口腔正常。
2020-11-04 - 申请长期订阅消息模板
【小程序appid】wx1d32c1a53e6eac9e 【小程序主体】宁波云医院有限公司 【申请模板类目】诊后随访提醒 【申请模板名称】随访提醒 【使用场景】(详细描述下发消息场景、收到的用户类型,对行业判断很重要) 【模板字段】提醒内容、 随访机构、随访医生、 随访对象、备注(该字段所需内容有些情况有点长) 【消息示例】 随访提醒 提醒内容 您好,您的报到已通过 随访机构 复旦大学附属中山医院 随访医生 杜xx 随访对象 张xx 备注 请等待医生为您制定计划,您也可点击链接直接咨询医生
2020-12-25 - 微信证件OCR小程序应用案例分享
应用场景 身份证/银行卡识别 用户身份认证 - 应用于政务、金融、企业服务等应用下的远程用户身份认证,自动识别并录入各字段信息,降低用户输入 成本,有效提升用户体验。 商户身份核验 - 应用于电商、外卖、运输服务等场景下的商户身份认证、资质文件审核,提高平台服务质量,规避恶意违规等业务风险。 身份证识别: [图片] 银行卡识别: [图片] 营业执照识别 企业信息电子化存档 - 准确识别营业执照的关键字段,快速核验企业资质,完成企业信息的快速录入,提升企业信息化管理水平,有效节约人力成本 。 商家资质审查 - 通过对供应商企业信息的结构化识别和审核核验,提高合作伙伴的管理效率 银行金融信贷服务 - 适用于企业银行开户、信贷评估等金融服务场景,通过对企业信息的自动化审查,提升银行业务效率,有效控制业务风险。 [图片] 驾驶证/行驶证识别 车主身份认证 - 只需拍照即可快速上传本人证件信息,帮助车主快速完成身份认证,降低车主输入成本,广泛应用于 ETC 办理、打车、租车、车险投保理赔等场景。 车主信息服务 - 在汽车保险理赔、二手车交易、车辆租借和年审等场景,帮助用户快速录入车辆相关信息,提高业务人员的办公效率和服务准确性。 [图片] 通用印刷体识别 纸质文档电子化- 使用通用文字识别技术,助您完成大量的文档整理工作,从书籍、纸质论文、档案、PPT 课件等印刷资料,到课堂笔记、作业作文等手写内容,均可实现拍照自动识别文字,方便用户进行文本录入和文档管理,提高产品易用性和用户体验。 [图片] 补充:微信证件OCR的接口文档 银行卡识别 营业执照识别 驾驶证识别 身份证识别 通用印刷体识别 行驶证识别 服务平台 OCR 接口
2020-10-10