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

目前在微信小程序的wxml里是不能像vue那樣調用自定義方法的，如果想調用自定義方法，需要使用wxs寫法。

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

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

模塊

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

每個模塊都有自己獨立的作用域。即在一個模塊里面定義的變量與函數，默認為私有的，對其他模塊不可見。

一個模塊要想對外暴露其內部的私有變量與函數，只能通過 module.exports 實現。

.wxs 文件

在微信開發者工具里面，右鍵可以直接創建 .wxs 文件，在其中直接編寫 WXS 腳本。

示例代碼：

// /pages/comm.wxs

var foo = "'hello world' from comm.wxs";  //這里不可以用ES6的let 
var bar = function(d) {
  return d;
}
module.exports = {
  foo: foo,  //這里不支持ES6的對象簡寫方式
  bar: bar
};

上述例子在 /pages/comm.wxs 的文件里面編寫了 WXS 代碼。該 .wxs 文件可以被其他的 .wxs 文件 或 WXML 中的 <wxs> 標簽引用。

module 對象

每個 wxs 模塊均有一個內置的 module 對象。

屬性

exports: 通過該屬性，可以對外共享本模塊的私有變量與函數。
示例代碼：

// /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";

<!-- page/index/index.wxml -->

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

頁面輸出：

some msg
'hello world' from tools.wxs

內嵌在wxml里

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