官方文档 : https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/
1. 是小程序的一套脚本语言,结合wxml,可以构建出页面的解构
2. 在wxml中只能通过Mustache语法,写一些表达式;但有时候又需要调用方法,来做一些渲染层的数据处理,所以就产生了wxs
3. 作用:写一些函数,辅助做一些渲染层的数据处理
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| module | String | 当前 <wxs> 标签的模块名。必填字段。 | |
| src | String | 引用 .wxs 文件的相对路径。仅当本标签为单闭合标签或标签的内容为空时有效。 |
(1).module 属性值的命名必须符合下面两个规则 :
a. 首字符必须是：字母 a-zA-Z，下划线 _
b. 剩余剩余字符可以是：字母 a-zA-Z ，下划线 _ ， 数字 0-9
(2).src 属性可以用来引用其他的 wxs 文件模块 :
a. 只能引用 .wxs 文件模块，且必须使用相对路径。
b. wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
c. 如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。
4. 使用:
- WXS代码可编写在
(1).wxml文件中的<wxs>标签内
(2).以.wxs为后缀名的文件内 - 每一个.wxs文件和<wxs>标签都是单独的模块
- 每个模块都有自己独立的作用域
- 一个模块要想对外暴露其内部的私有变量函数,只能通过module.exports实现
wxml文件中使用<wxs>标签 :
<text>{{tool.wxsTestFun()}}</text>
<wxs module="tool">
function wxsTest(){
console.log("wxsTest")
return "wxsTest调用成功"
}
module.exports={
wxsTestFun : wxsTest
}
</wxs>
运行效果 : text显示出了return的 ' wxsTest调用成功 ' , console有打印 ' wxsTest '
定义以.wxs为后缀名的文件
a. 定义tools.wxs文件 , 文件里编写方法
function sum(num1, num2) {
return num1 + num2
}
module.exports = {
sumFun: sum
}
b. wxml文件引入tools.wxs模块并使用
<!-- 引入定义的wxs模块 -->
<wxs module="tools" src="tools.wxs" />
<view>{{tools.sumFun(6,8)}}</view>
运行效果 : 14
