小程序如何使用wxs计算获取到的数据

本篇文章介绍了小程序中使用wxs计算获取到的数据,通过wxs代码可以将写好的事件函数暴露出去并在wxml中进行调用。

小程序如何使用wxs计算获取到的数据

小程序如何使用wxs计算获取到的数据

对于已经获取的数据往往还需要一点点小的计算,比如说两个数相除只取两位小数。

wxs常用于数据处理。 WXS 代码可以编写在 wxml 文件中的 标签内,或以 .wxs 为后缀名的文件内。情况一 在使用的wxml中写适用于只在此文件中使用的模块定义

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

var getEvery = function(totle,each) {    var eachPrice=(totle/each).toFixed(2);    return eachPrice; }  module.exports.getEvery = getEvery;

登录后复制

(推荐学习:小程序开发)

此代码写在了wxml文件中 每一个 .wxs 文件和 标签都是一个单独的模块。 每个模块都有自己独立的作用域。 即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。 一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports 实现。

step 2、用在wxml中:模块名.方法名(参数一 ,参数二);

参数为 page.js 里面的 

{{m1.getEvery(goods.retailPriceJia,goods.childNum)}}

登录后复制

即可。

情况二 在引用文件外边定义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 中的 标签引用。

step 3、在其他页面使用

¥{{filt.toFixs(item.retailPriceJia)}}/个市场价:¥{{filt.toFixs(item.retailPrice)}}

登录后复制

至此,完成。 保留两位小数效果实现。

PHP中文网,大量免费jquery视频教程,欢迎在线学习!

以上就是小程序如何使用wxs计算获取到的数据的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/1729326.html

(0)
上一篇 2025年2月19日 21:37:26
下一篇 2025年2月19日 21:37:44

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • uni-app 小程序 Laravel+jwt 权限认证系列

    uni-app开发教程栏目介绍系列权限认证的方法。 推荐:uni-app开发教程 环境说明 uni-applaravel 5.7 + jwt-auth 1.0.0 权限认证整体说明 设计表结构前端 request 类有关权限认证的 js 封…

    2025年3月13日
    200
  • uniapp上如何实现小程序的微信登录功能(流程总结)

    uniapp上如何实现小程序的微信登录功能?下面本篇文章给大家分享一下uniapp上小程序的微信登录功能的具体操作流程,希望对大家有所帮助! 之前写过一篇介绍uniapp开发微信登录功能,那是个安卓app版本,今天介绍下在小程序上如何实现微…

    2025年3月13日 编程技术
    200
  • uniapp怎么实现小程序页面的自由拖拽功能

    uniapp怎么实现小程序页面的自由拖拽功能?下面本篇文章给大家介绍一下uniapp实现小程序页面自由拖拽组件的方法,希望对大家有所帮助! 先看实现效果: 【相关推荐:《uniapp教程》】 实现过程 根据查阅文档,要实现拖拽功能,大概有三…

    2025年3月13日
    200
  • 详细了解uniapp和小程序中的分包步骤

    uniapp和小程序如何分包?下面本篇文章带大家详细了解一下uniapp和小程序的分包步骤,希望对大家有所帮助! 一、小程序分包 每个使用分包小程序必定含有一个主包。所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用…

    2025年3月13日
    200
  • UniApp实现字节跳动小程序原生组件的扩展与使用技巧

    uniapp是一种基于vue框架的跨端开发工具,通过使用uniapp,我们可以方便地将一个项目同时编译成多个平台的应用程序,包括小程序、h5、app等。而字节跳动小程序是一种独特的小程序形式,它有着自己的原生组件和独特的开发方式。本文将介绍…

    编程技术 2025年3月13日
    200
  • UniApp实现小程序与原生应用的无缝衔接

    uniapp是一款跨平台的开发框架,可以将小程序与原生应用进行无缝衔接。本文将介绍如何利用uniapp实现小程序与原生应用的衔接,并给出相应的代码示例。 UniApp是一种基于Vue.js框架的开发工具,它的特点是可以统一开发和管理H5、小…

    编程技术 2025年3月13日
    200
  • uniapp如何实现小程序和H5的快速转换

    uniapp如何实现小程序和H5的快速转换,需要具体代码示例 近年来,随着移动互联网的发展和智能手机的普及,小程序和H5成为了不可或缺的应用形式。而uniapp作为一个跨平台的开发框架,可以在一套代码的基础上,快速实现小程序和H5的转换,大…

    2025年3月13日
    200
  • 小程序和html5的区别是什么

    区别:1、小程序本身是一个应用,是依附于各大流量平台来运行的,而html5是一个技术,是依附于浏览器来运行的;2、开发工具不同;3、开发语言不同;4、HTML5开发需要考虑兼容性等,开发成本比小程序高;5、需要获取的系统级权限的不同等等。 …

    2025年3月11日
    200
  • 小程序能用react吗

    小程序能用react,其使用方法:1、基于“react-reconciler”实现一个渲染器,生成一个DSL;2、创建一个小程序组件,去解析和渲染DSL;3、安装npm,并执行开发者工具中的构建npm;4、在自己的页面中引入包,再利用api…

    2025年3月11日
    200
  • 小程序学习之如何获取地理定位并显示城市名称

     本篇文章给大家带来的内容是小程序学习之如何获取地理定位并显示城市名称,让大家了解在微信小程序中如何在定位时显示相应的城市名称。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 最近在看微信小程序,遇到地理定位显示城市名称的…

    2025年3月11日 编程技术
    200

发表回复

登录后才能评论