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

最新推荐文章于 2024-07-10 12:28:36 发布

原创最新推荐文章于 2024-07-10 12:28:36 发布 · 3.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #javascript #前端

博客介绍了在微信小程序中获取所需参数返回的方法。可新建一个.wxs文件并暴露方法，再在.wxml文件中引入并使用，以此实现参数返回。

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

在开发微信小程序中，我们有时候需要在{{ }}里面处理一些数据，比如说：格式化日期，或者是用一个方法的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>