>[success] # WXS 1. `WXS`是小程序开发语言中的一种文件类型，它是一种用于在微信小程序中描述页面的语言。`WXS`是`WeiXin Script`的缩写，是一种 `JavaScript` 语法的变体，用于提供数据绑定、属性操作等功能。 2. `WXS` 与 `JavaScript `是不同的语言，有自己的语法，并不和 `JavaScript `一致。（不过基本一致） >[info] ## 为什么产生wxs 在小程序里面的**Mustache(大胡子语法中)** 是不能使用Page 中定义的函数调用，例如下面的写法是不生效的 ~~~ <view>{{fomatter(123)}}</view> ~~~ * index.js ~~~ Page({ fomatter(val){ return val+$ } }) ~~~ 产生这个问题的原因小程序的运行环境分为逻辑层和视图层，分别由2个线程管理，其中： * WXML 模板和 WXSS 样式工作在视图层，界面使用 WebView 进行渲染 * JavaScript代码工作在逻辑层，运行在JsCore或v8里 这样设计主要原因是**逻辑和视图分离，即使业务逻辑计算非常繁忙，也不会阻塞渲染和用户在视图层上的交互** 同样产生的问题是 * 视图层（webview）中不能运行JS，而逻辑层JS又无法直接修改页面DOM，数据更新及事件系统只能靠线程间通讯，但跨线程通信的成本极高，特别是需要频繁通信的场景 整个交互过程如图，**touchmove 事件从视图层（Webview）传递到逻辑层，中间会由微信客户端（Native）做中转，逻辑层处理 touchmove 事件，计算需移动的位置，然后再通过 setData 传递到视图层，中间同样会由微信客户端（Native）做中转**   这类损耗是存在的 但小程序视图层运行也是存在`webview`，也是有`js`环境的，只不过过去不给开发者开放，将某些场景交还回`webview` 就可以解决问题，但对于小程序平台而言，大量开放webview里的js编写，违反了它的初衷，比如开发者会直接操作dom，影响性能体验。所以小程序平台提出一种新规范，限制webview里可运行的js的能力。这就是wxs 由来 >[info] ## 使用场景 WXS具备如下特征： * WXS是可以在视图层（webview）中运行的JS * WXS无法直接修改业务数据，仅能设置当前组件的`class`和`style`，或者对数据进行格式化。要修改逻辑层的数据，需要通过 callMethod，传递参数给逻辑层 * WXS是被限制过的JavaScript，可以进行一些简单的逻辑运算 * WXS可以监听touch事件，处理滚动、拖动交互 故可以得出WXS的适用场景，主要包括： * 用户交互频繁、仅需改动组件样式（比如布局位置），无需改动数据内容的场景，比如侧滑菜单、索引列表、滚动渐变等 * 数据格式处理，比如文本、日期格式化，或者国际化。通过WXS可以模拟实现Vue框架的[过滤器](https://cn.vuejs.org/v2/guide/filters.html) >[info] ## 特点 WXS使用的限制和特点： * WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行； * WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API； * 由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备 上二者运行效率无差异； >[info] ## 使用 1. WXS 代码可以编写在 wxml 文件中的`<wxs>`标签内，或以`.wxs`为后缀名的文件内。 2. 每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见； 3. 一个模块要想对外暴露其内部的私有变量与函数，只能通过 `module.exports` 实现； >[danger] ##### `<wxs>`标签内 1. 在`wxs` 标签内使用很像 h5 时候声明 `script` 标签 2. 注意点 只能编写`CommonJS`，像`es6` 的箭头函数，对象省略key 和value 的都不能使用 ~~~html <!-- 方式一 通过标签形式 --> <wxs module="format"> function formatPrice(price) { return "¥" + price } // 必须导出后, 才能被其他地方调用: 必须使用CommonJS导出 module.exports = { formatPrice: formatPrice } </wxs> <view> <text> {{format.formatPrice(100)}} </text> </view> ~~~ >[danger] ##### `.wxs` 文件导入 1. 在根目录创建一个`utils` 编写一个用来测试 `foo.wxs` 文件 | 属性名 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | module | String | | 当前`<wxs>`标签的模块名。必填字段。 | | src | String | | 引用 .wxs 文件的相对路径。仅当本标签为**单闭合标签**或**标签的内容为空**时有效 | ~~~js function foo() { var str = "123" return Number(str) } module.exports = { foo: foo } ~~~ 2. 使用时候 ~~~html <!-- 导入wxs 文件 --> <wxs module="foo" src="/utils/foo.wxs"></wxs> <view>{{ foo.foo() }}</view> ~~~ >[info] ## 使用require 导入 ~~~ // /pages/tools.wxs var foo = "'hello world' from tools.wxs"; var bar = function (d) { return d; } module.exports = { FOO: foo, bar: bar, }; module.exports.msg = "some msg"; ~~~ ~~~ // /pages/logic.wxs var tools = require("./tools.wxs"); console.log(tools.FOO); console.log(tools.bar("logic.wxs")); console.log(tools.msg); ~~~ >[info] ## 注意说明 wxs 可以理解为被封印的`js` 引擎，因此提供的功能并不是传统意义上的全部js，需要[参考](https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/02variate.html)小程序文档所来看开放的功能