微信小程序WXS特征及適用場景
2021-07-26 10:42:32

記一下小程序的wxs相關(guān)知識(shí)

WXS（WeiXin Script）是微信創(chuàng)造的一套腳本語言，它的官方說法是：“WXS 與 JavaScript 是不同的語言，有自己的語法，并不和 JavaScript 一致”。

WXS具備如下特征:

• 是可以在視圖層（webview）中運(yùn)行的 JS

• 無法修改業(yè)務(wù)數(shù)據(jù)，僅能設(shè)置當(dāng)前組件的class和style

• 是被限制過的 JavaScript，可以進(jìn)行一些簡單的邏輯運(yùn)算

• 可以監(jiān)聽 touch 事件，處理滾動(dòng)、拖動(dòng)交互

適用場景:

• 用戶交互頻繁、僅需改動(dòng)組件樣式（比如布局位置），無需改動(dòng)數(shù)據(jù)內(nèi)容的場景，比如側(cè)滑菜單、索引列表、滾動(dòng)漸變等

• 純粹的邏輯計(jì)算，比如文本、日期格式化，通過 WXS 可以模擬實(shí)現(xiàn) Vue 框架的過濾器, 如下是一個(gè)通過 wxs 便捷實(shí)現(xiàn)首字母大寫的示例

1. <wxs module="m1">

2. // 首字母大寫

3. var capitalize = function(value) {

4. if (!value) return ''

5. value = value.toString()

6. return value.charAt(0).toUpperCase() + value.slice(1)

7. }

8. module.exports = {

9. capitalize: capitalize

10. }

11. </wxs>

12. <view class="content">

13. <view class="text-area">

14. <!-- title 為當(dāng)前頁面 data 中定義的初始數(shù)據(jù) -->

15. <text class="title">{{m1.capitalize(title)}}</text>

16. </view>

17. </view>