微信小程序 WXS标签 wxml中执行逻辑

官方链接
WXS | 微信开发文档
WXS 语法参考

场景

当需要在页面的wxml标签中执行逻辑判断的话，可以使用WXS标签，一种是直接在wxml中写逻辑，一种是引用。如下：

1.直接将逻辑写在wxs标签中

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
  }
})

<!--wxml-->
<!-- 下面的 getMax 函数，接受一个数组，且返回数组中最大的元素的值 -->
<wxs module="m1">
var getMax = function(array) {
  var max = undefined;
  for (var i = 0; i < array.length; ++i) {
    max = max === undefined ?
      array[i] :
      (max >= array[i] ? max : array[i]);
  }
  return max;
}

module.exports.getMax = getMax;
</wxs>

<!-- 调用 wxs 里面的 getMax 函数，参数为 page.js 里面的 array -->
<view> {{m1.getMax(array)}} </view>

页面输出：

5

2.引用wxs文件

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
  }
})

公共位置创建.wxs文件，并编写逻辑代码,并导出：

// wxs文件 文件路径比如是：../../utils/disable.wxs
var filter = {
  getMax: function(array){
	  var max = undefined;
	  for (var i = 0; i < array.length; ++i) {
	    max = max === undefined ?
	      array[i] :
	      (max >= array[i] ? max : array[i]);
	  }
	  return max;
  }
}

module.exports = {
    getMax: filter.getMax,
}

<!--wxml-->
<!-- 引入wxs文件，执行逻辑 -->
<wxs module="m1" src="../../utils/disable.wxs"></wxs>

<!-- 调用 wxs 里面的 getMax 函数，参数为 page.js 里面的 array -->
<view> {{m1.getMax(array)}} </view>

页面输出：

5