微信小程序wxml文件中調用自定義函數


  想在微信小程序的wxml文件里自如的像vue那樣調用自定義的方法,發現並不成功,得利用WXS腳本語言。

  WXS腳本語言是 WeiXin Script 腳本語言的簡稱,是JavaScript、JSON、WXML、WXSS之后又一大小程序內部文件類型。截至到目前小程序已經提供了5種文件類型。

  WXS的使用,有兩種方式。

  一種是直接在WXML中編寫。

<!--wxml-->
<wxs module="foo">
var some_msg = "hello world"; module.exports = { msg : some_msg, } </wxs>
<view> {{foo.msg}} </view>

  另外一種是使用單獨的WXS文件,然后在WXML中引入即可:

<wxs src="../../wxs/issue.wxs" module="tools" />

  wxs文件內容如下:

var timeChn = function (val) { if (!val) { return false } var reg = getRegExp("-", "g"); var _time = val.replace(reg, "/") var realTime = getDate(val).getTime() var nowTime = getDate().getTime() var diffValue = nowTime - realTime var _min = diffValue / (60 * 1000) if (_min < 1) { return '剛剛' } else if (_min >= 1 && _min < 10) { return '1分鍾前' } else if (_min >= 10 && _min < 30) { return '10分鍾前' } else if (_min >= 30 && _min < 60) { return '半小時前' } else if (_min >= 60 && _min < 60 * 24) { return Math.floor(_min / 60) + '小時前' } else if (_min >= 60 * 24 && _min < 60 * 24 * 7) { return Math.floor(_min / (60 * 24)) + '天前' } else { return val } } module.exports = { timeChn: timeChn }

  在wxml文件里使用如下:

<view>{{tools.timeChn(item.createdTime)}}</view>

  WXS是小程序的一套腳本語言,wxs 與 javascript 是不同的語言,有自己的語法,並不和 javascript 一致。其中包括了很多日常使用的javascript函數,在wxs中都是不能同樣使用的。最近在做這個小程序的時候,涉及到時間格式化操作。就遇到了這個問題,以前寫好了的格式化工具函數直接拷貝到小程序項目的wxs文件中,函數不能正常執行。其中包括了下面的幾個錯誤:

1、正則表達式在字符串的replace函數中的使用方法不一樣,不能直接使用var a = /[0-9]/這種方式聲明使用。正確的方式為var reg = getRegExp("-", "g");

2、獲取當前時間不能通過new Date()獲取,而是通過getDate方法獲取。

3、使用let聲明好像有問題(此未驗證,反正let改成var聲明就可以了)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM