美文网首页微信小程序开发微信小程序开发微信小程序
微信小程序 使用wxs计算获取到的数据

微信小程序 使用wxs计算获取到的数据

作者: 王月_92f2 | 来源:发表于2018-04-07 01:13 被阅读28次

    对于已经获取的数据往往还需要一点点小的计算,比如说两个数相除只取两位小数。
    wxs常用于数据处理。
    WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内,或以 .wxs 为后缀名的文件内。

    情况一 在使用的wxml中写

    适用于只在此文件中使用的模块定义

    step 1

    定义这个模块 写好事件处理函数 并且暴露出去

    <wxs module="m1">
      var getEvery = function(totle,each) {
        var eachPrice=(totle/each).toFixed(2);
        return eachPrice;
      }
      module.exports.getEvery = getEvery;
    </wxs>
    此代码写在了wxml文件中
    每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。
    每个模块都有自己独立的作用域。
    即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。
    一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports 实现。
    

    step 2

    用在wxml中:模块名.方法名(参数一 ,参数二);参数为 page.js 里面的 array
    <text wx:if="{{goods.childNum>1?'true':''}}">折算后单个: ¥{{m1.getEvery(goods.retailPriceJia,goods.childNum)}} </text>

    即可。

    情况二 在引用文件外边定义

    wxs 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。所以不需要在意版本

    step 1 .wxs 文件

    在微信开发者工具里面,右键可以直接创建 .wxs 文件,在其中直接编写 WXS 脚本。

    step 2 单文件定义

    可以暴露变量名和函数,可以暴露一个,也可以暴露多个

    var filters = {
      toFix: function (value) {
        return value.toFixed(2)//此处2为保留两位小数
      }
    }
    var filt = {
      toFix: function (value) {
        return value.toFixed(1)//此处1为保留1位小数
      }
    }
    module.exports = {
      toFix: filters.toFix,
      toFixs: filt.toFix
    }
    该 .wxs 文件可以被其他的 .wxs 文件 或 WXML 中的 <wxs> 标签引用。
    

    step 3 在其他页面使用

    <wxs module="filt" src="../components/getfixed.wxs"></wxs>

    <text class='items-price-now'>¥{{filt.toFixs(item.retailPriceJia)}}</text><text style='color:#989898;font-size:22rpx;'>/个</text><text class='items-price-old'>市场价:¥{{filt.toFixs(item.retailPrice)}}</text>

    至此,完成。

    保留两位小数效果实现

    相关文章

      网友评论

        本文标题:微信小程序 使用wxs计算获取到的数据

        本文链接:https://www.haomeiwen.com/subject/rseehftx.html