小程序 WXS 总结

发表于 | 分类于
字数统计: 773 | 阅读时长 ≈ 3

小程序 WXS 总结

语法对比

wxs 不支持 ES6 语法，其标准基本是参考 ES5 标准，在以下细节之处有些许出入：

  • 变量名

    wxs 中要求变量名只允许包含字母、数字、下划线，且不能以数字开头

    ES5 中变量名允许包含字母、数字、下划线、美元符，同样不能以数字开头

  • 注释

    wxs 和 ES5 都支持单行注释及多行注释 ，另外，wxs 还支持结尾注释

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!-- wxml -->
    <wxs module="sample">
    // 方法一：单行注释

    /*
    方法二：多行注释
    */

    /*
    方法三：结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释

    var a = 1;
    var b = 2;
    var c = "fake";

    </wxs>

    ​

模块

wxs 代码可以写在 <wxs> 标签内，或以 .wxs 为后缀名的文件内

每个 .wxs 文件和 <wxs> 标签都是一个单独的模块，有自己独立的作用域；模块内的变量和函数对其他模块不可见，但可通过 module.exports 暴露内部数据

wxs 标签

wxs 标签包含两个属性：module 和 src ；module 属性表示模块名，必填；src 属性表示引用的 .wxs 文件的相对路径，

module 属性必填，表示模块名，其规则与变量命名规则一致，如果在同一 wxml 中存在同名，则后者覆盖前者

src 属性表示引用的其它 .wxs 文件的相对路径，仅在 wxs 标签为单闭合标签或标签内容为空时有效

1
2
3
4
5
6
7
8
<!--wxml-->

<wxs module="foo">
var msg = "hello world";
module.exports = { msg: msg }
</wxs>

<view> {{foo.msg}} </view>

module 对象

每个 wxs 模块均有一个内置的 module 对象，该对象有个 exports 属性，可以对外共享模块内的私有变量和函数

1
2
3
4
5
6
7
8
9
// /pages/tools.wxs
var foo = "'hello world' from tools.wxs";

var bar = function (d) {
    return d;
};

module.exports = { foo: foo, bar: bar };
module.exports.msg = "some msg";
1
2
3
4
5
<!-- page/index/index.wxml -->

<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.foo)}} </view>

模块引用

若想在.wxs 模块中引用其他 .wxs 模块，可以通过 require 函数实现；require 函数还可以引用 .js 模块

引用时需注意使用相对路径，不能使用绝对路径

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

如果 wxs 模块在定义后未被引用，则该模块不会被解析运行

<wxs> 模块只能在定义该模块的 WXML 文件访问，如果该 WXML 文件被其他 WXML 文件引用，则这个<wxs> 模块不会被引入到对应的 WXML 文件中；同理在 <template> 标签中只能使用其被定义所在WXML 文件中定义的 <wxs> 模块

1
2
3
4
5
6
7
8
9
10
// /pages/logic.wxs
var tools = require("./tools.wxs");

console.log(tools.fOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);


<!-- /page/index/index.wxml -->
<wxs src="./../logic.wxs" module="logic" />