console.log(tools.FOO); console.log(tools.bar("logic.wxs")); console.log(tools.msg);
控制台输出:
'hello world' from tools.wxs
logic.wxs
some msg
标签
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
module | String | 当前<wxs>标签的模块名。必填字段。
|
|
src | String | 引用 .wxs 文件的相对路径。仅当本标签为单闭合标签或标签的内容为空时有效。 |
module 属性
module 属性是当前<wxs>标签的模块名。在单个 wxml 文件内,建议其值唯一。有重复模块名则按照先后顺序覆盖(后者覆盖前者)。不同文件之间的 wxs 模块名不会相互覆盖。
module 属性值的命名必须符合下面两个规则:
- 首字符必须是:字母(a-zA-Z),下划线(_)
- 剩余字符可以是:字母(a-zA-Z),下划线(_), 数字(0-9)
示例代码:
<!--wxml-->
<wxs module="foo">
var some_msg = "hello world"; module.exports = { msg : some_msg, }
</wxs>
<view> {{foo.msg}} </view>
页面输出:
hello world
上面例子声明了一个名字为 foo 的模块,将 some_msg 变量暴露出来,供当前页面使用。
src 属性
src 属性可以用来引用其他的 wxs 文件模块。
引用的时候,要注意如下几点:
- 只能引用 .wxs 文件模块,且必须使用相对路径。
- wxs 模块均为单例,wxs 模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个 wxs 模块对象。
- 如果一个 wxs 模块在定义之后,一直没有被引用,则该模块不会被解析与运行。
示例代码:
// /pages/index/index.js
Page({ data: { msg: "'hello world' from js", } })
<!-- 也可以直接使用单标签闭合的写法
-->
{{some_comms.bar(some_comms.foo)}}
{{some_comms.bar(msg)}}
页面输出:
'hello world' from comm.wxs
'hello wrold' from js
上述例子在文件 /page/index/index.wxml 中通过 标签引用了 /page/comm.wxs 模块。
注意
- <wxs>模块只能在定义模块的 WXML 文件中被访问到。使用<include> 或<import> 时, <wxs>模块不会被引入到对应的 WXML 文件中。
- 标签中,只能使用定义该 的 WXML 文件中定义的 模块。
标签:微信小程序
相关阅读 >>
更多相关阅读请进入《微信小程序》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者