微信小程序的WXS语法

前言：挖掘微信小程序漏洞而学习准备的

知识点：微信小程序的生命周期

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。

WXS模块

WXS 代码可以编写在 wxml 文件中的 标签内，或以 .wxs 为后缀名的文件内。

模块

每一个 .wxs 文件和 标签都是一个单独的模块，一个.wxs 文件可以被另外的.wxs文件引用使用(通过require)或者是.wxml文件引用使用(通过wxs标签的src属性)

每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。

一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。

var foo = "'hello world' from comm.wxs";
var bar = function(d) {
  return d;
}
module.exports = {
  foo: foo,
  bar: bar
};

module 对象

每个 wxs 模块均有一个内置的 module 对象，通过module对象可以做一些相关的操作

比如这里通过module对象的exports属性可以对外共享本模块的私有变量与函数。

var foo = "'hello world' from comm.wxs";
var bar = function(d) {
  return d;
}
 
<!-- 第一种导出方法 -->
module.exports = {
  foo: foo,
  bar: bar
};
 
<!-- 第二种导出方法 -->
module.exports.msg = "test..."

在wxml中通过wxs标签进行引用该wxs文件就可以使用exports导出的相关变量和函数

实现wxs的使用

common.wxs

var foo = "'hello world' from comm.wxs";
var toLower = function(str)
{
  return str.toLowerCase()
}
 
module.exports = {
  foo: foo,
  toLower: toLower
};

login.wxml

<wxs src="./../common.wxs" module="tools" />
<text>{{tools.foo}}
</text>
<text>{{tools.msg}}</text>
 
<text>{{tools.toLower("AAA")}}</text>

require函数

在.wxs模块中引用其他 wxs 文件模块，可以使用 require 函数。

引用的时候，要注意如下几点：

• 只能引用 .wxs 文件模块，且必须使用相对路径

• wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象

• 如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行

common.wxs

<!-- common.wxs -->
var foo = "'hello world' from comm.wxs";
var toLower = function(str)
{
  return str.toLowerCase()
}
 
module.exports = {
  foo: foo,
  toLower: toLower
};

common2.wxs

<!-- common2.wxs -->
 
var tools = require("./common.wxs")
console.log(tools.toLower("AAA"))

login.wxml

<wxs src="./../common2.wxs" module="logic" />