前言你是否经常碰到业务反馈，线上的小程序某个页面打不开了，订单没法结算了，但是你当时测试的时候都是好好的。 由于线上环境复杂，一些问题只会在特定网络环境或者设备上发生，对于这类问题，异常信息的收集就显得格外重要了，我们不但希望收集错误的堆栈信息，还需要用户操作流程，设备信息等，以便复现错误。 简单收集小程序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

欢迎大家试用。

WxRequest - 发送请求 WxService - Promise API WxValidate - 表单验证 WxResource - Restful API

wxDraw.js--小程序的Canvas动画库正式发布 [图片] wxDraw轻量的小程序canvas动画库 github 是什么canvas 是HTML5的一个重要元素，它能够高效的绘制图形，但是过于底层，且粗糙的Api，导致开发者很难使用它来做较为复杂的图形， 而且它的即时绘制无记忆特性，使得它内部的图形并不支持动画更不支持一切交互事件。 这样的问题出现在所有支持canvas的客户端上同样出现在 微信小程序中的canvas中， 由于小程序由jscore支持，并没有window对象，并且canvas的Api与标准的canvas的Api有所出入，所以市面上绝大部分canvas库与它无缘。 而wxDraw也就应运而生，专门用于处理小程序上canvas的图形创建、图形动画以及交互问题的。 特性简单 不需要你会canvas,会用jQuery就会使用wxDraw。 灵活 所有图形，随时随地都可以进行属性修改、图形添加以及图形销毁。 事件支持 小程序支持的事件只要是合理的都支持。 缓动动画支持 wxDraw支持链式调用动画『就像jQuery的animate一样』，并且支持几乎所有的缓动函数 图形创建 支持图形这些图形都可以在演示文件里看到 点这里 rect[代码] var rect = new Shape('rect', {x: 60, y: 60, w: 40, h: 40, fillStyle: "#2FB8AC", rotate: Math.PI/2 },'mix', true);[代码] [图片]rect circle[代码] let circle = new Shape('circle', { x: 100, y: 100, r: 40, sA: Math.PI/4,                             fillStyle: "#C0D860",                            strokeStyle: "#CC333F", rotate: 20, lineWidth: 0, needGra: 'line',                              gra: [[0, '#00A0B0'], [0.2, '#6A4A3C'], [0.4, '#CC333F'], [0.6, '#EB6841'], [1, '#EDC951']]},                           'fill', true)[代码] [图片] polygon[代码]let polygon = new Shape('polygon', { x: 200, y: 200, r: 40, sides: 9, //9边形                          fillStyle: "#FC354C", rotate: Math.PI / 4 }, 'mix', true)[代码] [图片] ellipse[代码]    let ellipse = new Shape('ellipse', { x: 200, y: 200, a: 40, b: 100,                             fillStyle: "#00A0B0", rotate: Math.PI / 7 }, 'mix', true)[代码] [图片] cshape 「自定义图形」[代码]  let cshape = new Shape('cshape', {      rotate: Math.PI / 2,      points: [[70, 85], [40, 20], [24, 46], [2, 4], [14, 6], [4, 46]],      lineWidth: 5,      fillStyle: "#00A0B0",      rotate: Math.PI / 7,      needGra: 'circle',      smooth:false,      gra: [[0, '#00A0B0'], [0.2, '#6A4A3C'], [0.4, '#CC333F'], [0.6, '#EB6841'], [1, '#EDC951']]    }, 'fill', true)[代码] [图片] line[代码]let line = new Shape('line', { points:[[240,373],[11,32],[28,423],[12,105],[203,41],[128,0.06]],               strokeStyle: "#2FB8AC",lineWidth:1, rotate: 0, needShadow: true,smooth:false },                 'fill', true)[代码] [图片] text[代码]  let text = new Shape('text', { x: 200, y: 200, text: "我是测试文字",                      fillStyle: "#E6781E", rotate: Math.PI / 3}                      'fill', true)[代码] [图片] wxDraw创作的动画演示这些动画都可以在演示文件里看到 点这里 Google [图片] 贪吃蛇 [图片] logo演绎 rect舞蹈 [图片] 吃豆人 [图片] wxDraw事件这些事件都可以在演示文件里看到 点这里 支持 tap touchStart touchEnd touchMove longPress drag「自定义的事件」 事件演示旁边UI小妹妹亲自示范 😜 第一视角 [图片] 是不是特别简单，特别方便！！！ 来，老铁们！star 走一波！！！ 详细文档还请关注github