强烈推荐几个简单实用的微信小程序开发小技巧(微信小程序开发入门课程)

今天微信小程序开发专栏强烈推荐几个简单实用的微信小程序开发小技巧。

前段时间开发了一个微信小程序。在开发过程中，我总结了一些我认为对我有用的小技巧，相当于一个总结，希望能帮到你。如果真的对大家有帮助，别忘了喜欢。

微信开发者工具版本:1.03.2006090(2020-06-19)基础库版本:v2.12.1 (2020-08-04)1。开发中可能遇到的坑和小技巧本来想写个小技巧，结果总结了一堆坑，还没上手就想象不到微信小了。从微信开发者工具到所谓的“全新语言”，有一种强烈的半成品感，真的让我emmm...另外，我发现网上的小程序文章大多是如何使用、如何避坑的实用文章，而不是技术文章，这也从五个方面反映了小程序的很多坑。

微信小程序最初开发的时候，我一直在问“为什么拥有大量技术人才的腾讯会推出这样的laji”。社区里两三年前就提出了很多智障和反人类的地方，官方回复正在修复，但是几年过去了，依然没有任何消息，官方回复依然是冷冰冰的“反馈”。

微信开发者工具往往不能热更新甚至黑屏，也无法重新编译。只能逼他们退出，然后再开。和上一个类似，有时候风格有问题，预览是空白的，调试器对问题什么都不说，我就给你处理不显示，重新编译也解决不了问题，只能强行退出重新打开；和上一个类似，调试器里报的错误往往没什么用，因为驴头不对马嘴，很难定位问题。Android端的自定义Tabbar刷新时也会随着屏幕下移，是无法绕过的Bug。我写了自定义的Tabbar样式，改成了我自己的Tabbar！导入路径不支持绝对路径。例如，如果你想引用utils/fetch.js，你应该慢慢地../无论组件有多深，都指向根目录。类似地。wxss file @import在导入文件时只能使用相对路径，所以会有这样的情况../../../../utils/fetch . js；静态资源路径不能有汉字，不能加载汉字；。wxs文件不支持ES6，只能用差的ES5写；只有。wxs文件可以导入到。wxml，但不是。js文件？？？在模板{{}}中，甚至连方法都不能执行，只能处理+-*/等简单操作。如果需要过滤数据，需要在。js文件来逐个设置数据，如经常写的。包含(类型)，但是不能运行！不能在。wxs文件，所以不能使用new Date()，只能使用蹩脚的getDate方法，正则化也是如此。要生成一个常规对象，需要使用getRegExp函数getRegExp(pattern}。//package up data(data){ return this。setdata (objtopath (data))}自己。//复制您的方法或生命周期函数your method()中的代码{this。updata ({a: {b: 7}，c:}})针对修改数组指定项时可能出现的跳过数组空白的情况，wx-updata提供了空的符号类型替换和数组的对象路径。有兴趣的可以看看wx-updata。

另外，在使用wx-updata的时候也可以使用原来的setData，尤其是有时候想清空数组的时候，可以获得更好的小程序开发体验。祝大家小程序开发愉快。

4.使用scss编写4.1 webstorm风格的配置方法。wxss风格，我用Webstorm的文件watcher工具来监控和更改scss文件，并编译成。wxss文件实时，感觉更好。在这里我给大家分享一下我的配置:

2,3

然后记得在。gitignore文件:

*.scss*.wxss.map复制代码，这样上传到git时，scss文件就不会上传了~当然，如果你的团队成员需要scss，建议上传git时添加scss文件。

在这个设置之后，一个组件在本地看起来会像这样。

, flags])；.wxs 中可以调用其它 .wxs 文件，并且只能 require 调用 .wxs 文件，引入的文件必须使用相对路径；setData 连一个对象合并都懒得做，如果 data: {a: {b: 1, c: 1}}，那么 setData({a: {b: 2}}) 就会丢失 a.c 的值，真是让人火冒三丈啊，还要 setData({['a.b': 2]}) 这样才行；IOS 上 Date 对象获取任意时间参数比如 getDay、getTime 都为 NaN，是因为 IOS 的 Date 构造函数不支持 2018-04-26 这种格式的日期，必须转换为 2018/04/26 这种格式才会显示正常；开发版小程序有时候请求莫名其妙发不出去，右上角三个点 enable debug 打开「开发调试」之后就莫名其妙能发出去请求了，在多部手机上都是这样，不明真相。2. 微信请求 Promise 化2.1 使用现成的库

