微信小程序:如何在{{}}中使用函数?WXML+WXS

简介: 微信小程序:如何在{{}}中使用函数?WXML+WXS

背景

在原生小程序的项目中或有这种需求,就是在wxml页面中调用方法

但是微信原生小程序无法直接使用像vue里面的计算属性,监听啦啥的这种,也不能调用js中的方法。

解决方法

既然{{}}中无法调用js中的函数,那该怎么办呢?微信提出了一种新的概念,WXS(WeiXin Script) ,小程序的一套脚本语言,可以在WXML的{{}}中调用.wxs的方法。

1.新建一个.wxs文件

// 支持es4语法
var filter = {
  numberToFixed: function(value){
    return value.toFixed(2)
  }
}
// 导出对外暴露的属性
module.exports = {
  numberToFixed: filter.numberToFixed
}

2.在.wxml中引入文件

<!-- 引入.wxs文件 src为相对路径,module指定当前模块的名称 -->
<wxs module="filter" src="./numberToFixed.wxs"></wxs>

3.在{{}中调用.wxs模块中的方法:

<view>¥{{filter.numberToFixed(cashMoney*0.02)}}手续费(费率2%)</view>
目录
相关文章
|
2月前
|
缓存 小程序 UED
如何利用小程序的生命周期函数实现数据的加载和更新?
如何利用小程序的生命周期函数实现数据的加载和更新?
72 4
|
2月前
|
小程序 UED 开发者
小程序的生命周期函数
小程序的生命周期函数
81 1
|
3月前
|
JSON 小程序 前端开发
towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本
本文介绍了在微信小程序中使用`towxml`库将Markdown格式文本渲染为WXML的方法。文章提供了`towxml`的概述、安装步骤、以及如何在小程序中配置和使用`towxml`进行Markdown解析的详细说明和代码示例。
|
5月前
|
算法 安全 数据安全/隐私保护
支付系统---微信支付09------数字签名,现在Bob想要给Pink写一封信,信件的内容不需要加密,怎样能够保证信息的完整性,使用信息完整性的主要手段是摘要算法,散列函数,哈希函数,H称为数据指纹
支付系统---微信支付09------数字签名,现在Bob想要给Pink写一封信,信件的内容不需要加密,怎样能够保证信息的完整性,使用信息完整性的主要手段是摘要算法,散列函数,哈希函数,H称为数据指纹
|
5月前
|
小程序
【微信小程序-原生开发】wxml 支持 includes (wxml中执行函数的方法)
【微信小程序-原生开发】wxml 支持 includes (wxml中执行函数的方法)
336 0
|
5月前
|
小程序 C++
【微信小程序-原生开发】实用教程19 - 表单范例 VS 表单校验(含必填校验函数封装,实时数字校验)
【微信小程序-原生开发】实用教程19 - 表单范例 VS 表单校验(含必填校验函数封装,实时数字校验)
87 0
|
5月前
|
小程序 JavaScript
【微信小程序-原生开发】实用教程11 - 用户登录鉴权(含云函数的创建、删除、使用,通过云函数获取用户的openid)
【微信小程序-原生开发】实用教程11 - 用户登录鉴权(含云函数的创建、删除、使用,通过云函数获取用户的openid)
75 0
|
5月前
|
JavaScript 小程序 前端开发
【微信小程序-原生开发】实用教程04-启动/欢迎/首屏广告页(含倒计时、添加文字、rpx、定义变量和函数、读取变量、修改变量、wx.reLaunch 页面跳转、生命周期 onReady等)
【微信小程序-原生开发】实用教程04-启动/欢迎/首屏广告页(含倒计时、添加文字、rpx、定义变量和函数、读取变量、修改变量、wx.reLaunch 页面跳转、生命周期 onReady等)
149 0
|
7月前
|
小程序 数据库
小程序云函数从云数据下载excal
该教程介绍了如何使用小程序云函数从云数据下载Excel文件。首先,创建名为`getexcal`的云函数,然后在终端中安装`node-xlsx`依赖。接着,编写云函数代码,从数据库中获取数据,利用`node-xlsx`生成Excel文件并上传至云端。在页面(index)中,提供下载和打开Excel的按钮。当点击“生成excel”时,调用云函数并获取文件下载地址,将其复制到剪贴板并弹出提示。最后,提醒注意每次更新云函数后需重新部署,并确保使用正确的云开发环境ID。
98 1
|
7月前
|
小程序
微信小程序启动报错 WXML file not found: ./miniprogram_npm/@vant/weapp/action-sheet/index.wxml
微信小程序启动报错 WXML file not found: ./miniprogram_npm/@vant/weapp/action-sheet/index.wxml
239 3