WXS

WXS相当于VUE的过滤器
WXS语法类似JavaScript，但是两个不是一种语言
1、wxs有自己的数据类型
2、wxs不支持ES6及以上的语法
3、wxs遵循CommonJS规范

内嵌WXS

编写在wxml文件中的<wxs>标签，必须提供module属性，指定当前wxs的模块名称，方便在wxml中访问模块中的成员。
js文件：

1
2
3
4
5
6
7
8
Page({
  /**
   * 页面的初始数据
   */
  data: {
    word:"hello world",
  }
})

wxml文件：

1
2
3
4
5
6
7
<view>{{m1.toUpper("hello")}}</view>
<view>{{m1.toUpper(word)}}</view>
<wxs module="m1">
  module.exports.toUpper=function(str){
    return str.toUpperCase()
  }
</wxs>

外联wxs脚本

1、编写在.wxs文件内，我在utils文件夹下创建了tools.wxs文件
tools.wxs：

1
2
3
4
5
6
function toLower(str){
  return str.toLowerCase()
}
module.exports={
  toLower:toLower
}

2、引入脚本
必须为<wxs>标签添加module和src属性，module指定模块名称，src指定模块路径
.wxml文件：

1
2
<view>{{m2.toLower(word)}}</view>
<wxs src="../../utils/tools.wxs" module="m2"/>

.js文件：

1
2
3
4
5
6
7
8
Page({
  /**
   * 页面的初始数据
   */
  data: {
    word:"Hello World",
  }
})

wxs注意事项

1、wxs中定义的函数不能作为组件的事件回调函数，下面的写法是错误的

1
2
<button bind:tap="m2.toLower">点击</button>
<wxs src="../../utils/tools.wxs" module="m2"/>

2、wxs不能调用js文件中的方法
3、wxs不能调用小程序提供的API函数
4、在IOS设备上，wxs会比js代码快2~20倍