微信小程序 14：什么是wxs，wxs的使用

wxs是小程序独有的一套脚本语言，结合wxml，可以构建出页面的结构

wxs的应用场景

wxml中无法调用在页面的js中定义的函数，但是wxml可以调用wxs中定义的函数。因此小程序中wxs的典型应用场景就是过滤器

wxs和js的关系

wxs有自己的数据类型

• number数值类型
• string字符串类型
• boolean布尔值类型
• object对象类型
• function函数类型
• array数组类型
• date日期类型
• regexp正则

wxs不支持es6以上的语法结构

• 不支持：let，const，解构赋值，展开运算符，箭头函数，对象属性简写
• 支持：var定义变量，普通function函数类似于es5语法

wxs遵循commonjs规范

• module对象
• require()函数
• module.exports对象

内嵌wxs脚本

wxs可以嵌套在wxml文件中的标签，就像Javascript代码可以编写在html中scrupt标签内一样
wxml文件中的每个标签，必须提供module属性，用来制定当钱的wxs的模块名称，方便在wxml中访问模块中的成员。

<view>{{m1.toUpper(username)}}</view>
<wxs module="m1">
  // 将文本转位大写
  module.exports.toUpper = function(str){
    return str.toUpperCase()
  }
</wxs>
1
2
3
4
5
6
7

m1主要是为了给wxs命名，然后调用toUpper进行调用函数

定义外连样式

创建一个单独的文件，tools.wxs在里面写代码，并且在代码中定义module.export = {toLower:toLower}
并且在wxml文件中进行引用

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

src: 必须是相对路径
module用来指定模块的名称

注意

1. wxs不能调用js中定义的函数
2. wxs不能调用小程序的API
3. wxs在ios性能好，比js快2-20倍，但是在安卓上面差不多