微信小程序开发知识

WXS

• 2020.10.31

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

注意

1. WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。

2. WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。

3. WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API(即wxs文件中无法使用wx.xxx)。

4. WXS 函数不能作为组件的事件回调。

5. 由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

TIP

第一点: wxs里面的代码是不需要去做新老版本兼容的。

第二点: 类似 const fn = () => {}等ES6语法在wxs中是不支持的。

第四点: 在wxml文件中是不支持对bindtap等事件绑定wxs中定义的函数的,交互等事件只能写在js文件中。

第五点: 虽然在android中效率无差异,但是某些工具函数等只跟页面显示逻辑相关的方法可以放在wxs文件中实现,这样可以加快在ios中的速度。

引申: 为什么WXS快呢?

由于 WXS 与 WXML 是在同一个线程运行的，避免了跨线程通信的开销。(也就仅此一点原因)

引用npm包

• 2020.11.03

小程序中目前已支持使用npm包来安装自定义插件,在安装前需要先安装Node.js,执行安装命令后需要在项目开发者工具菜单上,点击工具---->构建npm。

引申: 构建npm这个步骤到底发生了什么？

我们安装的npm包,执行构建命令之后会生成一个node_modules文件夹,在这个文件夹下面会放置着我们安装的包。在引用的时候,需要我们在用到目录中配置json。类似如下示例:

{
  "usingComponents": {
    "mp-cell": "weui-miniprogram/cell/cell"
  }
}

配置好后,我们看到组件的地址是直接以文件路径开始的,默认会去在项目的miniprogram_npm这个文件夹下面去找对应的文件。这也就是构建npm后使用的本质,小程序实际上读取的是miniprogram_npm这个目录下的文件,而构建npm命令执行时,把 node_modules目录下的代码拷贝到了miniprogram_npm目录下。

常见问题

async语法在小程序中默认是不支持的,如何开启支持?

1. 需要在小程序开发工具里面本地设置开启 增强编译 。