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

最近，微信官方宣布推出 WXS（WeiXin Script）。

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

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

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

WXS 的语法是怎样的？

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

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

<wxs module='hello'>
  var foo = "Hello World";
  var bar = function(d) {
    console.log(d)
  }
  console.log('Hello')
  module.exports = {
    foo: foo,
    bar: bar
  };
</wxs>
<text>{{hello.foo}}</text>

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

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

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

<wxs module='hello'>
  var foo = "Hello World";
  var bar = function(d) {
    console.log(d)
  }
  console.log('Hello')
  module.exports = {
    foo: foo,
    bar: bar
  };
</wxs>
<text>{{hello.bar(variableFromJS)}}</text>

同时，只有在 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 代码。

<wxs module='hello'>
  var foo = "Hello World";
  var bar = function(d) {
    console.log(d)
  }
  console.log('Hello')
  module.exports = {
    foo: foo,
    bar: bar
  };
</wxs>