小程序：wxs（wxs模塊）

1、模塊

（1）概念

wxs：

腳本語言，不是js語言，結合 wxml，構建出頁面的結構，在IOS設備上要比js快

模塊：

將一些公共的代碼抽離成為一個單獨的 js 文件，作為一個模塊。

（2）模塊的使用

建立公共的邏輯代碼塊，編寫代碼后通過module.exports輸出代碼塊：這里面一共有兩個模塊，為每一個模塊取一個名字

function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}
//輸出一個對象，因為里面含有多個模塊
module.exports={
  msg:sayHello,
  msg1:sayGoodbye
}

在需要使用模塊的文件中將模塊引入：

var common = require('common.js')

在需要使用的地方即可使用：通過模塊的別名來調用模塊並傳遞參數

Page({
  helloMINA: function() {
    common.msg('MINA')
  },
  goodbyeMINA: function() {
    common.msg1('MINA')
  },

定義頁面：點擊文字觸發js文件內部的函數，進而調用模塊

<view bindtap="helloMINA">hello</view>
<view bindtap="goodbyeMINA">goodbye</view>

測試：點擊文字，控制台打印數據

 

 

 

2、wxs模塊

(1)概念

WXS 代碼可以編寫在 wxml 文件中的 <wxs> 標簽內，或以 .wxs 為后綴名的文件內

每一個 .wxs 文件和 <wxs> 標簽都是一個單獨的模塊

每個模塊都有自己獨立的作用域。即在一個模塊里面定義的變量與函數，默認為私有的，對其他模塊不可見。一個模塊要想對外暴露其內部的私有變量與函數，只能通過 module.exports 實現。

（2）在wxml頁面內的使用

<wxs module="m1">
var msg = "hello world";

module.exports.message = msg;
</wxs>

<view> {{m1.message}} </view>

 定義一個模塊並輸出，在本頁面可以直接通過模塊名調用輸出的模塊

（3）定義wxs文件的方式

 在wxs文件內定義模塊並輸出：

var foo = "'hello world' from comm.wxs";
var bar = function(d) {
  return d;
}
//輸出兩個模塊
module.exports = {
  foo: foo,
  bar: bar
};
module.exports.msg = "some msg";

在wxml文件內引入模塊並給模塊命名：

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

 

3、練習

（1）在utils里面定義模塊

var filter={
  getAgoDate:function(time){
    // var time = "2020-07-01T03:07:18.00"
    //將字符串轉為時間格式
    var date = time.replace("T"," ").replace("Z","");
    console.log(date);
    //得到距離1970.1.1的時間毫秒差值
    var time1 = Date.parse(date);
    //得到當前時間距離1970.1.1的毫秒時間差值
    var time2 = getDate().getTime();
    //得到差值
    var subTime = time2-time1;
    //得到秒 分 時 天 周 月 年
    var minutes = subTime/1000/60;
    var hours = minutes/60;
    var days =hours/24;
    var weeks = days/7;
    var months = weeks/30;
    var str = "";
    if(months>=1){
      str=parseInt(months)+"月前"
    }else if(weeks>=1){
      str=parseInt(weeks)+"周前"
    }else if(days>=1){
      str=parseInt(days)+"天前"
    }else if(hours>=1){
      str=parseInt(hours)+"小時前"
    }else if(minutes>=1){
      str=parseInt(days)+"分鍾前"
    }
    else{
      str = "剛剛";
    }
    return str;
    console.log(str);
  }
}

module.exports={
  getAgoDate:filter.getAgoDate
}

（2）在頁面中引入獲取時間的模塊並進行頁面的渲染

<wxs  module="filter" src="../../utils/util.wxs"></wxs>

<text class="last_active_time">{{filter.getAgoDate(item.last_reply_at)}}</text>

（3）測試結果