# [WXML](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxs/) 語法 WXML（WeiXin Markup Language）是框架設計的一套標簽語言，結合[基礎組件](https://mp.weixin.qq.com/debug/wxadoc/dev/component/)、[事件系統](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html)，可以構建出頁面的結構。 ### [數據綁定](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/data.html) 使用 `{{}}` 語法綁定數據。 ```html <!--wxml--> <view> {{message}} </view> ``` ```js // page.js Page({ data: { message: 'Hello MINA!' } }) ``` # [WXS](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxs/) 語法 WXS（WeiXin Script）是小程序的一套腳本語言，結合 `WXML`，可以構建出頁面的結構。 ### 注意 1. wxs 不依賴于運行時的基礎庫版本，可以在所有版本的小程序中運行。 2. wxs 與 javascript 是不同的語言，有自己的語法，并不和 javascript 一致。 3. wxs 的運行環境和其他 javascript 代碼是隔離的，wxs 中不能調用其他 javascript 文件中定義的函數，也不能調用小程序提供的API。 4. wxs 函數不能作為組件的事件回調。 5. 由于運行環境的差異，在 iOS 設備上小程序內的 wxs 會比 javascript 代碼快 2 ~ 20 倍。在 android 設備上二者運行效率無差異。 以下是一些使用 WXS 的簡單示例： ### 頁面渲染 ``` <!--wxml--> <wxs module="m1"> var msg = "hello world"; module.exports.message = msg; </wxs> <view> {{m1.message}} </view> ``` 頁面輸出： ``` hello world ``` ### 數據處理 ``` // page.js Page({ data: { array: [1, 2, 3, 4, 5, 1, 2, 3, 4] } }) ``` ``` <!--wxml--> <!-- 下面的 getMax 函數，接受一個數組，且返回數組中最大的元素的值 --> <wxs module="m1"> var getMax = function(array) { var max = undefined; for (var i = 0; i < array.length; ++i) { max = max === undefined ? array[i] : (max >= array[i] ? max : array[i]); } return max; }; module.exports.getMax = getMax; </wxs> <!-- 調用 wxs 里面的 getMax 函數，參數為 page.js 里面的 array --> <view> {{m1.getMax(array)}} </view> ``` 頁面輸出： ``` 5 ```