微信小程序在模板语法中使用indexOf无效问题解决

---

想要在小程序的wxml文件中使用indexOf作为判断条件，会发现indexOf语句无效，这是由于小程序的mastache语法不支持js的方法。（https://blog.csdn.net/qq_34568700/article/details/111043327）

可以通过wxs微信小程序脚本语言来结合js语法构建页面结构。

一、全局：通过wxs文件扩展

新建一个wxs文件：

// 扩展支持split和encodeUrl方法
var filter = {
     
	split: function(value,prefix=","){
     
		return value.split(prefix)
	},
	encodeUrl: function(url){
     
		return  encodeURIComponent(url)
	}
}
// 导出对外暴露的属性
module.exports = {
     
	split: filter.split,
	encodeUrl : filter.encodeUrl
}

在wxml模板中引入：

<wxs module="filter" src="../../../utils/util.wxs">wxs>

在模板中使用：

<navigator url="/web_view?url={
      {filter.encodeUrl(url)}}">navigator>

二、局部：

在模板中使用wxs标签，标签里面定义indexOf语法：

<wxs module="tool">
    function indexOf(array, value) {
     
        return array.indexOf(value)
    }
    module.exports.indexOf = indexOf;
</wxs>

在模板中直接使用：

<view class="{
      {tool.indexOf(item,item1)>-1?'select':''}}" bindtap="XXX">       
      <text>{
    {item1}}text>
view>

总结

对于其他像Object.keys() 、toString()、indexOf()等js方法，同样可以通过上述两种方法在微信小程序模板中使用。