什么是wxs

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

wxs的应用场景

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

wxs和JavaScript的关系

类似JavaScript但和JavaScript是不同的语言

  • 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文件中的<wxs>标签内,就像JavaScript代码可以编写在html文件中的<script>标签内一样。

wxml文件中的每个<wxs></wxs>标签,必须提供module属性,用来指定当前wxs的模块名称,方便在wxml中访问模块中的成员。

  • 示例
<view>{{m1.toUpper(username)}}</view>
<wxs module="m1">
module.exports.toUpper=function(str){
return str.toUpperCase()
}
</wxs>

定义外联的wxs脚本

  • 介绍
    wxs代码还可以编写在以.wxs为后缀名的文件内,就像JavaScript代码可以编写在.js为后缀名的文件中一样。
  • 示例
function toLower(str){
return str.toLowerCase()
}
module.exports={
toLower:toLower
}

使用外联的wxs脚本

  • 介绍
    在wxml中引入外联的wxs脚本时,必须为<wxs>标签添加module和src属性,其中:

module用来指定模块的名称,src用来指定要引入的脚本路径,且必须是相对路径

  • 示例
<view>{{m2.toLower(country)}}</view>
<wxs src="../../utils/tools.wxs" module="m2"></wxs>

wxs脚本特点

  • 与JavaScript不同
    与JavaScript类似但是为两种不同的语言
  • 不能作为组件的事件回调
    wxs典型的应用场景就是过滤器,经常配合Mustache语法进行使用,但在wxs中定义的函数不能作为组件的时间回调函数,以下为错误用法:
<button bindtap="m2.toLower">按钮</button>
  • 隔离性
    (1)wxs不能调用js中定义的函数

(2)wxs不能调用小程序提供的API

  • 性能好
    wxs代码运行效率高
最后修改:2022 年 02 月 17 日
如果觉得我的文章对你有用,请随意赞赏