微信小程序中的wxs作用

1、小程序的架构

微信小程序的架构分为 app-service 和 page-frame，分别运行于不同的线程。

你在开发时写的所有 JS 都是运行在 app-service 线程里的，而每个页面各自的 WXML/WXSS 则运行在 page-frame 中。

app-service 与 page-frame 之间通过桥协议通信（包括 setData 调用、canvas指令和各种DOM事件），涉及消息序列化、跨线程通信与evaluateJavascript()。

这个架构的好处是：分开了业务主线程和显示界面，即便业务主线程非常繁忙，也不会阻塞用户在 page-frame 上的交互。一个小程序可以有多个 page-frame （webview），页面间切换动画比SPA更流畅。

坏处是：在 page-frame 上无法调用业务 JS。跨线程通信的成本很高，不适合需要频繁通信的场景。业务 JS 无法直接控制 DOM。

2、wxs的作用

针对微信小程序架构的缺点，微信团队推出了 WXS。

WXS 就是在 page-frame 中运行的 JS，可以对 view 数据做一些变换。

WXS 对性能的贡献就只有一点：与 WXML 是在同一个线程运行的，避免了跨线程通信的开销

简单来说就是可以在wxml里使用js

 3、wxs的使用

新建的wxs文件

// /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";

wxml里引用

<!-- page/index/index.wxml -->   wxs标签引入
<wxs src="./../tools.wxs" module="tools" />
<view>{{tools.msg}}</view>
<view>{{tools.bar(tools.FOO)}}</view>

wxs里引用其他wxs文件

// /pages/logic.wxs       wxs文件引入
var tools = require("./tools.wxs");