开发 | 只需 2 分钟！带你玩转小程序新语言 WXS

WXS 是微信官方推出的一种脚本语言。引入 WXS 后，小程序开发者可以将数据处理代码进行拆分，打造逻辑更灵活的小程序。

小程序开发者应该如何在小程序里，使用 WXS 呢？知晓程序（微信号 zxcx0101）今天就来一步步教你如何使用 WXS。

关注「知晓程序」微信公众号，在微信后台回复「开发」，获取小程序全套开发经验。

WXS 的语法是怎样的？

WXS 的语法与 JavaScript 如出一辙，在 JS 中可用的语句，WXS 几乎都可以支持。

例如，你可以在 WXML 中，写如下代码：

执行语句后，在小程序中它可以输出「Hello World」；在调试控制台中，我们也可以看到「Hello」的提示语句出现。

某种程度上，我们也可以将 WXS 视作插入在 WXML 中的 JS 代码，虽然二者在本质上是两种语言。

需要注意的是，小程序中的 WXS 无法使用小程序的 API 接口，以及全局函数。WXS 只能读取 JS 中的 data，并加以处理、使用。

同时，只有在 WXML 中使用 Mustache 语法（双花括号）引用 WXS 模块中的内容，WXS 中的代码才会加载、执行。

如何在小程序项目里开启 WXS？

在最新版的「微信 Web 开发者工具 Beta」中，我们就已经可以开启 WXS 功能了。

需要注意的是，普通的「微信 Web 开发者工具」是没有 WXS 选项的。

关注「知晓程序」微信公众号，回复「我要用工具」，查看「微信 Web 开发者工具 Beta」的下载地址。

在开发者工具中，我们可以这样启用 WXS：

• 进入需要启用 WXS 功能的项目。
• 点击开发者工具右上角的「项目」按钮。
• 在「项目设置」中，勾选「使用 WXS」。

之后，我们就可以在项目中使用 WXS 了。

需要注意的是，无论用户的微信版本是多少，你都可以直接启用 WXS。

开发者工具在编译、上传代码的时候，会自动将你的 WXS 代码进行转义，所以无需担心兼容性问题。

如何使用 WXS？

微信为我们提供了两个使用 WXS 方法：直接插入 WXS 代码，以及引用 WXS 文件。

1. 直接插入 WXS 代码

直接在 <wxs> 标签里，插入 WXS 代码。

2. 引用 WXS 文件

新建并编写 WXS 文件后，在 WXML 的 WXS 标签中，利用 src 属性，引用相对位置的 WXS 文件。

需要注意的是，每一个 WXS 模块，都需要用 module 标签进行命名。命名模块后，开发者工具才能正常进行编译、在 WXML 中引用模块中的变量与函数。

另外，小程序的条件渲染和循环渲染对 WXS 是无效的。

也就是说，即使将 WXS 代码包裹在未渲染的代码中，只要渲染的 WXML 部分调用了此模块，这段 WXS 代码依然会被加载。

关于 WXS，我们就说到这里，希望得知更多有关 WXS 的信息，可以查阅官方文档。

关注「知晓程序」微信公众号，在微信后台回复「文档」，获取小程序官方技术文档地址。