WXS（WeiXin Script）
与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
运行环境和其他 javascript 代码是隔离的,wxs中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
wxs 函数不能作为组件的事件回调
页面渲染
<!--wxml--> <wxs module="m1"> var msg = "hello world"; module.exports.message = msg; </wxs> <view> {{m1.message}} </view>
页面输出：
hello world
数据处理
// page.js Page({ data: { array: [1, 2, 3, 4, 5, 1, 2, 3, 4] } })
<!--wxml--> <!-- 下面的 getMax 函数，接受一个数组，且返回数组中最大的元素的值 --> <wxs module="m1"> var getMax = function(array) { var max = undefined; for (var i = 0; i < array.length; ++i) { max = max === undefined ? array[i] : (max >= array[i] ? max : array[i]); } return max; } module.exports.getMax = getMax; </wxs> <!-- 调用 wxs 里面的 getMax 函数，参数为 page.js 里面的 array --> <view> {{m1.getMax(array)}} </view>
页面输出：
5
WXS 模块
可以编写在 wxml 文件中的 <wxs> 标签内，或以 .wxs 为后缀名的文件内。
每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。
在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。
一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。
// /pages/comm.wxs var foo = "'hello world' from comm.wxs"; var bar = function(d) { return d; } module.exports = { foo: foo, bar: bar };
每个 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" /> <view> {{tools.msg}} </view> <view> {{tools.bar(tools.FOO)}} </view>
页面输出：
some msg 'hello world' from tools.wxs
.wxs 文件可以被其他的 .wxs 文件 或 WXML 中的 <wxs> 标签引用。
wxs模块中引用其他 wxs 文件模块，可以使用 require 函数。
引用的时候，要注意如下几点：
- 只能引用 .wxs 文件模块，且必须使用相对路径。
- wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
// /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";
// /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" />
控制台输出：
'hello world' from tools.wxs logic.wxs some msg
<wxs> 标签
| 属性名 | 说明 |
| module | 当前 <wxs> 标签的模块名。必填字段。 |
| src | 引用 .wxs 文件的相对路径。 仅当本标签为单闭合标签或标签的内容为空时有效。 |
其中：
module 属性是当前 <wxs> 标签的模块名。在单个 wxml 文件内，建议其值唯一。有重复模块名则按照先后顺序覆盖（后者覆盖前者）。不同文件之间的 wxs 模块名不会相互覆盖。
<!--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 属性可以用来引用其他的 wxs 文件模块。
引用的时候，要注意如下几点：
- 只能引用 .wxs 文件模块，且必须使用相对路径。
- wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
// /pages/index/index.js Page({ 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
注意
- <wxs> 模块只能在定义模块的 WXML 文件中被访问到。使用 <include> 或 <import> 时，<wxs> 模块不会被引入到对应的 WXML 文件中。
- <template> 标签中，只能使用定义该 <template> 的 WXML 文件中定义的 <wxs> 模块。
变量
变量均为值的引用。
没有声明的变量直接赋值使用，会被定义为全局变量。
如果只声明变量而不赋值，则默认值为 undefined。
var foo = 1; var bar = "hello world"; var i; // i === undefined
wxs注释
// 方法一：单行注释 /* 方法二：多行注释 */
var a = 10, b = 20;
// typeof 运算 console.log("number" === typeof a);
// 等号 ==
// 全等号 console.log(false === (a === b)); // 非全等号 console.log(true === (a !== b));
//逗号运算符 console.log(20 === (a, b));
if (表达式) { 代码块; } else if (表达式) { 代码块; } else if (表达式) { 代码块; } else { 代码块; }
switch (表达式) { case 变量: 语句; case 数字: 语句; break; case 字符串: 语句; default: 语句; }
如
var exp = 10; switch ( exp ) { case "10": console.log("string 10"); break; case 10: console.log("number 10"); break; case exp: console.log("var exp"); break; default: console.log("default"); }
输出：
number 10
数据类型
- number ： 数值
- string ：字符串
- boolean：布尔值
- object：对象
- function：函数
- array : 数组
- date：日期
- regexp：正则
object 是一种无序的键值对
//生成一个新的非空对象 o = { 'string' : 1, //object 的 key 可以是字符串 const_var : 2, //object 的 key 也可以是符合变量定义规则的标识符 func : {}, //object 的 value 可以是任何类型 }; //对象属性的读操作 console.log(1 === o['string']); console.log(2 === o.const_var); //对象属性的写操作 o['string']++; o['string'] += 10; o.const_var++; o.const_var += 10;
function 支持以下的定义方式：
//方法 1 function a (x) { return x; } //方法 2 var b = function (x) { return x; }
function 同时也支持以下的语法（匿名函数，闭包等）：
var a = function (x) { return function () { return x;} } var b = a(100); console.log( 100 === b() );
生成 date 对象需要使用 getDate函数, 返回一个当前时间的对象。
生成 regexp 对象需要使用 getRegExp函数。
数据类型的判断可以使用 constructor 属性。
var number = 10; console.log( "Number" === number.constructor ); var string = "str"; console.log( "String" === string.constructor );
var boolean = true; console.log( "Boolean" === boolean.constructor ); var object = {}; console.log( "Object" === object.constructor ); var func = function(){}; console.log( "Function" === func.constructor ); var array = []; console.log( "Array" === array.constructor ); var date = getDate(); console.log( "Date" === date.constructor ); var regexp = getRegExp(); console.log( "RegExp" === regexp.constructor );
使用 typeof 也可以区分部分数据类型。
JSON库
- stringify(object): 将 object 对象转换为 JSON 字符串，并返回该字符串。
- parse(string): 将 JSON 字符串转化成对象，并返回该对象。
console.log("111"===JSON.stringify(111));
与 CSS 相比，WXSS 扩展的特性有：
- 尺寸单位
- 样式导入
尺寸单位
- rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
| 设备 | rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度) |
| iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
| iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
| iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
建议： 可以用 iPhone6 作为视觉稿的标准。
样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
示例代码：
/** common.wxss **/ .small-p { padding:5px; }
/** app.wxss **/ @import "common.wxss"; .middle-p { padding:15px; }
内联样式
框架组件上支持使用 style、class 属性来控制组件的样式。
- style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
<view style="color:{{color}};" />
- class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上. 样式类名之间用空格分隔。
<view class="normal_view" />
选择器
目前支持的选择器有：
| 选择器 | 样例 | 样例描述 |
| .class | .intro | 选择所有拥有 class="intro" 的组件 |
| #id | #firstname | 选择拥有 id="firstname" 的组件 |
| element | view | 选择所有 view 组件 |
| element, element | view, checkbox | 选择所有文档的 view 组件和所有的 checkbox 组件 |
| ::after | view::after | 在 view 组件后边插入内容 |
| ::before | view::before | 在 view 组件前边插入内容 |
全局样式与局部样式
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。