背景 setData 是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口。详见官网描述 常见的 setData 操作错误 频繁的去 setData 每次 setData 都传递大量新数据 后台态页面进行 setData 针对第二点官网给出意见是,其中 key 可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义 下面通过源码深入分析的方式了解小程序是怎么针对数据路径进行组装和构造数据 小程序逻辑层框架源码 微信小程序运行在三端：iOS（iPhone/iPad）、Android 和 用于调试的开发者工具。在开发工具上，小程序逻辑层的 javascript 代码是运行在 NW.js 中，视图层是由 Chromium 60 Webview 来渲染的。这里简单点就直接通过开发者工具来查找源码。 在微信开发者工具中，编译运行你的小程序项目，然后打开控制台，输入 document 并回车，就可以看到小程序运行时，WebView 加载的完整的 WAPageFrame.html，如下图： [图片] 可以看到[代码]./__dev__/WAService.js[代码]这个库就小程序逻辑层基础库，提供逻辑层基础的 API 能力 查找WAService.js源码 在微信小程序 IDE 控制台输入 openVendor 命令，可以打开微信小程序开发工具的资源目录 [图片] 我们可以看到小程序各版本的运行时包 .wxvpkg。.wxvpkg 文件可以使用 wechat-app-unpack 解开，解开后里面就是[代码]WAService.js[代码] 和 [代码]WAWebView.js[代码] 等代码 [图片] 另外也可以只直接通过开发者工具的Sources面板查找到WAService.js的源码 [图片] 分析setData源码 在WAService.js中全局查找setData方法，找到定义此方法的地方，如下 [图片] 源代码使用了大量的逗号运算符，逗号运算符的优先级是最低的，比条件选择符还低 大量使用void 0 表示undefined setData函数定义中添加了关键的注释如下： [代码]function(c, e) { // 保存闭包内的this对象，即常用的that var u = this; // 官网定义 Page.prototype.setData(Object data, Function callback), // 即 c: Object对象，e: Function界面更新渲染完毕后的回调函数 try { // 返回 [object Object] 中的Object var t = v(c); if ("Object" !== t) return void E("类型错误", "setData accepts an Object rather than some " + t); Object.keys(c).forEach(function(e) { // e: 可枚举属性的键值, void 0 表示undefined (https://github.com/lessfish/underscore-analysis/issues/1) void 0 === c[e] && E("Page setData warning", 'Setting data field "' + e + '" to undefined is invalid.'); // t为包含子对象属性名的属性数组, u.data和u.__viewData__都是page.data的深拷贝副本 var t = N(e) , n = j(u.data, t) , r = n.obj , o = n.key; if (r && (r[o] = y(c[e])), void 0 !== c[e]) { var i = j(u.__viewData__, t) , a = i.obj , s = i.key; a && (a[s] = y(c[e])) } }), __appServiceSDK__.traceBeginEvent("Framework", "DataEmitter::emit"), this.__wxComponentInst__.setData(JSON.parse(JSON.stringify(c)), e), __appServiceSDK__.traceEndEvent() } catch (e) { k(e) } } [代码] 关键函数N(e)，解析属性名(包含.和[]等数据路径符号)，返回相应的层级数组，如 [代码]{abc: 1}中abc属性名 => [abc], {a.b.c: 1}中'a.b.c'属性 => [a,b,c], {"array[0].text": 1} => [array, 0, text][代码] 关键的注释如下 [代码]function N(e) { // 如果属性名不是String字符串就抛出异常 if ("String" !== v(e)) throw E("数据路径错误", "Path must be a string"), new M("Path must be a string"); for (var t = e.length, n = [], r = "", o = 0, i = !1, a = !1, s = 0; s < t; s++) { var c = e[s]; if ("\\" === c) // 如果属性名中包含\\. \\[ \\] 三个转义属性字符就将. [ ]三个字符单独拼接到字符串r中保存，否则就拼接\\ s + 1 < t && ("." === e[s + 1] || "[" === e[s + 1] || "]" === e[s + 1]) ? (r += e[s + 1], s++) : r += "\\"; else if ("." === c) // 遇到.字符并且r字符串非空时，就将r保存到n数组中并清空r; 目的是将{ a.b.c.d: 1 }中的链式属性名分开,保存到数组n中，如[a,b,c,] r && (n.push(r), r = ""); else if ("[" === c) { // 遇到[字符并且r字符串非空时，就将r保存到n数组中并清空r；目的是将{ array[11]: 1 }中的数组属性名保存到数组n中，如[array,] // 如果此时[为属性名的第一个字符就报错,也就是说属性名不能直接为访问器, 如{ [11]: 1} if (r && (n.push(r), r = ""), 0 === n.length) throw E("数据路径错误", "Path can not start with []: " + e), new M("Path can not start with []: " + e); // a赋值为true, i赋值为false i = !(a = !0) } else if ("]" === c) { if (!i) throw E("数据路径错误", "Must have number in []: " + e), new M("Must have number in []: " + e); // 遍历到{ array[11]: 1 }中的']'的时候，就将a赋值为false, 并将o保存到数组n中，如[array,11,] a = !1, n.push(o), o = 0 } else if (a) { if (c < "0" || "9" < c) throw E("数据路径错误", "Only number 0-9 could inside []: " + e), new M("Only number 0-9 could inside []: " + e); // 遍历到{ array[11]: 1 }中的'11'的时候，就将i赋值为true, 并将string类型的数字计算成Number类型保存到o中 i = !0, o = 10 * o + c.charCodeAt(0) - 48 } else r += c // 普通类型的字符就直接拼接到r中 } // 将普通的字符串属性名，.和]后面剩余的字符串保存到数组n中,如{abc: 1} => [abc], {a.b.c: 1} => [a,b,c], {array[0].text: 1} => [array, 0, text] if (r && n.push(r),0 === n.length) throw E("数据路径错误", "Path can not be empty"), new M("Path can not be empty"); return n } [代码] 关键函数j(e, t)，解析出属性最终对应的子对象的属性名，以及对应的子对象 [代码]var x = Object.prototype.toString; function _(e) { return "[object Object]" === x.call(e) } function j(e, t) { // e: page.data的深拷贝副本, t为包含子对象属性名的属性数组 /* - 遍历属性数组[a,b], e={a: {b: 1}} 1. i=0, 此时o为Object类型时, n = a, r = {a: {b: 1}}, o = {b: 1}; 2. i=1, 此时o为Object类型时, n = b, r = {b: 1}, o = 1; retrun { obj: {b: 1}, key: b} - 遍历属性数组[a,0,b], e={a: [{b: 1}]} 1. i=0, 此时t[i]=a, o为Object类型时, n = a, r = {a: [{b: 1}]}, o = [{b: 1}]; 2. i=1, 此时t[i]=0, o为Array类型时, n = 0, r = [{b: 1}], o = {b: 1}; 3. i=2, 此时t[i]=b, o为Object类型时, n = b, r = {b: 1}, o = 1; retrun { obj: {b: 1}, key: b} */ for (var n, r = {}, o = e, i = 0; i < t.length; i++) Number(t[i]) === t[i] && t[i] % 1 == 0 ? // t[i]是否为有效的Number Array.isArray(o) || (r[n] = [], o = r[n]) : _(o) || (r[n] = {}, o = r[n]), n = t[i], o = (r = o)[t[i]]; //注意由于逗号分隔符的优先级是最低的，所以这一行会在前面的条件运算符执行完，再执行 return { obj: r, key: n } } [代码] 最后通过[代码]r && (r[o] = y(c[e]))[代码]的方式将新的值赋给匹配出的子对象的属性，这里j(e,t)函数内部是通过引用的方式向外传递出[代码]r[代码]，所以这里改变[代码]r[o][代码]的值也会将[代码]u.data[代码]内部的值相应修改,完成局部刷新 由于不同的版本解包后，里面压缩之后的方法名称可能跟上面的对不上，但是大体的结构都是一样的 总结 官方提供的array[2].message，a.b.c.d方式就是通过解析成[array,2,message]和[a,b,c,d],找到相应的子结构进行复制操作,到达减少数据量的目的; 分页加载的时候，为了避免将整个list数据重新传输，就可以利用数据路径的方式只追加新的数据 [代码]假设原数组长度 length 为 10，新数组 newList 长度为 3 this.setData{ 'list[10]': newList[0], 'list[11]': newList[1], 'list[12]': newList[2], } [代码] 参考资料 微信小程序技术原理分析 小程序开发指南

预置条件： 在真机上才有，开发者工具正常 复现路径： 第一点：点击input框，输入内容，在键盘未收起的情况下点击自定义删除按钮，第一次点击是收起键盘，第二次才是清空输入框（删除按钮在输入框之外） 第二点：输入框点击聚焦时默认文案闪动 期望效果： 第一点：在键盘未收起的情况下，第一次点击自定义清除按钮，输入框清空 第二点：输入框聚焦时默认文案不闪动 [图片]

- 当前 Bug 的表现（可附上截图） input聚焦时   点击右边清空按钮 ios上要点击两次按钮才能清空文本 - 预期表现 - 复现路径 - 提供一个最简复现 Demo [图片]

前两天看到一个问题：input 聚焦时 侧边清空按钮（自定义的按钮）要点击两次才能把内容清空。（真机测试时遇到） 原贴：input 聚焦时 侧边清空按钮要点击两次才能把内容清空? - 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/000884e3874360026098031ea5b000 通俗点就是说：自定义了一个清空的按钮，在input输入（聚焦）的时候，点击清空没反应。 这引起我强烈的好奇心了。 先考虑清空的按钮的事件有没有触发。 我感觉是会触发的，因为之前有做过手机号发送验证码的，没试过输入手机号的时候，点击不能触发发送验证码的情况。 测试后，果然，清空的按钮的事件是有触发，方法执行之后（setData），值是有改变了的。 那么问题来了，最后value值为什么没有变化呢？ 显然，还有其他的事件触发了，执行了setData。 经过我反复的试验，bindinput触发了。bindinput，原来是它搞的鬼，为什么会触发bindinput？我就不清楚了，要问官方了。 点击清空按钮，同时触发了两个事件，两个同时存到了队列里面，虽然bindtap的方法还未执行，但是参数值已经有了，e.detail.value的值就是原本输入框里面的值。所以，执行完两个事件之后的结果是，input的值没有发生变化，导致大家以为，清空事件没有触发，或者清空事件没有作用。 原因找到了，点击清空的时候，触发了bindinput。为什么会触发呢，怎么让它不触发呢，这就留给小程序去解决吧，不是我们用户能解决的了。我们要解决的是，怎么实现input聚焦时能直接清空。 “只要思想不滑坡，办法总比困难多”。既然找到了原因，那解决办法肯定是会有的。我测试的时候发现，清空方法是比bingtap的方法先执行的，所以想到了一个解决方法： 在data里面声明一个boolean变量值为false，在执行清空方法的时候，赋值为：true，执行bindtap方法的时候，判断该变量，为true就不执行setData操作了，为false则继续。 代码： [图片] 这样做，就算清空方法不是比bingtap的方法先执行的，也不会有影响。简单测试了一下，解决了。 总结：以上就是我对input输入框清空bug的探索过程，解决方法也是我想到的最简单的做法了。因为没有经过大量测试验证，所以不知道会不会有其他问题。要是有bug，或者有其他解决方法，欢迎各位大大留言。

微信小程序iconfont（也适用于网页和其他平台的小程序） 在微信小程序等使用iconfont进阶版，17年的时候就发过一次在微信小程序里使用iconfont的文章 去看看 时隔这么久也掌握了一些这方面的心得，稍微整理了一下。 用微信开发工具好还是用成熟的IDE好？ 刚开始的时候我也是用开发工具写代码，因为刚接触的时候并没有什么特殊的需求，规规矩矩的按照开发文档来，到后面觉得效率太低了，于是改用了sublime text webstorm来做小程序开发，开发工具仅仅用来创建项目和预览。久而久之就已经完全弃用开发工具写代码了，并不是说开发工具不行而是说结合起来能给更高效的开发项目。 用webstorm来开发小程序 为什么选择ws而不用vscode，原因就是我用习惯了不想在去更换了。 讲重点： 项目目录结构 安装Less来编写css 利用ws编辑器来自动编译Less生成wxss 快速将iconfont引入项目 简单的一个例子 项目目录结构 [代码]iconfont -app 小程序项目目录 --pages 页面目录 ---index ----index.wxml ----index.less ----index.ts ----index.json ----index.js (自动编译) ----index.wxss (自动编译) --styles 样式目录 ---global.less 全局公共样式 ---global.wxss (自动斌阿姨) ---iconfont.less ---iconfont.wxss (自动编译) -app.ts -app.js (自动编译) -app.less -app.wxss (自动编译) app.json project.config.json 项目配置文件 sitemap.json 搜索引擎相关配置 -node_modules [代码] 安装Less 首先确保自己电脑是否安装了node.js，关于怎么安装node.js请自行谷歌或者百度。 全局或者单项目安装less [代码]npm install -g less [代码] [代码]webstorm[代码]配置[代码]less[代码]自动编译 打开ws设置找到[代码]File Watchers[代码] [图片] 添加一个less类型的监视器 [图片] 修改默认配置，按下图设置 [图片] 可以根据自己的习惯来设置，没有规定一定是这样，这套设置是当我less文件有改动我保存时会自动编译输出到wxss文件，这样的好处就是不会有改动就编译，而是保存的时候需要编译了才编译。 新建[代码]iconfont[代码]项目 打开阿里巴巴的图标库点我 新建一个项目，然后添加或者上传一些icon图标，生成Font Class的css链接，然后在styles目录下的[代码]iconfont.less[代码]文件里引入刚刚创建的链接，[代码]iconfont.wxss[代码]就会自动生成对应的代码，这样就不用每次icon有改变就得去打开创建的链接然后复制粘贴到iconfont.wxss了。 [图片] [图片] [图片] [图片] 举个栗子 [代码]// index.less文件中引入global.less跟iconfont.wxss // 至于为什么global引入的是less而iconfont引入的却是wxss // 因为less是css的预处理语言，所以最终还是会被打包编译成css // 所以我们global要引入的并不是要打包编译后的css代码 // 而iconfont因为我们在less里面引入了外链后被打包编译了需要的css @import (reference) "../../styles/global"; @import (css) "../../styles/iconfont.wxss"; [代码] [代码]// 在view里面直接使用icon <view class="icon iconaixin"></view> // 循序遍历所有的icon <view class="container"> <view wx:for="{{ iconList }}" wx:key="item" data-index="{{ index }}" class="item {{ index === iconIndex ? 'active' : '' }}" bind:tap="click"> <view class="icon icon{{ item.font_class }}"></view> <view class="name">{{ item.name }}</view> </view> </view> [代码] 效果图 [图片] 大致使用步骤就是，通过ws创建文件的监视器，自动编译打包，大大的提高了开发效率。 我less中使用rpx的时候用的是unit(10, rpx)，当然你也可以直接用10rpx，但是IDE可能会识别不了，编译后或者格式化后会出现10 rpx这种情况，这样开发工具肯定就会报错了，解决办法就是在创建一个监视器，保存打包的时候，把10 rpx替换成10rpx即可，js部分是用ts编写，如果不懂可以直接看编译后的js，差别不会很大！如果也想ts修改代码，请执行[代码]npm install[代码]把相关依赖包下载就行了。 [图片] over 如果有疑问或者更好建议欢迎找我交流！ 微信小程序代码片段 github

1、checkbox checkbox .wx-checkbox-input{     border-radius:50%;     width:20px;height:20px; } checkbox .wx-checkbox-input.wx-checkbox-input-checked{     border-color:#F0302F !important;     background:#F0302F !important; } checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{     border-radius:50%;     width:20px;     height:20px;     line-height:20px;     text-align:center;     font-size:15px;     color:#fff;     background:transparent;     transform:translate(-50%, -50%) scale(1);     -webkit-transform:translate(-50%, -50%) scale(1); } 2、radio radio .wx-radio-input{     border-radius:50%;     width:20px;height:20px; } radio .wx-radio-input.wx-radio-input-checked{     border-color:#F0302F !important;     background:#F0302F !important; } radio .wx-radio-input.wx-radio-input-checked::before{     border-radius:50%;     width:20px;     height:20px;     line-height:20px;     text-align:center;     font-size:15px;     color:#fff;     background:transparent;     transform:translate(-50%, -50%) scale(1);     -webkit-transform:translate(-50%, -50%) scale(1); } 如果上面的代码对您有帮助，麻烦抖一抖小手点下赞，谢谢