微信小程序中的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");