强烈推荐的几个简单实用的微信小程序开发小技巧(有哪些简单实用的微信小程序开发小技巧强烈推荐)

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

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

开发者工具版本: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文件，所以不能更新date()。只能用蹩脚的getDate方法，正则性也一样。要生成一个正则对象，需要使用getRegExp函数getRegExp(pattern}，//自己封装up data(data){ return this . setdata(objtopath(data))}，//复制你的方法中或者生命周期函数your method(){ this . up data({ a:{ b:7 }，c:}})中的代码。对于在修改数组的指定项时可能跳过数组的空格的情况，wx-updata提供了Empty的符号类型占位符，以及数组的对象路径。有兴趣可以看看wx-updata。为什么我在开发微信小程序的时候放弃setData而使用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-s expanded。如果命令行是关闭的，sass命令就不会监控文件的变化并进行编译，所以还是用编辑器的插件比较好。

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

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

"easysass.formats ：

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

app.wxss中的样式介绍:

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

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

以上是强烈推荐的几个简单实用的微信小程序开发技巧的细节。请多关注主机参考其他相关文章！

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

• 开发微信小程序需要多少钱？价格贵吗？(微信小程序的开发一般要花多少钱？价格贵吗？)
• 了解如何用pixi.js开发微信游戏(pixijs微信游戏)
• 如何让微信小程序发展如鱼得水(有什么办法让微信小程序发展如鱼得水)
• 总结小程序开发中遇到的问题(总结小程序开发中遇到的问题)
• 微信小程序开发(1)微信开发者工具及小程序框架介绍(微信小程序官方开发工具)

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