>[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)小程序文檔所來看開放的功能