如何在小程序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>

最后输出结果如图:

结果

注意:

  1. wxs 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。
  2. wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致。
  3. wxs 的运行环境和其他 javascript 代码是隔离的,wxs 中不能调用其他 javascript 文件中定义的函数,也不能调用小程序提供的API。
  4. wxs 函数不能作为组件的事件回调。 由于运行环境的差异,在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户3030674的专栏

GreenDao教程2

可以多次使用where(),进行多次筛选,也可以使用whereOr()语句,进行或语句查找

10020
来自专栏bboysoul

linux下如何编译带有math.h头文件的程序

环境是centos7 大概意思是没有定义sqrt函数 百度要自己去指定头文件去编译命令如下: gcc [文件名] -lm 参数解释 -l 指定程序链接...

10030
来自专栏九彩拼盘的叨叨叨

Node.js 版本管理器: nvm 介绍

有时候,我们需要测试写的 Nodejs 的程序在不同 Nodejs 版本下是否能正常运行;或是我们想要尝试下最新版 Nodejs 的新特性,但常用的代码需要旧版...

10010
来自专栏Aloys的开发之路

VIM常见用法总结

vim中光标如何回到上一次位置 ctrl + o vim如何删除某行至某行之间的内容? 删除3104至5403行之间的内容: :3104,5403d vim使光...

38560
来自专栏python百例

29-文件对象基础操作

11220
来自专栏大闲人柴毛毛

深入理解JVM(十)——类加载器

类与类加载器 类加载器的作用:将class文件加载进JVM的方法区,并在方法区中创建一个java.lang.Class对象作为外界访问这个类的接口。 类与类加...

39660
来自专栏专注 Java 基础分享

初识Hibernate之理解持久化类

     上一篇文章我们简单介绍了Hibernate相关的一些最基本的文件及其作用,并在最后完整的搭建了Hibernate的运行环境,成功的完成了与数据库的映射...

20480
来自专栏企鹅号快讯

爬虫必备库‘requests’详解(二)

今日分享:requests库详解 上一篇文章爬虫必备库‘requests’主要说了下Pytohn第三方库--Requests库的安装与简单测试,今天详细介绍Re...

28090
来自专栏菜鸟程序员

Linux下的压缩命令

16620
来自专栏专注 Java 基础分享

Struts2框架的基本使用(二)

     上一篇 Struts2框架的基本使用 我们限于篇幅,最后简单介绍了Action的配置问题,本篇接着介绍有关框架的一些其他基本用法,主要内容如下: Ac...

235100

扫码关注云+社区

领取腾讯云代金券