微信小程序在双大括号{{}}里面写方法

最新推荐文章于 2024-07-01 16:51:29 发布

爱分享的Hayes小朋友

最新推荐文章于 2024-07-01 16:51:29 发布

阅读量2.9k

点赞数 1

文章标签：微信小程序 javascript 前端

本文链接：https://blog.csdn.net/x_XDGS/article/details/129213313

版权

微信小程序在双大括号{{}}里面写方法

在开发微信小程序中，我们有时候需要在{{ }}里面处理一些数据，比如说：格式化日期，或者是用一个方法的return值来作为显示在页面上的数据。
但是我们直接写会报错，不像用uniapp开发小程序，我们可以用计算属性，也可以用过滤器

<view class="baseText" wx:if="{{el.mixList.length>1}}">
	{{el.mixtitle}} ({{proNum(el.mixList)}})
</view>

这样写是不行的

因此我们可以这样：
1.新建一个.wxs文件，然后将方法暴露出来

// 需要注意:
// 1.不支持let，const
// 2.不支持箭头函数
var filter = {
    proNum: function (value) {
        var num = 0
        for (var i = 0; i < value.length; i++) {
            if (value[i].showType == 'flow') {
                num += 1
            } else {
                num += value[i].flowList.length
            }
        }
        return num
    }
}
// 导出方法
module.exports = {
    proNum: filter.proNum
}

2.在.wxml文件中引入并使用

// 引用.wxs文件
<wxs module='filter' src='./orderPayment.wxs'></wxs>

// 在页面上使用
<view class="baseText" wx:if="{{el.mixList.length>1}}">
	{{el.mixtitle}} ({{filter.proNum(el.mixList)}})
</view>