微信小程序:如何在{{}}中使用函数?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>
目录
相关文章
|
1月前
|
小程序 JavaScript
【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input (十)
【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input (十)
|
1月前
|
小程序 容器
【微信小程序】-- WXML 模板语法 - 条件渲染 -- wx:if & hidden (十一)
【微信小程序】-- WXML 模板语法 - 条件渲染 -- wx:if & hidden (十一)
|
1月前
|
小程序 JavaScript
【微信小程序】-- WXML 模板语法 - 数据绑定(九)
【微信小程序】-- WXML 模板语法 - 数据绑定(九)
|
1月前
|
小程序 数据库
小程序云函数从云数据下载excal
该教程介绍了如何使用小程序云函数从云数据下载Excel文件。首先,创建名为`getexcal`的云函数,然后在终端中安装`node-xlsx`依赖。接着,编写云函数代码,从数据库中获取数据,利用`node-xlsx`生成Excel文件并上传至云端。在页面(index)中,提供下载和打开Excel的按钮。当点击“生成excel”时,调用云函数并获取文件下载地址,将其复制到剪贴板并弹出提示。最后,提醒注意每次更新云函数后需重新部署,并确保使用正确的云开发环境ID。
30 1
|
1月前
|
JavaScript 小程序
微信小程序 搜索框实现模糊搜索(带模拟数据,js,wxml,wxss齐全
微信小程序 搜索框实现模糊搜索(带模拟数据,js,wxml,wxss齐全
|
1月前
|
小程序
微信小程序启动报错 WXML file not found: ./miniprogram_npm/@vant/weapp/action-sheet/index.wxml
微信小程序启动报错 WXML file not found: ./miniprogram_npm/@vant/weapp/action-sheet/index.wxml
71 3
|
1月前
|
JavaScript 小程序 前端开发
【微信小程序】-- WXS 脚本(二十九)
【微信小程序】-- WXS 脚本(二十九)
|
1月前
|
小程序 JavaScript 索引
【微信小程序】-- WXML 模板语法 - 列表渲染 -- wx:for & wx:key(十二)
【微信小程序】-- WXML 模板语法 - 列表渲染 -- wx:for & wx:key(十二)
|
4天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的在线答题微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线答题微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
18 3
|
8天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的校园导航微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的校园导航微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
24 4