微信小程序 筆記8 WXS語法

WXS的作用

在傳統的網頁開發中，HTML中是可以寫JavaScript代碼的，而在小程序中，是不允許在WXML文件中寫JavaScript的，但是有些時候，我們需要在wxml中實現一些邏輯的處理。

例子，我們渲染一個數字到wxml中，在wxml文件中根據這個數字來渲染具體星期幾。這時候通過wxml文件中就做不了了，或者只能在JavaScript先計算好再渲染。

如下：

<!--my.wxml-->
<view>
  星期{{daycc}}
</view>

//me.js部分
data: {
    day:3
  },
  onLoad:function(options){
    var daycc=""
    switch(this.data.day){
      case 1:
      daycc="一";
      break;
     case 2:
       daycc = "二";
       break;
     case 3:
       daycc = "三";
       break;
      case 4:
        daycc = "四";
        break;
      case 5:
        daycc = "五";
        break;
      case 6:
        daycc = "六";
        break;
      case 7:
        daycc = "七";
        break;
      default:
        daycc="錯誤";
        break;
    } 
    this.setData({
      daycc:daycc
    })
  },
  

效果是將數字星期幾轉成文字星期幾

那麼使用wxs可以這樣：

<!--me.wxml-->
<wxs module="m">
  var getday=function(day)
  { 
    var daycc=""
    switch(day){
      case 1:
      daycc="一";
      break;
     case 2:
       daycc = "二";
       break;
     case 3:
       daycc = "三";
       break;
      case 4:
        daycc = "四";
        break;
      case 5:
        daycc = "五";
        break;
      case 6:
        daycc = "六";
        break;
      case 7:
        daycc = "七";
        break;
      default:
        daycc="錯誤";
        break;
    } 
    return daycc;
  }
  var demo="演示文字"
  module.exports.getday=getday
  module.exports.demo=demo
</wxs>

<view>
  星期{{m.getday(5)}}
    {{m.demo}}
</view>

其中，最後一行module.exports.getday=getday的意思是將模塊裏的東西暴露出去，供別人調用。

語法爲module.exports.函數名=暴露出去的函數名

那麼出現一個問題，當需要很多東西的時候，一個個暴露出去就很麻煩，那麼可以選擇暴露一個對象，用法如下

module.exports={
getday:getday,
demo:demo
}

也可以在外部使用wxs文件，wxs可以理解爲一個簡化的js，再引用到wxml裏面。

例如：

//me.wxs
var getday=function(day)
  { 
    var daycc=""
    switch(day){
      case 1:
      daycc="一";
      break;
     case 2:
       daycc = "二";
       break;
     case 3:
       daycc = "三";
       break;
      case 4:
        daycc = "四";
        break;
      case 5:
        daycc = "五";
        break;
      case 6:
        daycc = "六";
        break;
      case 7:
        daycc = "七";
        break;
      default:
        daycc="錯誤";
        break;
    } 

    return daycc;
  }
  var demo="演示文字1"
  module.exports.getday=getday
  module.exports.demo=demo

在wxml中

<!--me.wxml-->
<wxs src="me.wxs" module="m"></wxs>
<view>
  星期{{m.getday(5)}}
  {{m.demo}}
</view>

這種效果和上面的相同

require函數

如果在一個 wxs 文件中，想引用另外一個 wxs 文件，那麼可以使用 require 函數引用。示例代碼如下：

// tools.wxs
var weekday = [
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
    "星期日"
]
module.exports.person = person;

在另外一個 wxs 文件中可以進行引用。

//test2.wxs
var tools = require("tools.wxs");
var getday=function(day)
{
    var weekday=tools.weekdays
    if(day < 1 || day > 7)
    {
        return "數字有誤"
    }
    else
    {
        return weekdays[day-1]
    }
}

優點：當很多地方都需要這個數據時，可以採用這種方式，就不需要在每個js裏面都寫一遍這些數據了。在以後數據更新的時候更加方便。

註釋

註釋使用 /*註釋*/ 以及 //註釋 的方式

另外/* xxx 的方式，這種方式會把 /* 後的所有代碼全部都註釋了，在小程序中也比較常用

內置類庫

wxs 提供了一些內置的類庫，方便開發者調用。

官方文檔

wxs案例

根據時間，來顯示距離現在的時間間隔。

1. 如果時間間隔小於1分鐘以內，那麼就顯示“剛剛”
2. 如果是大於1分鐘小於1小時，那麼就顯示“xx分鐘前”
3. 如果是大於1小時小於24小時，那麼就顯示“xx小時前”
4. 如果是大於24小時小於30天以內，那麼就顯示“xx天前”
5. 否則就是顯示具體的時間2017/10/20 16:15。

注意：在微信小程序wxs裏面不能使用Date()，會報錯

---

留個空