1、wxs的作用

wxsVue中的计算属性一样,作用都是用来辅助处理绑定的数据。

2、wxs的使用

文档地址:https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/

wxs很简单,只要看文档就行了。

可以直接在wxml文件中写<wxs></wxs>标签,也可以直接在wxml文件目录中建立.wxs文件。推荐第二种做法,因为第一种做法,wxs语法完全没有任何提示和语法高亮(指在微信开发者工具中,其他编辑器不清楚),出错时,在控制台甚至不输出错误信息

比如有一个活动列表数据,每一项中有报名开始时间、报名结束时间、活动开始时间、活动结束时间,需要根据时间的不同,给相应的列表项添加不同的class。没有wxs的时候,就要在.js获取到数据后遍历数据,给数据添加上一个标识,比如经过计算,添加一个cssClass属性,这样就可以绑定到元素的class上了:

<view class='item {{item.cssClass}}' wx:for='{{data}}'>
  ...
</view>

有了wxs之后,就可以像下面这样做:

首先,根据喜好找一个地方,右键新建一个tool.wxs文件,根据微信开发文档,内容如下:

module.exports.getClass = function(item) {
  var now = getDate().getTime();
  var joinStartDate = getDate(item.joinStartDate).getTime();
  if (now < joinStartDate) {
    return 'state0'
  }

  var joinEndDate = getDate(item.joinEndDate).getTime();
  if (now < joinEndDate) {
    return 'state1;'
  }

  var partyStartDate = getDate(item.partyStartDate).getTime();
  if (now < partyStartDate) {
    return 'state2';
  }

  var partyEndDate = getDate(item.partyEndDate).getTime();
  if (now < partyEndDate) {
    return 'state3';
  }

  return 'state4';
}

wxs中不支持全部的JavaScript数据类型和方法,比如,new Date()要用getDate()代替

wxml文件中这样使用:

<view class='item {{tool.getClass(item)}}' wx:for='{{data}}'>
  ...
</view>
<!-- 引入 -->
<wxs src='tool.wxs' module='tool'></wxs>

标签: wxs

添加新评论