WXS 语法参考-WXS模块
WXS 语法参考
WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。
WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。
WXS 模块
WXS 代码可以编写在 wxml 文件中的 <wxs>
标签内,或以 .wxs
为后缀名的文件内。
模块
每一个 .wxs
文件和 <wxs>
标签都是一个单独的模块。
每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。
一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports
实现。
.wxs 文件
在微信开发者工具里面,右键可以直接创建 .wxs
文件,在其中直接编写 WXS 脚本。
示例代码:
// /pages/comm.wxsvar foo = "'hello world' from comm.wxs";
var bar = function(d) {return d;
}
module.exports = {foo: foo,bar: bar
};
上述例子在 /pages/comm.wxs
的文件里面编写了 WXS 代码。该 .wxs
文件可以被其他的 .wxs
文件 或 WXML 中的 <wxs>
标签引用。
module 对象
每个 wxs
模块均有一个内置的 module
对象。
属性
exports
: 通过该属性,可以对外共享本模块的私有变量与函数。
示例代码:
// /pages/tools.wxsvar foo = "'hello world' from tools.wxs";
var bar = function (d) {return d;
}
module.exports = {FOO: foo,bar: bar,
};
module.exports.msg = "some msg";
<!-- page/index/index.wxml --><wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>
页面输出:
some msg
'hello world' from tools.wxs
require函数
在.wxs
模块中引用其他 wxs
文件模块,可以使用 require
函数。
引用的时候,要注意如下几点:
- 只能引用
.wxs
文件模块,且必须使用相对路径。wxs
模块均为单例,wxs
模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个wxs
模块对象。- 如果一个
wxs
模块在定义之后,一直没有被引用,则该模块不会被解析与运行。
示例代码:
// /pages/tools.wxsvar foo = "'hello world' from tools.wxs";
var bar = function (d) {return d;
}
module.exports = {FOO: foo,bar: bar,
};
module.exports.msg = "some msg";
// /pages/logic.wxsvar 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" />
控制台输出:
'hello world' from tools.wxs
logic.wxs
some msg
<wxs>
标签
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
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.jsPage({data: {msg: "'hello wrold' from js",}
})
<!-- /pages/index/index.wxml --><wxs src="./../comm.wxs" module="some_comms"></wxs>
<!-- 也可以直接使用单标签闭合的写法
<wxs src="./../comm.wxs" module="some_comms" />
--><!-- 调用 some_comms 模块里面的 bar 函数,且参数为 some_comms 模块里面的 foo -->
<view> {{some_comms.bar(some_comms.foo)}} </view>
<!-- 调用 some_comms 模块里面的 bar 函数,且参数为 page/index/index.js 里面的 msg -->
<view> {{some_comms.bar(msg)}} </view>
页面输出:
'hello world' from comm.wxs
'hello wrold' from js
上述例子在文件 /page/index/index.wxml
中通过 <wxs>
标签引用了 /page/comm.wxs
模块。
注意事项
<wxs>
模块只能在定义模块的 WXML 文件中被访问到。使用<include>
或<import>
时,<wxs>
模块不会被引入到对应的 WXML 文件中。<template>
标签中,只能使用定义该<template>
的 WXML 文件中定义的<wxs>
模块。
WXS 语法参考-WXS模块相关推荐
- 小程序wxs语法的使用
一.WXS介绍 • WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构. • WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 Jav ...
- 微信小程序wxs语法
1.简介wxs语法 WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构.WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaSc ...
- KICKSTART 语法参考
23.3. Kickstart 语法参考 Red Hat Enterprise Linux 7 | Red Hat Customer Portalhttps://access.redhat.com/d ...
- CMakeLists语法参考
<cmake语法参考> 利用cmake来构建C++工程是一个非常方便的选择,尤其是依赖的库比较多的时候,或者工程比较大的时候都非常方便,这里记录一些cmake常用的语法, Key Wo ...
- cmake常用语法参考
<cmake常用语法参考> 利用cmake来构建C++工程是一个非常方便的选择,尤其是依赖的库比较多的时候,或者工程比较大的时候都非常方便,这里记录一些cmake常用的语法, Key ...
- Python基础语法(五)—常用模块和模块的安装和导入
Python基础语法(五)-常用模块的使用和模块的安装和导入,本文介绍的Python模块有:os.sys.time.datetime.random.pickle.json.hashlib.shutil ...
- python中的正则表达式语法_Python基础教程之正则表达式基本语法以及re模块
什么是正则: 正则表达式是可以匹配文本片段的模式. 正则表达式'Python'可以匹配'python' 正则是个很牛逼的东西,python中当然也不会缺少. 所以今天的Python就跟大家一起讨论一下 ...
- ACCESS SQL语法参考
ACCESS SQL语法参考 一. 基础概念 可以使用的数据类型如下: 1. TEXT:文本型(指定长度时),备注型(不指定长度时): 2. CHAR,NCHAR,VARCHAR, ...
- Velocity语法参考
1.1.Velocity语法参考 1.1.1.表达式 ² 访问JavaBeans $someBean或${someBean} ² 读Properties $bean.name或${bean.nam ...
最新文章
- 常见字符串和数值间得转换
- CF449B Jzzhu and Cities 迪杰斯特拉最短路算法
- I2S 和 PCM 区别
- 水瓶与天蝎的八年爱恋(图
- 【LeetCode】1. 盛最多水的容器:C#三种解法
- 使用create-react-app模板模仿12306app
- postgresql 配置redis_自建 Gitlab (邮箱配置、拆分 PostgreSQL、Redis) + 随想
- git gui怎么拉取项目代码_这些Git命令都不会,还是不要去面试了
- IOS6 编程:Core Data持久化数据存储(5)-使用Core Data模板创建EntLibCart项目
- mysql sha1prng_为啥POST过来的
- SCHNOKA施努卡:锂电池密封性焊接质量视觉检测
- 如何让电脑产生和输出特定分贝值的声音
- 关于ASA5505设置DMZ区域报错问题
- 什么软件可以测试手长,手相测试扫一扫软件
- 算法设计与分析-习题-动态规划法求解资源分配问题(动态规划法)
- 创建CHM格式电子书
- ASP版微信分享JS-SDK代码
- 多示例学习 (multi-instance learning, MIL)学习路线 (分类)
- 用狼的处世哲学做SOHO(一)
- 欧几里得距离、曼哈顿距离和切比雪夫距离