解决微信小程序wx:if使用不了函数，WXS使用方法以及防踩坑

admin管理员组

文章数量:1794759

解决微信小程序wx:if使用不了函数，WXS使用方法以及防踩坑

问题描述

最近自己写自己的小程序的时候遇到了wx:if想要绑定的数据使用了indexOf()方法来判断是否需要显示，但是wx:if没有办法在绑定的数据中进行函数运算，只能进行简单的判断和加减运算。 在网上搜索了一下之后发现只能将数据在JS中计算后在赋值到data中，或者使用WXS来自己写一个函数方法，然后在wxml中引用后就可以将这个方法使用在wxml绑定的数据中了

WXS的定义

WXS 模块WXS 代码可以编写在 wxml 文件中的 标签内，或以 .wxs 为后缀名的文件内。模块每一个 .wxs 文件和 标签都是一个单独的模块。每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。

在自己使用WXS也遇到了一些坑，首先是WXS的文件不能创建在你和你的wxml页面同级的文件夹，不然会报错，最好是建立在和Page同级的页面，我自己在调试的时候就是出现这个错误浪费了很多时间，下面上代码

// function.wxs var arrayfind = function (arr, string) { if (arr !== undefined) { return arr.indexOf(string) } else return -1 } module.exports.arrayfind = arrayfind ;

定义了一个arrayfind的方法，传入两个参数，使用indexOf的方法检索arr数组中是否含有string字符串，有则返回字符串位置，没有则返回-1 index.html

<wxs module="tools" src="../../function.wxs" /> <view class="cu-tag line-green" style="font-size:10px" wx:if='{{tools.arrayfind(actarry[index].form.reward,"志愿时长")!==-1}}'>志愿时长</view>

将wxs在wxml中引用，其中src是路径，要使用相对路径，module是在使用wxs时的模块名， 模块名.暴露出来的方法(参数)

本文标签： 使用方法函数程序微信小wx