省时省力的微信小程序开发tips！

引入less、sass

微信小程序引入less、sass无需任何第三方工具，官方原生即可支持。

此处以引入less为例，在project.config.json文件中配置useCompilerPlugins即可。

{
  "description": "项目配置文件",
  "setting": {
    ...
    // 配置 less、sass
    "useCompilerPlugins": [
      "less"
    ]
  }
}

配置完成后，清一下缓存，不放心的可以重启一下开发者工具，即可在写代码的时候自由使用less了。

不过要注意，在使用less语法时，样式文件的后缀应为.less，而不再是.wxss。

使用绝对路径

微信小程序默认使用相对路径引入文件，在多层文件夹时需要很长前缀"../../../"。若想解决这一问题，有两种方式：

1.在app.json里面加上如下配置。

 "resolveAlias": {
    "@/*": "/*"
  }

然后在页面使用时按如下引入即可。

 const util = require("@/utils/util");

官方文档中明确说了支持这种配置，但我试了后报错，也不知道为啥。

2.在app.js文件中，写一个全局方法

App({
    // 真的就这一行
    require : function(url){return require(`${url}`)},
    onLaunch : function(){
    }
});

然后其他任何路径下的 js 引用如下

const app = getApp();  
// 除了不是 / 开头，这真的就是个绝对路径
const api = app.require('utils/api.js');
​
Page({
    onLoad : function(){
    }
});

使用async/await

1.在微信开发工具上勾选增强编译或将 JS 代码编译成 ES5

在 1.02.1904282 以及之后版本的开发工具中，增加了增强编译的选项来增强 ES6 转 ES5 的能力，启用后会使用新的编译逻辑以及提供额外的选项供开发者使用。

而在 1.05.2106091 版本之后，原有的ES6 转 ES5 和 增强编译 选项统一合并为将 JS 代码编译成 ES5，此功能和原有的增强编译逻辑一致。

2.引入第三方库regenerator

用过async/await组合就知道，比promise好用，但是微信小程序比较新的版本才兼容，微信7.0.11及以下的版本的不兼容，会报错。不过可以用facebook提供的regenerator-runtime，可以解决这个问题。

安装依赖：

npm i regenerator-runtime -S

在需要使用async、await关键字的地方引入regenerator-runtime。

const regeneratorRuntime = require('regenerator-runtime') 

new Date跨平台兼容

在Andriod使用new Date(“2023-08-10”)没有问题，但是在IOS下识别不出来，因为IOS下不能识别这种格式，需要用2018/05/30格式。

1.将分隔符'-'换成'/'

const dateStr = time.replace(/-/g, "/")
const date = new Date(dateStr)

2.使用moment插件进行日期转换

const date = moment(time)

在WXML中直接调用函数

1.利用WXS实现函数调用

在WXML(插值语法)中是不能直接调用函数的，但是某些情况, 我们希望可以使用函数来处理WXML中的数据，这个时候就需要使用WXS写法。

WXS有两种写法：

方式一: 写在<wxs>标签中

方式二: 写在以.wxs结尾的文件中

我们常用方式二，在项目根目录下创建一个utils文件夹, wxs文件写在这里。

// format.wxs
​
// wxs中不能写ES6的语法: 例如箭头函数
function formatPrice(price) {
  return "¥" + price
}
​
// 需要导出函数, 导出只能使用CommonJs规范
module.exports = {
    // 对象中也不能使用对象的增强写法
    formatPrice: formatPrice
}
​

在wxml文件中调用如下：

<!-- model声明当前wxs标签的模块名,src引入wxs文件 -->
<wxs module="format" src="/utils/farmat.wxs"></wxs>
​
<view>{{ format.formatPrice(50) }}</view>
​

2.wxml文件中不调用函数，那就在js文件中处理好然后再在模板中渲染。

this.setData({ price: this.formatPrice(this.data.price) })

web-view打开pdf跨平台兼容

小程序中使用web-view打开pdf，IOS 可以正常打开，但Android 打开为空白，此问题可使用wx.downloadFile和wx.openDocument解决，具体代码如下。

wx.downloadFile({
  url: 'https://.../XXX.pdf', //要预览的 PDF 的地址
  success: function (res) {
    if (res.statusCode === 200) { //成功
      var Path = res.tempFilePath //返回的文件临时地址，用于后面打开本地预览所用
      wx.openDocument({
        fileType: 'pdf', // 文件类型
        filePath: Path, //要打开的文件路径
        success: function (res) {
          console.log('打开 PDF 成功');
        }
      })
    }
  },
  fail: function (err) {
    console.log(err); //失败
  }
})

setData注意事项

1.小程序里面的data数据太多也会影响小程序的性能，所以不是任何东西都需要放到data里面，像一些常量不参与页面渲染的，我们其实可以放到最外层。

const app = getApp()
const pageSize = 10
Page({
  data:{}
})

2.不要过于频繁调用 setData，应考虑将多次 setData 合并成一次 setData 调用。

3.在更新列表的某一个数据时，不要用 setData 进行全部数据的刷新。查找对应 id 的那条数据的下标（index是不会改变的），用 setData 进行局部刷新。

this.setData({
    [`list[${index}]`] = newList[index]
})

其他注意点

1.wx:if、wx:for这些没有样式意义的语法尽量使用block

2.如果不希望某个页面被转发，需删除onShareAppMessage代码块，即使onShareAppMessage里没有任何代码也要删除。

3.小程序页面栈最多十层

wx.navigateTo跳转会把当前页面保存到页面栈中，而小程序页面栈最多十层，当从第10个页面wx.navigateTo第11个页面时，是无法跳转过去的。