如何在小程序wxml文件中编写js代码
时间:2022-06-07
本文章向大家介绍如何在小程序wxml文件中编写js代码,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
当我们创建页面时
发现有个.wxs文件
发现有个.wxs文件,关于wxs文件如何使用呢?
WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。 wxs可以说就是为了满足能在页面中使用js存在的,在wxml页面中,只能在插值{{ }}中写简单的js表达式,而不能调用方法,例如直接在wxml页面中直接保留数据的小数点的后两位。 通常的解决办法是在page的data对象中先把这个数据截赋给某个变量,然后在页面中使用这个变量,但是问题又来了,如果变量多了呢,是不是要定义很多次。
相对来说wxml中使用js语法就比较薄弱了,wxs就是弥补了这样的短处。
关于wxs文件的使用方法如下: .wxs的实例代码为:
<!-- page/tools.wxs -->
var bar = function (a,b) {
var total = a * b;
total = total.toFixed(2);//保留两位小数
return total;
}
module.exports = { bar: bar};
在wxml中引用代码:
<!-- page/index/index.wxml -->
<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.bar(2,3)}} </view>
最后输出结果如图:
结果
注意:
- wxs 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。
- wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致。
- wxs 的运行环境和其他 javascript 代码是隔离的,wxs 中不能调用其他 javascript 文件中定义的函数,也不能调用小程序提供的API。
- wxs 函数不能作为组件的事件回调。 由于运行环境的差异,在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
- Python黑帽编程 4.1 Sniffer(嗅探器)之数据捕获(上)
- Django之ORM其他骚操作
- Centos 7下 FTP 服务器
- Django之views系统
- Brackets
- django之urls系统
- 最长公共子序列(稀疏序列)nlogn解法
- P1776 宝物筛选_NOI导刊2010提高(02)(背包的二进制优化)
- PYTHON黑帽编程 4.1 SNIFFER(嗅探器)之数据捕获(下)
- 3002 石子归并 3
- day2 oracle相关
- P2946 [USACO09MAR]牛飞盘队Cow Frisbee Team
- Django 中间件
- jupyter notebook下mongodb的使用
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 分布式系统的概念都搞懂了吗?(上)
- Kafka-manager部署与使用简单介绍
- 面向对象的7种设计原则(5)-里氏代换原则
- CentOS7下利用Google Authenticator实现SSH登录的二次身份验证
- 满分室间质评之GATK Somatic SNV+Indel+CNV+SV(下)性能优化
- poiAndEasyExcel学习(六)
- C++ 模板沉思录(上)
- Python 为什么会有个奇怪的“...”对象?
- 老板让我从几百个Excel中查找数据,我用Python一分钟搞定!
- 爬取B站20万+条弹幕,我学会了如何成为B站老司机
- Pytorch实现卷积神经网络训练量化(QAT)
- VBA解压缩ZIP文件11——存在问题
- 算法集锦(14)|图像识别| 图像识别算法的罗夏测试
- CenterNet骨干网络之hourglass
- 语音识别中的声学特征提取:梅尔频率倒谱系数MFCC | 老炮儿改名PPLOVELL | 5th