您当前的位置: 首页 > 解决方案

如何在小程序wxml文件中编写js代码

  • 作者: admin
  • 发布于 2018-08-22 13:49:57
  • 来源:  
  • 栏目:解决方案

导语: 当我们创建页面时 发现有个.wxs文件 发现有个.wxs文件,关于wxs文件如何使用呢? W

 

当我们创建页面时

12.jpg

发现有个.wxs文件

发现有个.wxs文件,关于wxs文件如何使用呢? 
WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。 
wxs可以说就是为了满足能在页面中使用js存在的,在wxml页面中,只能在插值{{ }}中写简单的js表达式,而不能调用方法,例如直接在wxml页面中直接保留数据的小数点的后两位。 
通常的解决办法是在page的data对象中先把这个数据截赋给某个变量,然后在页面中使用这个变量,但是问题又来了,如果变量多了呢,是不是要定义很多次。 
相对来说wxml中使用js语法就比较薄弱了,wxs就是弥补了这样的短处。 
关于wxs文件的使用方法如下: 
.wxs的实例代码为:

 
  1. <!-- page/tools.wxs -->
  2.  
  3. var bar = function (a,b) {
  4.  
  5. var total = a * b;
  6.  
  7. total = total.toFixed(2);//保留两位小数
  8.  
  9. return total;
  10.  
  11. }
  12.  
  13. module.exports = { bar: bar};

在wxml中引用代码:

 
  1. <!-- page/index/index.wxml -->
  2.  
  3. <wxs src="./../tools.wxs" module="tools" />
  4.  
  5. <view> {{tools.bar(2,3)}} </view>

最后输出结果如图:

13.jpg

 

结果

 

注意:

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



温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
关注我们

微信小程序官方微信

栏目最新
栏目推荐
返回顶部