简介
WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML
,可以构建出页面的结构。
- wxs 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。
- wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致。
- wxs 的运行环境和其他 javascript 代码是隔离的,wxs 中不能调用其他 javascript 文件中定义的函数,也不能调用小程序提供的API。
- wxs 函数不能作为组件的事件回调。
- 由于运行环境的差异,在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
书写
1)直接在.wxml文件中书写.wxs代码
<!--wxml-->
<wxs module="m1">
var msg = "hello world";
module.exports.message = msg;
</wxs>
<view> {{m1.message}} </view>
2)编写.wxs文件
*.wxs文件中不支持es6写法
// /pages/comm.wxs
var foo = "'hello world' from comm.wxs";
var bar = function(d) {
return d;
}
module.exports = {
foo: foo,
bar: bar
};
模块
WXS 代码可以编写在 wxml 文件中的 <wxs>
标签内,或以 .wxs
为后缀名的文件内。
每一个 .wxs
文件和 <wxs>
标签都是一个单独的模块。
每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。
一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports
实现。
module 对象
每个 wxs
模块均有一个内置的 module
对象。
exports
属性: 通过该属性,可以对外共享本模块的私有变量与函数
// /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";
<!-- page/index/index.wxml -->
<wxs src="./../tools.wxs" module="tools" />//src="path" 引入一个wxs,并使用该.wxs所暴漏的模块,别名为 module = "name"
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>
src属性
- 只能引用
.wxs
文件模块,且必须使用相对路径。 wxs
模块均为单例,wxs
模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个wxs
模块对象。- 如果一个
wxs
模块在定义之后,一直没有被引用,则该模块不会被解析与运行。
require属性
在.wxs
模块中引用其他 wxs
文件模块,可以使用 require
函数。
引用的时候,要注意如下几点:
- 只能引用
.wxs
文件模块,且必须使用相对路径。 wxs
模块均为单例,wxs
模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个wxs
模块对象。- 如果一个
wxs
模块在定义之后,一直没有被引用,则该模块不会被解析与运行。
注意
<wxs>
模块只能在定义模块的 WXML 文件中被访问到。使用<include>
或<import>
时,<wxs>
模块不会被引入到对应的 WXML 文件中。<template>
标签中,只能使用定义该<template>
的 WXML 文件中定义的<wxs>
模块。