<>WXS脚本-概述
<>1.什么是wxs
WXS(WeiXin Script)是小程序独有的一套脚本语言,结合WXML,可以构建出页面的结构。
<>2.wxs脚本
wxml中无法调用在页面的.js中定义的函数,但是,wxml中可以调用wxs中定义的函数。因此,小程序中wxs的典型应用场景就是“过滤器”。
<>3.wxs和JavaScript的关系
虽然wxs的语法类似于JavaScript,但是wxs和JavaScript是完全不同的两种语言:
* wxs有自己的数据类型
* number 数值类型、string 字符串类型、boolean 布尔类型、object 对象类型、
* function 函数类型、array 数组类型、 data 日期类型、 regexp 正则
* wxs不支持类似于ES6及以上的语法
* 不支持:let、const、结构赋值、展开运算符、箭头函数、对象属性简写、etc
* 支持:var 定义变量、普通function函数等类似于ES5的语法
* wxs遵循CommonJS规范
* module对象
* require()函数
* module.exports对象
<>WXS脚本-基本语法
<>1.内嵌wxs脚本
wxs 代码可以编写在wxml文件中的<wxs>标签内,就像JavaScript代码可以编写在html文件中的<script>标签内一样。
wxml文件中的每个<wxs></wxs>标签,必须提供module属性,用来指定当前的wxs模块名称,方便在wxml中访问模块中的成员:
<view>{{m1.toUpper(username)}}</view> <wxs module='m1'> // 将文本转为大写形式 zs -> ZS
module.exports.toUpper = function(str){ return str.toUpperCase() }</wxs>
<>2.定义外联的wxs脚本
wxs代码还可以编写在以.wxs为后缀名的文件内,就像JavaScript代码可以编写在以.js为后缀名的文件中一样。实例代码如下:
// tools.wxs 文件 function toLower(str){ return str.toLowerCase() } module.
exports= { toLower:toLoWer }
<>3.使用外联的wxs脚本
在wxml中引入外联的wxs脚本时,必须为<wxs>标签添加module和src属性,其中:
* module用来指定模块的名称
* src用来指定要引入的脚本的路径,且必须是相对路径
示例代码如下:
<!-- 调用 m2 模块中的方法 --> <view>{{m2.toLower(country)}}</view> <!-- 引用外联的
tools.wxs 脚本,并命名为 m2 --> <wxs src="../../utils/tools.wxs" module="m2"></wxs>
<>WXS脚本-wxs的特点
<>1.与JavaScript不同
为了降低wxs的学习成本,wxs语言在设计时借鉴了大量的JavaScript的语法。但是本质上,wxs都喝JavaScript是完全不同的两种语言!
<>2.不能作为是组件的事件回调
wxs典型的应用场景就是“过滤器”,经常配合Mustache语法进行使用,例如:
<view>{{m2.toLower(country)}}</view>
但是,在wxs中定义的函数不能作为组件的事件回调函数。例如,下面的用法是错误的:
<button bindtap="m2.toLower">按钮</button>
<>3.隔离性
隔离性指的是wxs的运行环境和其他JavaScript代码是隔离的。体现在如下两方面:
* wxs不能调用js中定义的函数
* wxs不能调用小程序提供的API
<>4.性能好
* 在iOS设备上,小程序内的WXS会比javascript代码快2~20倍
* 在android设备上,二者的运行效率无差异