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

失效问题:

小程序的mastache语法不支持js的方法。
即在页面标签中,使用以下js方法无效:

Object.keys()   
toString()  
indexOf() 

解决办法-wxs:

WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。

wxs可以说就是为了满足能在页面中使用js存在的,在wxml页面中,只能在插值{{ }}中写简单的js表达式,而不能调用方法,例如想取出一个字符串的最后一位,就不能调用slice()方法。

通常的解决办法是在page的data对象中先把这个字符串截取好赋给某个变量,然后在页面中使用这个变量,但是问题又来了,如果变量多了呢,是不是要定义很多次。

在html中引入像artTemplate这样的模板后,在页面中只要在界限符内就能使用任何js语法,而不仅仅只是显示出表达式。

相对来说wxml中使用js语法就比较薄弱了,wxs就是弥补了这样的短处。

使用方法

①写好wxs文件 然后导出要使用的方法或变量

②在待使用页面 使用引入

③在插值{{}}中使用tools.名字(参数)
注意:wxs中不支持ES6语法

示例如下:

// .wxs文件
function indexOf(arr, value) {
    if (arr.indexOf(value) < 0) {
        return false;
    } else {
        return true;
    }
}
module.exports.indexOf = indexOf;
// 引入
<wxs src="../../utils/util.wxs" module="tools" />
// 使用
<view>{{tools.indexOf([1, 2, 3, 6, 9], 6) ? '包含' : '不包含'}}</view>
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值