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

这篇具有很好参考价值的文章主要介绍了微信小程序:如何在{{}}中使用函数?WXML+WXS。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

背景

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

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

解决方法

既然{{}}中无法调用js中的函数,那该怎么办呢?微信提出了一种新的概念,WXS(WeiXin Script) ,小程序的一套脚本语言,可以在WXML的{{}}中调用.wxs的方法。文章来源地址https://www.toymoban.com/news/detail-600089.html

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>

到了这里,关于微信小程序:如何在{{}}中使用函数?WXML+WXS的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】wxml模板的使用

    目录 一,wxml模板 1.什么是 WXML 2. 什么是 WXSS 3.WXSS 和 CSS 的区别 4 .JS 逻辑交互 二,小程序的宿主环境 1.宿主环境简介 1.什么是宿主环境 2. 小程序的宿主环境 3.宿主环境包含内容 2 通信模型

    2024年02月04日
    浏览(49)
  • 微信小程序wxml使用过滤器

    如何在微信小程序wxml使用过滤器/格式化字串?(常用就是格式化字符串) 犹如Angular使用pipe管道(过滤器)这样子方便,用的最多就是时间格式化。 下面是实现时间格式化的方法和步骤: 插入代码: 在 wxml 中使用

    2024年02月07日
    浏览(43)
  • 微信小程序中使用wxml-to-canvas

    1. 下载: npm install wxml-to-canvas --save 2. json文件导入 3、使用组件  index.wxml index.js demo.js中的配置

    2024年02月13日
    浏览(46)
  • 微信小程序在 wxml 文件中使用 Array.includes 方法

    微信小程序中不能直接在wxml使用includes,否则 不起作用 需要通过wxs使用: 1、在wxs下创建一个includes.wxs  2、在wxml中使用 先引入 后使用

    2024年02月11日
    浏览(48)
  • 使用wxml2canvas将微信小程序页面转为图片

    最近有个微信小程序项目,需要将页面转为图片。微信小程序提供的Api是 wx.canvasToTempFilePath ,这个方法是将画布指定区域的内容导出生成指定大小的图片,但是我们是将页面导出图片,所以可以使用wxml2canvas解决 1、安装wxml2canvas npm init 是npm初始化,这个时候根据编译器终端

    2023年04月16日
    浏览(48)
  • towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本

    towxml3.0 支持以下功能: ● echarts图表,默认禁用,需自行构建以开启此功能 ● LaTeX数学公式,默认禁用,需搭建解析服务并自行构建以开启此功能 ● yuml图表,默认禁用,需要搭建解析服务并自行构建以开启此功能 ● highlight代码高亮,默认开启(默认仅开启bash、javascript、

    2024年04月26日
    浏览(32)
  • 微信小程序wxml2canvas的使用以及遇到的一些问题

    最近入坑了的一个laji(拼音)项目,各种天花乱坠、异想天开的功能,给我整头大了(菜是原罪)。具体功能呢就是需要将页面元素转为图片,然后将图片和音乐制成视频(搞不了根本搞不了,丢给后端兄弟了),当然了,不能一口吃成一个大胖子,更何况嘴都还没张开,然

    2024年02月14日
    浏览(35)
  • 微信小程序编译.wxml文件编译错误

    [ WXML 文件编译错误] ./pages/mine/wallet.wxml Bad value with message 1 | view 刚开始找了半天都没发现错误,后面才发现原来是我写页面的时候,插值语法忘记换成后端传过来的数据了, 无语子- - 。 把插值语法中的中文改掉就不会报错了,不过不同原因都会报这个错误,错误原因大部分

    2024年02月15日
    浏览(55)
  • 微信小程序中WXML模版语法-数据绑定方法介绍

    1.数据绑定的基本原则 1在data中定义数据 2在WXML中使用数据 2.在data中定义页面的数据 在页面对应的.js文件中,把数据定义到data对象中即可: 3.Mustache语法的格式 把data中的数据绑定到页面中渲染,使用Mustache语法(双大括号)将变量包起来即可。语法格式为: 4.Mustache语法的应

    2024年02月12日
    浏览(49)
  • 微信小程序------WXML模板语法之条件渲染和列表渲染

    目录 前言 一、条件渲染 1.wx:if 2. 结合 使用 wx:if 3. hidden 4. wx:if 与 hidden 的对比 二、列表渲染 1. wx:for 2. 手动指定索引和当前项的变量名* 3. wx:key 的使用         上一期我们讲解wxml模版语法中的数据绑定和事件绑定(上一期链接:微信小程序-----WXML模板语法之数据绑定与事件

    2024年01月16日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包