安装 Promise 库 wx-promise-pro，记得一定要带 -s 或 --production，要不然无法构建成功。

npm i -S wx-promise-pro复制代码

然后在 app.js 中：

import { promisifyAll } from 'wx-promise-pro'promisifyAll() // promisify all wx apiApp({ ... })复制代码

之后就可以正常使用了：

wx.pro.showLoading({ title: '加载中', mask: true}) .then(() => console.log('in promise ~'))复制代码2.2 自己实现

其实我们可以自己来实现一个这样的库，原理很简单，以原生 API 的 wx.request 为例：

// 原生 API 使用方式wx.request({ url: '', // 请求的 url data: {}, // 参数 method: '', // post、get success: res => { // 请求成功回调函数，res为回调参数 }, fail: res => { // 请求失败回调函数，res为回调参数 }})复制代码

如果我们将其 Promise 化，应该的调用方式希望是：

// Promise 化后的期望使用方式wx.pro.request({ url: '', // 请求的 url data: {}, // 参数 method: '' // post、get}) .then(res => { // 请求成功回调函数，res为回调参数 }) .catch(res => { // 请求失败回调函数，res为回调参数 })复制代码

并且 then 函数返回的是一个 Promise 对象，让这个函数可以不断链式调用下去，所以首先需要 new 出来一个 Promise 对象：

function request(opt) { return new Promise((resolve, reject) => { wx.request({ ...opt, success: res => { resolve(res)}, fail: res => {reject(res)} }) })}复制代码

这里代码我们可以进一步改进，由于 success、fail 这里传入的参数只是由 resolve、reject 方法执行了下，所以可以直接传入 resolve、reject 方法即可。

另外，由于其他小程序原生 API 格式一致，所以我们可以使用柯里化方法，来将其他需要进行 Promise 化的 API 进行处理：

function promisify(api) { return (opt = {}) => { return new Promise((resolve, reject) => { api({ ...opt, fail: reject, success: resolve }) }) }}复制代码

然后，将柯里化方法执行的结果作为新的 Promise 化的 API 挂载到 wx.pro 对象上：

// 将指定 API 进行 Promise 化wx.pro.request = promisify(wx.request)// 使用wx.pro.request({...}) .then(...)复制代码

然后为了方便我们使用其他方法，可以循环将 wx 对象上可以被 Promise 化的方法比如 request、scanCode、showToast、getUserInfo 等一一挂载到 wx.pro 对象上，使用时可以直接 wx.pro.xx，由于这个方法执行返回的是一个 Promise 对象，因此可以像其它 Promise 化的对象那样使用。

事实上，不知不觉，我们就自己实现了 wx-promise-pro 的源码，这个库的核心代码也就是上面那这几行 

2.3 在项目中使用

有了上面的工具后，我们可以将其使用在项目中，为了不在项目中遍布 wx.request 或 wx.pro.request 这里可以简单进行封装，新建两个文件如下：

// utils/api/fetch.js 封装请求方法、请求拦截器const app = getApp()const BaseUrl = 'http://172.0.0.1:7300/mock'const TokenWhiteList = [ '/app/user/get-by-code' // 不需要鉴权的api手动添加到这里]/** * 设置请求拦截器 * @param params 请求参数 */const fetch = (params = {}) => { // 拦截器逻辑 if (!TokenWhiteList.includes(params.url)) { params.header = { 'content-type': 'application/json', // 默认值 'token': app.globalData.token || '' } } if (params.url.startsWith('/')) { // 拼接完整URL params.url = BaseUrl + params.url } // 返回promise return wx.pro.request({ ...params }) .then(({ data: { code, message, data } }) => { // ... 各种异常情况的逻辑处理 // 与后端约定 code 20000 时正常返回 if (code === 20000) return Promise.resolve(data) return Promise.reject(message) })}export { fetch }复制代码

然后再将所有 API 封装到单独的文件中集中管理：

