小程序之wxs語法

wxs

官方解釋

1. WXS 與 JavaScript 是不一樣的語言，有本身的語法，並不和 JavaScript 一致。

2. WXS 的運行環境和其餘 JavaScript 代碼是隔離的，WXS 中不能調用其餘 JavaScript 文件中定義的函數，也不能調用小程序提供的API。

3. WXS 函數不能做爲組件的事件回調。

4. 因爲運行環境的差別，在 iOS 設備上小程序內的 WXS 會比 JavaScript 代碼快 2 ~ 20 倍。在 android 設備上兩者運行效率無差別

 

使用方法

1. wxs 代碼能夠寫在wxml 文件中 的<wxs>標籤內， 或者 以 .wxs 爲後綴名的文件內。(ps: 通常建議寫在 .wxs 文件中）

2. 每一個 .wxs 文件 或者 <wxs> 標籤都是一個單獨的模塊， 當咱們想在外部引入其中的私有變量或者函數時， 須要 module.exports 實現。

示例代碼：

1. 首先在tools.wxs 文件中這麼編寫

  // /pages/tools.wxs
  var foo = "'hello world' from tools.wxs";
  var bar = function (d) {
   return d;
 }
  module.exports = {
   FOO: foo,
   bar: bar,
 };
 module.exports.msg = "some msg";

2. 而後在 wxml 頁面中引用

 <wxs src="./tools.wxs" module="tools" />
 <view>{{tools.FOO}}</view>
 <view>{{tools.bar(5)}}</view>
 <view>{{tools.msg}}</view>

3. 頁面中會顯示

 

注意事項

wxs 跟js 相比仍是有不少限制的。

好比：

• 它不支持 es6 語法， 因此咱們日常編碼過程當中使用的 解構， 箭頭函數...都是不支持的。

• 定義變量只能用 var 或者不寫 表明全局。由於 let ，cons是 es6 的

• 數據類型 wxs 語法是沒有 symbol null undefined 的。 其餘的數據類型都支持。

  具體都有：

  • number ： 數值

  • string ：字符串

  • boolean：布爾值

  • object：對象

  • function：函數

  • array : 數組

  • date：日期

  • regexp：正則

   

  判斷wxs中的數據類型

  咱們知道 在 js 中判斷數據類型能夠用 typeof && Object.prototype.toString.call（）

   typeof undefined === 'undefined'   // true
   typeof true      === 'bollean'    // true
   typeof 25        === 'number'    // true
   typeof 'shit'      === 'string' // true
   typeof { name: 'mars'} === 'object'  // true
   ​
   // 以及 es6中的Symbol 
   typeof Symbol()  === 'symbol'    // true
   ​
   ​
   typeof function a() {} === 'function'  // true
   ​

  以上6種數據類型都有與之同名的字符串與之對應。 可是 mull是 再也不其中 的

   typeof null === 'object'    // true

  咱們知道當 遇到 Array Date Object... 時 typeof 都會識別爲 object

  此時須要 Object.prototype.toString.call（）

   

  可是在wxs 中 有屬性 constructor 會返回相應數據類型的字符串

  如圖：

   

  更多詳細介紹戳

• <wxs> 模塊只能在定義模塊的 WXML 文件中被訪問到。使用 <include> 或 <import>時，<wxs> 模塊不會被引入到對應的 WXML 文件中。

• <template> 標籤中，只能使用定義該 <template> 的 WXML 文件中定義的 <wxs> 模塊。

使用場景

由於 wxml 的雙括號數據綁定中對錶達式的支持不夠完善，所以咱們能夠用wxs 來加強wxml 的表達式。 也就是能夠在 wxml 中寫函數。

接下來說兩個實際的應用場景的例子

1. 展現天氣進行數據展現

 // index.wxs 
 // 溼度判斷
 humidity: function(h) {
     if (h) {
       return '溼度 ' + h + '%'
    }
     return h
  },
       
   // 風的等級判斷
   windLevel: function(level) {
     if (level === '1-2') {
       return '微風'
    } else {
       return level + '級'
    }
  },
       
   // 風的類型
   wind: function(code, level) {
     if (!code) {
       return '無風'
    }
 ​
     if (level) {
       level = level.toString().split('-')
       level = level[level.length - 1]
       return code + ' ' + level + '級'
    }
     return code
  },

 

2. 由於後臺返回給咱們的數據數組是時間戳, 可是要處理成咱們想要的時間格式，好比：2019-07-17

通常處理是遍歷數組而後對數組中的每一個時間戳對象調用時間轉化函數。

可是在wxs 中 咱們的轉換函數能夠這麼寫

 // utils.wxs
 var formatTime = function (date) {
   var date = getDate(date)
   var year = date.getFullYear();
   var month = date.getMonth() + 1;
   var day = date.getDate();
 ​
 ​
   return ([year, month, day].map(formatNumber).join("-") + " " + [hour, minute].map(formatNumber).join(':'));
 }
 var formatNumber = function (n) {
   n = n.toString();
   return n[1] ? n : "0" + n;
 }
 ​
 module.exports = {
   formatTime: formatTime,
 }
 ​

 // pages/index/index.html
 <wxs src='./utils.wxs' module="utils">
   <block wx:for="{{list}}" wx:key="index"></block>
   <view >{{utils.formateTime(item.time)}}</view>

最終實現效果以下：

 

【完】

 

 

【做者簡介】 Mars 蘆葦科技web前端開發工程師 喜歡 看電影 ，擼鐵 還有學習。擅長 微信小程序開發， 系統管理後臺。訪問 www.talkmnoney.cn瞭解更多。

做者主頁：

github

segmentfault