微信小程式WXS特徵及適用場景

• 2019 年 11 月 6 日
• 筆記

記一下小程式的wxs相關

WXS（WeiXin Script）是微信創造的一套腳本語言，它的官方說法是：「WXS 與 JavaScript 是不同的語言，有自己的語法，並不和 JavaScript 一致」。

WXS具備如下特徵:

• 是可以在視圖層（webview）中運行的 JS
• 無法修改業務數據，僅能設置當前組件的class和style
• 是被限制過的 JavaScript，可以進行一些簡單的邏輯運算
• 可以監聽 touch 事件，處理滾動、拖動交互

適用場景:

• 用戶交互頻繁、僅需改動組件樣式（比如布局位置），無需改動數據內容的場景，比如側滑菜單、索引列表、滾動漸變等
• 純粹的邏輯計算，比如文本、日期格式化，通過 WXS 可以模擬實現 Vue 框架的過濾器, 如下是一個通過 wxs 便捷實現首字母大寫的示例

html  <wxs module="m1">    // 首字母大寫    var capitalize = function(value) {      if (!value) return ''      value = value.toString()      return value.charAt(0).toUpperCase() + value.slice(1)    }    module.exports = {      capitalize: capitalize    }  </wxs>  <view class="content">    <view class="text-area">      <!-- title 為當前頁面 data 中定義的初始數據 -->      <text class="title">{{m1.capitalize(title)}}</text>    </view>  </view>