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

前段时间在下开发了个微信小程序，开发过程中总结了一些我觉得对我有用的小技巧，提炼出来，相当于一个总结复盘，也希望可以帮助到大家。如果对大家确实有帮助，别忘了点赞哦～

微信开发者工具版本：1.03.2006090（2020-06-19）
基础库版本：v2.12.1 (2020-08-04)

1. 开发中可能遇到的坑以及 Tips本来想写个小技巧的，结果我总结了一堆坑，没上手之前完全想象不到微信小程序的开发体验是如此之差、如此之烂，从微信开发者工具到所谓的「全新语言」，都有一种浓浓的半成品的 five 即视感，实在让我 emmm.... 另外我发现网上的小程序文章大部分都是如何使用和如何避坑的实用文，而不是技巧文，这也从侧面反映了小程序的坑多。
在微信小程序原生开发过程中，我不断发出这样的疑问「为什么堂堂技术人才多如牛毛的腾讯，会推出如此 laji」，很多弱智反人类的地方，在两三年前社区就已经提出来，官方回复已经反馈正在修复中，但几年过去了，还是没有音信，官方回复仍然是一句冷冰冰的「已反馈」

微信开发者工具经常热更新不起作用甚至白屏，重新编译也不行，只能强行退出后再次打开；
跟上一条类似，有时候一点样式出错，预览整个都白屏，调试器里也不说哪里的问题，直接就给你弃疗不显示，重新编译也无法解决问题，只能强行退出后再次打开；
跟上一条类似，调试器里报的错经常没什么用，驴头不对马嘴，让人很难定位问题；
Android 端自定义 Tabbar 在下拉刷新的时候，也会跟着屏幕一起往下移，而且是无法绕过的 Bug，自定义 Tabbar 样式都写好了的我又改成自带的 Tabbar 了！
import 的路径不支持绝对路径，比如你希望引用 utils/fetch.js，在不管多深的组件里面你都要慢慢 ../ 点到根目录，同样 .wxss 文件 @import 导入文件时也只能使用相对路径，所以就会出现 ../../../../../../utils/fetch.js 这种东西；
静态资源路径不能有汉字，有汉字就无法加载；
.wxs 文件不支持 ES6，只能使用蹩脚的 ES5 写法；
.wxml 中只能引入 .wxs 文件不能引入 .js 文件？？？
模板 {{}} 中连方法都不能执行，只能处理简单的运算如 + - * /，如果遇到数据需要 filter 的场景，需要在 .js 文件中预先格式化好再一个个 setData，比如经常写的 [2,3,4].includes(type)，居然都跑不起来！
.wxs 文件中无法使用 Date 对象，所以不能 new Date()，只能使用蹩脚的 getDate 方法，正则也是一样，生成正则对象需要使用 getRegExp 函数 getRegExp(pattern[, 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: '',// 请求的 urldata: {},// 参数method: '',// post、getsuccess: res => {// 请求成功回调函数，res为回调参数},fail: res => {// 请求失败回调函数，res为回调参数}})

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

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

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