【小程序】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使用 、 節點操做 、 頁面跳轉 、 緩存

  前端架構淺談

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