几个微信小程序开发小技巧，提效又实用( 三 ) _小程序开发

比如某个需求，需要把 info.height 改为 155，同时改变 info.desc 数组的第 0 项的 age 为 12，第 3 项的 color 为灰色呢？
// 先取出要改变的对象，改变数字后 setData 回去const { info } = this.datainfo.height = 155info.desc[0].age = 12info.desc[3].color = '灰色'this.setData({ info })// 或者像某些文章里介绍的，这样可读性差，也不太实用this.setData({'info.height': 155,'info.desc[0].age': 12,'info.desc[3].color': '灰色'})上面这两种方法，是我们平常小程序里经常用的，和其他 Web 端的框架相比，就很蹩脚，一种浓浓的半成品感扑面而来，有没有这样一个方法：
this.upData({info: {height: 155,desc: [{ age: 12 }, , , { color: '灰色' }]}})这个方法会帮我们深度改变嵌套对象里对应的属性值，跳过数组项里不想改变的，只设置我们提供了的属性值、数组项，岂不是省略了一大堆蹩脚的代码，而且可读性也极佳呢。
这就是为什么我在上线的项目中使用 wx-updata，而不是 setData
wx-updata 的原理其实很简单，举个例子：
this.upData({info: {height: 155,desc: [{ age: 12 }]}})// 会被自动转化为下面这种格式，// this.setData({//'info.height': 155,//'info.desc[0].age': 12,// })原来这个转化工作是要我们自己手动来做，现在 wx-updata 帮我们做了，岂不美哉！
3.2 wx-updata 使用方式在一般情况下，我们可以将方法直接挂载到 Page 构造函数上，这样就可以在 Page 实例中像使用 setData 一样使用 upData 了：
// app.js 中挂载import { updataInit } from './miniprogram_npm/wx-updata/index'// 你的库文件路径App({onLaunch() {Page = updataInit(Page, { debug: true })}})// 页面代码中使用方式this.upData({info: { height: 155 },desc: [{ age: 13 }, '帅哥'],family: [, , [, , , { color: '灰色' }]]})有的框架可能在 Page 对象上进行了进一步修改，直接替换 Page 的方式可能就不太好了，wx-updata 同样暴露了工具方法，用户可以在页面代码中直接使用工具方法进行处理：
// 页面代码中import { objToPath } from './miniprogram_npm/wx-updata/index'// 你的库文件路径Page({data: { a: { b: 2}, c: [3,4,5]},// 自己封装一下upData(data) {return this.setData(objToPath(data))},// 你的方法中或生命周期函数yourMethod() {this.upData({ a: { b: 7}, c: [8,,9]})}})针对修改数组指定项的时候，可能存在的跳过数组空位的情况，wx-updata 提供了 Empty 的 Symbol 类型替位符，还有数组的对象路径方式，感兴趣可以看看 wx-updata 的文档，也可以参考 <开发微信小程序，我为什么放弃 setData，使用 upData> 这篇介绍文章。
另外，使用了 wx-updata 也还可以使用原来的 setData，特别是有时候要清空数组时，灵活使用，可以获得更好的小程序开发体验，祝大家小程序开发愉快
4. 使用 scss 写样式4.1 Webstorm 配置方法关于蹩脚的 .wxss 样式，我使用 webstorm 的 file watcher 工具把 scss 文件监听改动并实时编译成 .wxss 文件，感觉比较好用，这里给大家分享一下我的配置：

文章插图

然后记得在 .gitignore 文件中加入要忽略的样式：
*.scss*.wxss.map这样在上传到 git 的时候，就不会上传 scss 文件了～当然如果你的团队成员需要 scss 的话，还是建议 git 上传的时候也加上 scss 文件。
这样设置之后，一个组件在本地的会是下面这样

文章插图

本地文件
其中我们需要关注的就是 .js、.json、.scss、.wxml 文件，另外的文件 .wxss 会在你改动 .scss 文件之后自动生成并更新，而 .wxss.map 是插件自动生成的映射关系，不用管。
如果不是使用 webstorm，可以直接执行命令 sass --watch index.scss:index.wxss -s expanded，命令行如果关闭，sass 命令就不会监听文件的变动然后编译，所以最好用编辑器的插件。
同理，也可以使用 less、stylus 等预编译语言。
4.2 Visual Studio Code 配置方法万能的 VSC 当然也可以做到这个功能，搜索并下载插件 easy sass，然后在 setting.json 中修改/增加配置：
"easysass.formats": [{"format": "expanded","extension": ".wxss"},{"format": "compressed","extension": ".min.wxss"}]上面 expanded 是编译生成的 .wxss 文件，下面 compressed 是压缩之后的 .wxss 样式文件，下面这个用不到可以把下面这个配置去掉，然后在 .gitignore 文件中加入要忽略的中间样式：