微信小程序WXS文件模块怎么使用

WXS模块

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

模块

每一个.wxs文件和标签都是一个单独的模块。

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

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

.wxs文件

在微信开发者工具里面，右键可以直接创建.wxs文件，在其中直接编写WXS脚本。

示例代码：

///pages/comm.wxs

varfoo="'helloworld'fromcomm.wxs";

varbar=function(d){

returnd;

}

module.exports={

foo:foo,

bar:bar

};

上述例子在/pages/comm.wxs的文件里面编写了WXS代码。该.wxs文件可以被其他的.wxs文件或WXML中的标签引用。

module对象

每个wxs模块均有一个内置的module对象。

属性

exports:通过该属性，可以对外共享本模块的私有变量与函数。

示例代码：

///pages/tools.wxs

varfoo="'helloworld'fromtools.wxs";

varbar=function(d){

returnd;

}

module.exports={

FOO:foo,

bar:bar,

};

module.exports.msg="somemsg";

{{tools.msg}}

{{tools.bar(tools.FOO)}}

页面输出：

somemsg

'helloworld'fromtools.wxs

require函数

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

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

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

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

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

示例代码：

///pages/tools.wxs

varfoo="'helloworld'fromtools.wxs";

varbar=function(d){

returnd;

}

module.exports={

FOO:foo,

bar:bar,

};

module.exports.msg="somemsg";

///pages/logic.wxs

vartools=require("");

console.log(tools.FOO);

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

console.log(tools.msg);

控制台输出：

'helloworld'fromtools.wxs

logic.wxs

somemsg

标签

module属性

module属性是当前标签的模块名。在单个wxml文件内，建议其值唯一。有重复模块名则按照先后顺序覆盖（后者覆盖前者）。不同文件之间的wxs模块名不会相互覆盖。

module属性值的命名必须符合下面两个规则：

首字符必须是：字母（a-zA-Z），下划线（_）

剩余字符可以是：字母（a-zA-Z），下划线（_），数字（0-9）

示例代码：

varsome_msg="helloworld";

module.exports={

msg:some_msg,

}

{{foo.msg}}

页面输出：

helloworld

上面例子声明了一个名字为foo的模块，将some_msg变量暴露出来，供当前页面使用。

src属性

src属性可以用来引用其他的wxs文件模块。

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

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

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

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

示例代码：

///pages/index/index.js

Page({

data:{

msg:"'hellowrold'fromjs",

}

})

{{some_comms.bar(some_comms.foo)}}

{{some_comms.bar(msg)}}

页面输出：

'helloworld'fromcomm.wxs

'hellowrold'fromjs

上述例子在文件/page/index/index.wxml中通过标签引用了/page/comm.wxs模块。

注意

模块只能在定义模块的WXML文件中被访问到。使用或时，模块不会被引入到对应的WXML文件中。