在小程序wxml的页面中我们可以使用{{}}内部来书写简单的js表达式，如三目运算符等，但是对于稍微复杂一点的逻辑我们就需要用函数来解决，如果写在js文件中有些繁琐还需要绑定数据等，此时wxs就配上了用场 wxs只支持ES5！！！

1、案例说明：

我们将实现下图的价格部分的逻辑，前端返回对现象内有两个属性price和discount_price，当折扣价为null时，只显示原价，当折扣价不为空时显示折扣价且将原价画一个线。

分文件编写：

1、创建一个后缀名是wxs的文件，书写函数逻辑：

// 如果不进行函数处理，当只有一个原价时，它会将原价也打上删除线，所以必须用该逻辑实现// 最终要显示的价格
function showPrice(price, discountPrice) {if (!discountPrice) {return {price: price,display: true}} else {return {price: discountPrice,display: true}}
}// 显示有切割线的那个价格
function cutPrice(price, discountPrice) {if (discountPrice) {return {price: price,display: true}} else {return {price: '',display: false}}
}
// 导出这两个函数
module.exports = {showPrice: showPrice,cutPrice: cutPrice
}

2、将其引入到wxml中：

module相当于之后要操作的对象

<!-- 导入wxs逻辑 -->
<wxs src="../../wxs/price.wxs" module="p"></wxs>

3、在对应的标签中使用：

<l-price value="{{p.showPrice(data.price,data.discount_price).price}}">
</l-price>
<l-price  wx:if="{{p.cutPrice(data.price,data.discount_price).display}}" deleted value="{{p.cutPrice(data.price,data.discount_price).price}}">
</l-price>

直接在wxml下写：

类似于html的<script>写在下面：

<l-price value="{{p.showPrice(data.price,data.discount_price).price}}">
</l-price>
<l-price  wx:if="{{p.cutPrice(data.price,data.discount_price).display}}" deleted value="{{p.cutPrice(data.price,data.discount_price).price}}">
</l-price><wxs module="p">
// 如果不进行函数处理，当只有一个原价时，它会将原价也打上删除线，所以必须用该逻辑实现// 最终要显示的价格
function showPrice(price, discountPrice) {if (!discountPrice) {return {price: price,display: true}} else {return {price: discountPrice,display: true}}
}// 显示有切割线的那个价格
function cutPrice(price, discountPrice) {if (discountPrice) {return {price: price,display: true}} else {return {price: '',display: false}}
}
// 导出这两个函数
module.exports = {showPrice: showPrice,cutPrice: cutPrice
}
</wxs>

如何在小程序的wxml中书写函数逻辑，wxs的使用相关推荐

小程序在wxml中使用js，wxs，取整，判断等操作
小程序小记前一段时间在使用后台返回的数据的时候,发现返回的价格是0.16899999999999998 1.首先新建一个后缀为.wxs的wxs文件,在里面写入要用到的方法,然后导出 2.在页面内引入 ...
微信小程序：wxml中写js语句的方法
在小程序开发过程中,有时会遇到需要在wxml页面处理数据的情况,那么都有哪些方法可以实现呢?今天我们来总结两种方法. 第一种:直接在wxml文件中使用wxs标签 <wxs module=&quo ...
微信小程序：wxml中增加wxs脚本实现手机号/身份证等隐私信息显示
在js中,我们需要将手机号带星号显示是很容易的事情,只需要调用字符串截断与拼接就可以了:但是,在wxml中,我们如何处理呢? 微信小程序开发框架中有一个wxs,就是为了解决类似问题的,只需要在wmxl ...
微信小程序--在wxml中设置保留小数位数
需求在wxml中计算价格*数量小数出现问题. 需要新建一个wxs文件 var filters = {toFix: function (value) {return value.toFixed(2)/ ...
微信小程序实现wxml中数据保留小数或取整
在wxml中如何将浮点数保留一位两位小数? 例如:3.1415926 --> 3.14 一.在wxml页面中引入wxs文件(此文件见步骤三) <wxs module="filte ...
支付宝小程序如何在{{}}中使用函数方法
场景:例如我们在平常开发中会遇到后端返回一些时间.日期.金额等需要我们进行格式化处理的数据,这时候我们就需要在计算属性中写方法到xml中进行使用首先支付宝小程序到目前为止是还没有计算属性和监听方法的 ...
微信小程序解析XML中缺失函数的判断
第一次发表文章,不严谨处还请谅解! 今天在使用小程序解析网络传输过来的XML文件的时候,有遇到以下报错: **WAServiceMainContext.js:2 TypeError: Cannot r ...
微信小程序在wxml中的数据保留小数和取整
1.在until文件夹下,新建 tool.wxs var filters = {toFix2: function (value) {return parseFloat(value).toFixed(2 ...
微信小程序自定义组件中 triggerEvent() 函数失效的一种情况 (Cannot read property ‘triggerEvent‘ of undefined)
在网络上并没有搜索到这种情况,这里记录下避免以后的自己和广大码农踩到这个坑问题描述:在自定义组件中想调用 this.triggerEvent()函数给父组件传参,过程中报错:Cannot read ...

如何在小程序的wxml中书写函数逻辑，wxs的使用

1、案例说明：

分文件编写：

直接在wxml下写：

如何在小程序的wxml中书写函数逻辑，wxs的使用相关推荐

最新文章

热门文章