# 开发 \| 只需 2 分钟！带你玩转小程序新语言 WXS
- 作者：Astrian
- 发布时间：2017-09-05 20:00
- 原文：https://www.ifanr.com/minapp/903646
最近，微信官方宣布推出 WXS（WeiXin Script）。
WXS 是微信官方推出的一种脚本语言。引入 WXS 后，**小程序开发者可以将数据处理代码进行拆分，打造逻辑更灵活的小程序**。
小程序开发者应该如何在小程序里，使用 WXS 呢？知晓程序（微信号 zxcx0101）今天就来一步步教你如何使用 WXS。
关注「知晓程序」微信公众号，在微信后台回复「开发」，获取小程序全套开发经验。
### WXS 的语法是怎样的？
**WXS 的语法与 JavaScript 如出一辙**，在 JS 中可用的语句，WXS 几乎都可以支持。
例如，你可以在 WXML 中，写如下代码：
```
var foo = "Hello World";
var bar = function(d) {
console.log(d)
}
console.log('Hello')
module.exports = {
foo: foo,
bar: bar
};
{{hello.foo}}
```
在小程序中，它可以输出「Hello World」；在调试控制台中，我们也可以看到「Hello」的提示语句出现。
某种程度上，**我们也可以将 WXS 视作插入在 WXML 中的 JS 代码**，虽然二者在本质上是两种语言。
需要注意的是，**小程序中的 WXS 无法使用小程序的 API 接口，以及全局函数**。WXS 只能读取 JS 中的 `data`，并加以处理、使用。
```
var foo = "Hello World";
var bar = function(d) {
console.log(d)
}
console.log('Hello')
module.exports = {
foo: foo,
bar: bar
};
{{hello.bar(variableFromJS)}}
```
同时，只有在 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 代码。
```
var foo = "Hello World";
var bar = function(d) {
console.log(d)
}
console.log('Hello')
module.exports = {
foo: foo,
bar: bar
};
```
#### 2. 引用 WXS 文件
新建并编写 WXS 文件后，在 WXML 的 WXS 标签中，利用 `src` 属性，引用相对位置的 WXS 文件。
```
```
需要注意的是，**每一个 WXS 模块，都需要用 `module` 标签进行命名**。命名模块后，开发者工具才能正常进行编译、在 WXML 中引用模块中的变量与函数。
另外，**小程序的条件渲染对 WXS 是无效的**。
也就是说，即使将 WXS 代码包裹在未渲染的代码中，只要渲染的 WXML 部分调用了此模块，这段 WXS 代码依然会被加载。
关于 WXS，我们就说到这里，希望得知更多有关 WXS 的信息，可以查阅官方文档。
关注「知晓程序」微信公众号，在微信后台回复「文档」，获取小程序官方技术文档地址。
**关注「知晓程序」公众号 👇**
- 在微信后台回复「**开发**」，获取小程序全套开发经验。
- 在微信后台回复「**666**」，加入知晓开发联盟。
