【小程序】wxs使用

wxs使用

WXS（WeiXin Script）是小程序的一套腳本語言，結合WXML，可以構建出頁面的結構。

wxs可以說就是為了滿足能在頁面中使用js存在的，在wxml頁面中，只能在插值{{ }}中寫簡單的js表達式，而不能調用方法，例如想獲得某個時間的年份。

雖然也可以在page的data對象中先把這個年份定義好賦給某個變量，然后在頁面中使用這個變量，但是如果這樣的變量多了，代碼就會很臃腫，可讀性不高，后續維護也麻煩。

相對來說wxs就是彌補了這樣的短處。

注意

• wxs 不依賴於運行時的基礎庫版本，可以在所有版本的小程序中運行。
• wxs 與 javascript 是不同的語言，有自己的語法，並不和 javascript 一致。
• wxs 的運行環境和其他 javascript 代碼是隔離的，wxs 中不能調用其他 javascript 文件中定義的函數，也不能調用小程序提供的API。
• wxs 函數不能作為組件的事件回調。
• 由於運行環境的差異，在 iOS 設備上小程序內的 wxs 會比 javascript 代碼快 2 ~ 20 倍。在 android 設備上二者運行效率無差異。

在 filters.wxs 文件中

// filters.wxs var getYear = function (date) { date = getDate(date) || getDate() return date.getFullYear() }, module.exports = { getYear: getYear } 

在 trade/trade.wxml 文件中

<!-- trade/trade.wxml --> <wxs module="filters" src="filters.wxs"></wxs> <view class="year-title" >{{filters.getYear(tradeTime)}}年</view> 

從上述代碼中，可以看到wxs語言的寫法與js差不多，基本上我們在寫的時候，可以沿用js的寫法，但是個別細節部分也需要注意。例如wxs的getDate(date) 和 js的new Date(date)

WXS 語言目前共有以下幾種數據類型：

• number ： 數值
• string ：字符串
• boolean：布爾值
• object：對象
• function：函數
• array : 數組
• date：日期
• regexp：正則

在使用中，我們可以閱讀官方文檔查看具體語法wxs數據類型

 

----------------------------------------

小程序系列：

  前言

  項目結構

  生命周期

  請求與封裝

  數據綁定

  事件

  基礎使用： component使用 、 wxs使用 、 節點操作 、 頁面跳轉 、 緩存

  前端架構淺談

----------------------------------------