微信小程序 - 19.WXS使用

官方文档 : https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/

1. 是小程序的一套脚本语言,结合wxml,可以构建出页面的解构

2. 在wxml中只能通过Mustache语法,写一些表达式;但有时候又需要调用方法,来做一些渲染层的数据处理,所以就产生了wxs

3. 作用:写一些函数,辅助做一些渲染层的数据处理

属性名	类型	默认值	说明
module	String		当前 标签的模块名。必填字段。
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. 使用:

1. WXS代码可编写在
   (1).wxml文件中的标签内
   (2).以.wxs为后缀名的文件内
2. 每一个.wxs文件和标签都是单独的模块
3. 每个模块都有自己独立的作用域
4. 一个模块要想对外暴露其内部的私有变量函数,只能通过module.exports实现

wxml文件中使用标签 :

{{tool.wxsTestFun()}}


  function wxsTest(){
      console.log("wxsTest")
      return "wxsTest调用成功"
  }

  module.exports={
      wxsTestFun : wxsTest
  }

运行效果 : text显示出了return的 ' wxsTest调用成功 ' , console有打印 ' wxsTest '

定义以.wxs为后缀名的文件
a. 定义tools.wxs文件 , 文件里编写方法

function sum(num1, num2) {
  return num1 + num2
}

module.exports = {
  sumFun: sum
}

b. wxml文件引入tools.wxs模块并使用

{{tools.sumFun(6,8)}}

运行效果 : 14