// utils/api/apis.js 封装所有请求 APIimport { fetch } from './fetch'/* 根据微信code获取用户信息 */const appUserGetByCode = ({ code } = {}) => fetch({ url: '/app/user/get-by-code', data: { code }})/* 扫码登录 */const appUserQrLogin = ({ qrCode } = {}) => fetch({ method: 'POST', url: '/app/user/qr-login', data: { qrCode }})/* 个人信息 */const appUserInfo = () => fetch({ url: '/app/user/info'})/* 系统参数获取，数据字典 */const appSysParamListByParam = () => fetch({ url: '/app/sys-param/list-by-param'})/* 数据字典所有 */const appSysParamListAll = () => fetch({ url: '/app/sys-param/list-all'})export { appSysParamListAll, // 数据字典所有 appSysParamListByParam, // 系统参数获取，数据字典 appUserGetByCode, // 根据微信code获取用户信息 appUserQrLogin, // 扫码登录 appUserInfo // 个人信息}复制代码

在要使用 API 的地方就可以这样引入：

import * as Api from '../../utils/api/apis.js' // 相对路径// 使用方式Api.appSysParamListAll() .then(({ dataList }) => this.upData({ sysParamList: dataList })) .then(() => { const keyList = this.data.sysParamList.map(T => T.key) this.upData({ keyList, formData: { keys: keyList } }) })复制代码

使用方式就很舒服，这里使用到了 upData，就是下面我要介绍的内容，是在下非常推介的小程序工具～ 

3. setState 修改 data 中想修改对象的属性

在小程序中，data 是不能直接操作的，需要使用 setData 函数。鉴于微信小程序开发时 setData 的使用体验十分蹩脚，我使用了个库函数 wx-updata，这个库函数在开发的时候对我很有帮助，这里特意推介给大家。

3.1 为什么要使用 wx-updata

你在使用 setData 的时候，是不是有时候觉得很难受，举个简单的例子：

// 你的 datadata: { name: '蜡笔小新', info: { height: 140, color: '黄色' }}复制代码

如果要修改 info.height 为 155，使用 setData 要怎么做呢：

// 这样会把 info 里其他属性整不见了this.setData({ info: { height: 155 } })// 你需要取出 info 对象，修改后整个 setDataconst { info } = this.datainfo.height = 155this.setData({ info })复制代码

似乎并不太复杂，但如果 data 是个很大的对象，要把比较深且不同的对象、数组项挨个改变：

data: { name: '蜡笔小新', info: { height: 140, color: '黄色', desc: [{ age: 8 }, '最喜欢大象之歌', '靓仔', { dog: '小白', color: '白色' }] }}复制代码

比如某个需求，需要把 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

其中，我们需要注意的是。js，。json，。scss和。wxml文件。另一份文件。属性后，wxss将自动生成并更新。scss文件，而。wxss.map是插件自动生成的映射关系，不管。

如果不使用webstorm，可以直接执行命令sass --watch index . scss:index . wxs S-expanded。如果命令行是关闭的，sass命令就不会监听文件更改和编译，所以最好使用编辑器的插件。

同样，也可以使用less和stylus等预编译语言。

4.2 Visual Studio代码配置方法当然，万能的VSC也可以做这个功能。搜索并下载插件easy sass，然后在setting.json中修改/添加配置:

"easysass.formats & quot：

下载到本地是压缩包。解压后将iconfont.css文件复制到微信小程序的styles文件夹中(也可以放在你想放的地方，比如字体)，将后缀改为wxss

app.wxss中的样式介绍:

@ import & quotstyles/icon font . wxss & quot；；复制代码，然后就可以使用刚刚添加的图标了。wxml。Web使用I标记，applet使用text标记:

& lttext class = & quoticon font icon -my-编辑& quotstyle = & quot颜色:蓝色& quot& gt& lt/text & gt；如果你想在复制代码后添加一个新的图标，你应该下载新的iconfont.css文件，在本地重命名并覆盖它，并再次经历这个过程。

微信app下载微信是一款手机通讯软件，支持通过手机网络发送语音消息、视频、图片、文字。微信可以单独聊天，也可以群聊，根据地理位置找到附近的人，带给你全新的移动通信体验。快来拯救下载体验给有需要的朋友吧！

下载

这几篇文章你可能也喜欢：

• 8分钟开始微信小程序开发（微信小程序开发教程概述）
• 学习如何用pixi.js开发微信游戏(pixi.js教程)
• 学习如何用pixi.js开发微信游戏(python开发微信游戏)。
• 强烈推荐几个简单实用的微信小程序开发小技巧(微信小程序开发软件教程)。
• 让微信小程序开发如鱼得水的方法（微信小程序开发详细教程）

本文由主机参考刊发，转载请注明：强烈推荐几个简单实用的微信小程序开发小技巧(微信小程序开发入门课程) https://zhujicankao.com/122362.html