一、WXSS (WeiXin Style Sheets)

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

与 CSS 相比，WXSS 扩展的特性有：

• 尺寸单位
• 样式导入

1.1、尺寸单位

• rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

<view>
  Hello RPX!
</view>

view{
  width: 750rpx;
  background:orange;
  height: 750rpx;
  font-size: 70rpx;
}

小屏幕时：

 大屏幕时：

 屏幕大时字体、高与宽都同时变大，rpx是响应式的相对刻度单位。

1.2、样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

示例代码：

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}
pages/css/common.wxss

.title{
  color:lightyellow;
}

pages/hello/index.wxml

<view class="title">
  Hello RPX!
</view>

pages/hello/index.wxss

view{
  width: 750rpx;
  background:orange;
  height: 750rpx;
  font-size: 70rpx;
}
@import"../css/common.wxss"

运行结果：

1.3、内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

• style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

<view style="color:{{color}};" />

<view style="background: {{color}}; height: 100px;">
  背景是什么颜色:
  <input value="{{color}}" bindinput="inputHandle" />
  {{color}}
</view>

const page={
  data:{
    users:[{id:1001,name:"jack",age:18},
    {id:1002,name:"mark",age:17},
    {id:1003,name:"rose",age:20},
    {id:1004,name:"lili",age:15},
    {id:1005,name:"lucy",age:22}],
    color:""
  },
  inputHandle(e){
    this.setData({color:e.detail.value})
  }
};
Page(page);

• class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

<view class="normal_view" />

<view wx:for="{{users}}" wx:key="id" class="{{index%2===1?'bg1':'bg2'}}">
  {{item.name}}
</view>

<view wx:for="{{users}}" wx:key="id" class="{{'bg'+(index%2+1)}}">
  {{item.name}}
</view>

view{
  padding: 20rpx;
  margin: 20rpx;
}
.bg1{
  background: lightgreen;
}
.bg2{
  background: lightskyblue;
}

const page={
  data:{
    users:[{id:1001,name:"jack",age:18},
    {id:1002,name:"mark",age:17},
    {id:1003,name:"rose",age:20},
    {id:1004,name:"lili",age:15},
    {id:1005,name:"lucy",age:22}],
    color:""
  }
};
Page(page);

1.4、选择器

目前支持的选择器有：

1.5、全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

app.wxss中的样式可以作用于每一个页面中

app.wxss中的内容如下：

.blue{
  font-size: 50rpx;
  color: blue;
}

hello/index.wxml

<view class="blue">
  blue是全局样式
</view>

counter/index.wxml

<!--pages/counter/index.wxml-->
<include src="../templates/header"></include>

<view class="blue">
  blue是全局样式
</view>

<view class="counter">
 <view class="title"><text>计数器</text></view>
 <view>{{count}}</view>
 <view>
  <button type="primary" bindtap="onCount">点击count++</button>
 </view>
</view>

<import src="../templates/card.wxml" />
<template is="card" data="{{id:1002,name:'王五',age:19}}" />
<include src="../templates/footer"></include>

运行结果：

1.6、background-image问题

（1）、微信小程序view background-image 不能够直接显示本地

[渲染层网络层错误] pages/hello/index.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用<image/>标签。请参考文档：https://developers.weixin.qq.com/miniprogram/dev/qa.html#%E6%9C%AC%E5%9C%B0%E8%B5%84%E6%BA%90%E6%97%A0%E6%B3%95%E9%80%9A%E8%BF%87-wxss-%E8%8E%B7%E5%8F%96
2 | width: 750rpx;
3 | height: 750rpx;
> 4 | background-image: url(../../images/haha.jpg);
| ^
5 | background-color: oldlace;
6 | }(env: Windows,mp,1.06.2303220; lib: 2.19.4)

（2）、但是可以直接显示网络图片

https://bkimg.cdn.bcebos.com/pic/0bd162d9f2d3572c11df08d4e75a742762d0f703652b?x-bce-process=image/resize,m_lfit,w_536,limit_1

假定需要下面这张图：

图片的url是：

https://file.cfanz.cn/uploads/png/2023/04/29/14/dQN9AQ46WU.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=

（3）、将本地图片转化成base64方式引用图片

转化图片的网址https://www.bejson.com/ui/image2base64/

二、WXS（WeiXin Script）

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。

2.1、WXS 模块

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

2.1.1、模块

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

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

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

2.1.2、.wxs 文件

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

示例代码：

// /pages/comm.wxs

var 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/common.wxs

//定义变量
var name="张三";
//定义函数表达式
var show=function(info){
  var msg="你好，"+info;
  console.log(msg);
  return msg;
}
//导出
module.exports={name:name,show:show}

请不要使用ES6的语法内容

pages/hello/index.wxml

<wxs src="../common.wxs" module="greeting"></wxs>
<view>
{{greeting.show(greeting.name)}}
</view>

结果：

示例代码：

在开发者工具中预览效果

// /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

require函数

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

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

• 只能引用 .wxs 文件模块，且必须使用相对路径。
• 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

maths.wxs

var add=function(n1,n2){
  console.log(n1+"+"+n2+"="+(n1+n2));
  return n1+n2;
}
module.exports={add:add}

common.wxs

//导入maths模块
var maths=require("maths.wxs");

var calc=function(){
  //生成0-100间的随机数
  var n1=Math.floor(Math.random()*100);
  var n2=Math.floor(Math.random()*100);
  //调用maths模块下的add方法
  return maths.add(n1,n2);
}

module.exports={calc:calc}

index.wxml

<wxs src="../common.wxs" module="common"></wxs>
<view>
  {{common.calc()}}
</view>

运行结果：

2.1.3、 标签

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 变量暴露出来，供当前页面使用。

<wxs module="m1">
var name="jack";  //定义变量name
var hi=function(info){  //定义hi函数
  return "Hello "+info;
}
module.exports={name:name,hi:hi}  //当前模块导出
</wxs>

<view>
  <!-- 调用模块m1中的方法与属性 -->
  {{m1.hi(m1.name)}}  
</view>

src 属性

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

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

• 只能引用 .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

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

2.1.4、注意事项

• <wxs> 模块只能在定义模块的 WXML 文件中被访问到。使用 <include> 或 <import> 时，<wxs> 模块不会被引入到对应的 WXML 文件中。
• <template> 标签中，只能使用定义该 <template> 的 WXML 文件中定义的 <wxs> 模块。

2.2、变量

2.2.1、概念

• WXS 中的变量均为值的引用。
• 没有声明的变量直接赋值使用，会被定义为全局变量。
• 如果只声明变量而不赋值，则默认值为 undefined。
• var表现与javascript一致，会有变量提升。

var foo = 1;
var bar = "hello world";
var i; // i === undefined

上面代码，分别声明了 foo、 bar、 i 三个变量。然后，foo 赋值为数值 1 ，bar 赋值为字符串 "hello world"。

1、没有块级作用域

 2、javascript有函数级作用域

 上面的示例中因为有函数级作用域，x在函数中，所有函数外访问不到。

3、没有声明的变量直接赋值使用，会被定义为全局变量。

 因为x在定义时没有var，直接使用,x是一个全局变量，所以在函数外又能访问到。

4、变量如果定义了但不赋值，默认值是undefined

 5、wxs中与javascript一样会有代码提升

因为有代码提升，javascript运行环境会将定义的定义提升到最前面，上面的代码相当于：

var x=undefined;
console.log(x);
x=100;

2.2.2、变量名

变量命名必须符合下面两个规则：

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

2.2.3、保留标识符

以下标识符不能作为变量名：

delete
void
typeof

null
undefined
NaN
Infinity
var
if
else
true
false
require
this
function
arguments
return
for
while
do
break
continue
switch
case
default

2.3、注释

WXS 主要有 3 种注释的方法。

示例代码：

<!-- wxml -->
<wxs module="sample">
// 方法一：单行注释

/*
方法二：多行注释
*/

/*
方法三：结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释

var a = 1;
var b = 2;
var c = "fake";

</wxs>

上述例子中，所有 WXS 代码均被注释掉了。

方法三 和 方法二 的唯一区别是，没有 */ 结束符。

2.4、运算符

2.4.1、基本运算符

示例代码：

var a = 10, b = 20;

// 加法运算
console.log(30 === a + b);
// 减法运算
console.log(-10 === a - b);
// 乘法运算
console.log(200 === a * b);
// 除法运算
console.log(0.5 === a / b);
// 取余运算
console.log(10 === a % b);

• 加法运算（+）也可以用作字符串的拼接。

var a = '.w' , b = 'xs';

// 字符串拼接
console.log('.wxs' === a + b);

2.4.2、一元运算符

示例代码：

var a = 10, b = 20;

// 自增运算
console.log(10 === a++);
console.log(12 === ++a);
// 自减运算
console.log(12 === a--);
console.log(10 === --a);
// 正值运算
console.log(10 === +a);
// 负值运算
console.log(0-10 === -a);
// 否运算
console.log(-11 === ~a);
// 取反运算
console.log(false === !a);
// delete 运算
console.log(true === delete a.fake);
// void 运算
console.log(undefined === void a);
// typeof 运算
console.log("number" === typeof a);

2.4.3、位运算符

示例代码：

var a = 10, b = 20;

// 左移运算
console.log(80 === (a << 3));
// 带符号右移运算
console.log(2 === (a >> 2));
// 无符号右移运算
console.log(2 === (a >>> 2));
// 与运算
console.log(2 === (a & 3));
// 异或运算
console.log(9 === (a ^ 3));
// 或运算
console.log(11 === (a | 3));

2.4.5、比较运算符

示例代码：

var a = 10, b = 20;

// 小于
console.log(true === (a < b));
// 大于
console.log(false === (a > b));
// 小于等于
console.log(true === (a <= b));
// 大于等于
console.log(false === (a >= b));

2.4.6、等值运算符

示例代码：

var a = 10, b = 20;

// 等号
console.log(false === (a == b));
// 非等号
console.log(true === (a != b));
// 全等号
console.log(false === (a === b));
// 非全等号
console.log(true === (a !== b));

//==比较时会进行类型转换
//===比较时不会进行类型转换
//推荐使用===
console.log(3=="3");  //比较前会先将两边的类型转换成一致，再比值
console.log(3==="3");  //直接比较，不转换类型，因为类型不一致，所以为false

console.log(3!="3");  //比较前会先将两边的类型转换成一致，再比值
console.log(3!=="3");  //直接比较，不转换类型，因为类型不一致，所以为false

2.4.7、赋值运算符

示例代码：

var a = 10;

a = 10; a *= 10;
console.log(100 === a);
a = 10; a /= 5;
console.log(2 === a);
a = 10; a %= 7;
console.log(3 === a);
a = 10; a += 5;
console.log(15 === a);
a = 10; a -= 11;
console.log(-1 === a);
a = 10; a <<= 10;
console.log(10240 === a);
a = 10; a >>= 2;
console.log(2 === a);
a = 10; a >>>= 2;
console.log(2 === a);
a = 10; a &= 3;
console.log(2 === a);
a = 10; a ^= 3;
console.log(9 === a);
a = 10; a |= 3;
console.log(11 === a);

2.4.8、二元逻辑运算符

示例代码：

var a = 10, b = 20;

// 逻辑与
console.log(20 === (a && b));
// 逻辑或
console.log(10 === (a || b));

2.4.9、其他运算符

示例代码：

var a = 10, b = 20;

//条件运算符
console.log(20 === (a >= 10 ? a + 10 : b + 10));
//逗号运算符
console.log(20 === (a, b));

2.5、语句

2.5.1、if 语句

在 WXS 中，可以使用以下格式的 if 语句 ：

• if (expression) statement ： 当 expression 为 truthy 时，执行 statement。
• if (expression) statement1 else statement2 : 当 expression 为 truthy 时，执行 statement1。 否则，执行 statement2
• if ... else if ... else statementN 通过该句型，可以在 statement1 ~ statementN 之间选其中一个执行。

示例语法：

// if ...

if (表达式) 语句;

if (表达式)
  语句;

if (表达式) {
  代码块;
}


// if ... else

if (表达式) 语句;
else 语句;

if (表达式)
  语句;
else
  语句;

if (表达式) {
  代码块;
} else {
  代码块;
}

// if ... else if ... else ...

if (表达式) {
  代码块;
} else if (表达式) {
  代码块;
} else if (表达式) {
  代码块;
} else {
  代码块;
}

2.5.2、switch 语句

示例语法：

switch (表达式) {
  case 变量:
    语句;
  case 数字:
    语句;
    break;
  case 字符串:
    语句;
  default:
    语句;
}

• default 分支可以省略不写。
• case 关键词后面只能使用：变量，数字，字符串。

示例代码：

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

2.5.3、for 语句

示例语法：

for (语句; 语句; 语句)
  语句;

for (语句; 语句; 语句) {
  代码块;
}

• 支持使用 break，continue 关键词。

示例代码：

for (var i = 0; i < 3; ++i) {
  console.log(i);
  if( i >= 1) break;
}

输出：

0
1

2.5.4、while 语句

示例语法：

while (表达式)
  语句;

while (表达式){
  代码块;
}

do {
  代码块;
} while (表达式)

• 当表达式为 true 时，循环执行语句或代码块。
• 支持使用 break，continue 关键词。

2.6、数据类型

WXS 语言目前共有以下几种数据类型：

• number ： 数值
• string ：字符串
• boolean：布尔值
• object：对象
• function：函数
• array : 数组
• date：日期
• regexp：正则

2.6.1、number

语法

number 包括两种数值：整数，小数。

var a = 10;
var PI = 3.141592653589793;

属性

• constructor：返回字符串 "Number"。

方法

• toString
• toLocaleString
• valueOf
• toFixed
• toExponential
• toPrecision

以上方法的具体使用请参考 ES5 标准。

2.6.2、string

语法

string 有两种写法：

'hello world';
"hello world";

属性

• constructor：返回字符串 "String"。
• length

除constructor外属性的具体含义请参考 ES5 标准。

方法

• toString
• valueOf
• charAt
• charCodeAt
• concat
• indexOf
• lastIndexOf
• localeCompare
• match
• replace
• search
• slice
• split
• substring
• toLowerCase
• toLocaleLowerCase
• toUpperCase
• toLocaleUpperCase
• trim

以上方法的具体使用请参考 ES5 标准。

2.6.3、boolean

语法

布尔值只有两个特定的值：true 和 false。

属性

• constructor：返回字符串 "Boolean"。

方法

• toString
• valueOf

以上方法的具体使用请参考 ES5 标准。

2.6.4、object

语法

object 是一种无序的键值对。使用方法如下所示：

var o = {} //生成一个新的空对象

//生成一个新的非空对象
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;

//对象属性的读操作
console.log(12 === o['string']);
console.log(13 === o.const_var);

属性

• constructor：返回字符串 "Object"。

console.log("Object" === {k:"1",v:"2"}.constructor)

方法

• toString：返回字符串 "[object Object]"。

2.6.5、function

语法

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() );

arguments

function 里面可以使用 arguments 关键词。该关键词目前只支持以下的属性：

• length: 传递给函数的参数个数。
• [index]: 通过 index 下标可以遍历传递给函数的每个参数。

示例代码：

var a = function(){
  console.log(3 === arguments.length);
  console.log(100 === arguments[0]);
  console.log(200 === arguments[1]);
  console.log(300 === arguments[2]);
};
a(100,200,300);

属性

• constructor：返回字符串 "Function"。
• length：返回函数的形参个数。

方法

• toString：返回字符串 "[function Function]"。

示例代码：

var func = function (a,b,c) { }

console.log("Function" === func.constructor);
console.log(3 === func.length);
console.log("[function Function]" === func.toString());

2.6.6、array

语法

array 支持以下的定义方式：

var a = [];      //生成一个新的空数组

a = [1,"2",{},function(){}];  //生成一个新的非空数组，数组元素可以是任何类型

属性

• constructor：返回字符串 "Array"。
• length

除constructor外属性的具体含义请参考 ES5 标准。

方法

• toString
• concat
• join
• pop
• push
• reverse
• shift
• slice
• sort
• splice
• unshift
• indexOf
• lastIndexOf
• every
• some
• forEach
• map
• filter
• reduce
• reduceRight

以上方法的具体使用请参考 ES5 标准。

2.6.7、date

语法

生成 date 对象需要使用 getDate函数, 返回一个当前时间的对象。

getDate()
getDate(milliseconds)
getDate(datestring)
getDate(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]])

• 参数

• milliseconds: 从1970年1月1日00:00:00 UTC开始计算的毫秒数
• datestring: 日期字符串，其格式为："month day, year hours:minutes:seconds"

示例代码：

var date = getDate(); //返回当前时间对象

date = getDate(1500000000000);
// Fri Jul 14 2017 10:40:00 GMT+0800 (中国标准时间)
date = getDate('2017-7-14');
// Fri Jul 14 2017 00:00:00 GMT+0800 (中国标准时间)
date = getDate(2017, 6, 14, 10, 40, 0, 0);
// Fri Jul 14 2017 10:40:00 GMT+0800 (中国标准时间)

属性

• constructor：返回字符串 “Date”。

方法

• toString
• toDateString
• toTimeString
• toLocaleString
• toLocaleDateString
• toLocaleTimeString
• valueOf
• getTime
• getFullYear
• getUTCFullYear
• getMonth
• getUTCMonth
• getDate
• getUTCDate
• getDay
• getUTCDay
• getHours
• getUTCHours
• getMinutes
• getUTCMinutes
• getSeconds
• getUTCSeconds
• getMilliseconds
• getUTCMilliseconds
• getTimezoneOffset
• setTime
• setMilliseconds
• setUTCMilliseconds
• setSeconds
• setUTCSeconds
• setMinutes
• setUTCMinutes
• setHours
• setUTCHours
• setDate
• setUTCDate
• setMonth
• setUTCMonth
• setFullYear
• setUTCFullYear
• toUTCString
• toISOString
• toJSON

以上方法的具体使用请参考 ES5 标准。

2.6.8、regexp

语法

生成 regexp 对象需要使用 getRegExp函数。

getRegExp(pattern[, flags])

• 参数：

• pattern: 正则表达式的内容。
• flags：修饰符。该字段只能包含以下字符:

• g: global
• i: ignoreCase
• m: multiline。

示例代码：

var a = getRegExp("x", "img");
console.log("x" === a.source);
console.log(true === a.global);
console.log(true === a.ignoreCase);
console.log(true === a.multiline);

属性

• constructor：返回字符串 "RegExp"。
• source
• global
• ignoreCase
• multiline
• lastIndex

除constructor外属性的具体含义请参考 ES5 标准。

方法

• exec
• test
• toString

以上方法的具体使用请参考 ES5 标准。

2.6.9、数据类型判断

constructor 属性

数据类型的判断可以使用 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

使用 typeof 也可以区分部分数据类型。

示例代码：

var number = 10;
var boolean = true;
var object = {};
var func = function(){};
var array = [];
var date = getDate();
var regexp = getRegExp();

console.log( 'number' === typeof number );
console.log( 'boolean' === typeof boolean );
console.log( 'object' === typeof object );
console.log( 'function' === typeof func );
console.log( 'object' === typeof array );
console.log( 'object' === typeof date );
console.log( 'object' === typeof regexp );

console.log( 'undefined' === typeof undefined );
console.log( 'object' === typeof null );

2.7、基础类库

2.7.1、console

console.log 方法用于在 console 窗口输出信息。它可以接受多个参数，将它们的结果连接起来输出。

2.7.2、Math

属性

• E
• LN10
• LN2
• LOG2E
• LOG10E
• PI
• SQRT1_2
• SQRT2

以上属性的具体使用请参考 ES5 标准。

方法

• abs
• acos
• asin
• atan
• atan2
• ceil
• cos
• exp
• floor
• log
• max
• min
• pow
• random
• round
• sin
• sqrt
• tan

以上方法的具体使用请参考 ES5 标准。

2.7.3、JSON

方法

• stringify(object): 将 object 对象转换为 JSON 字符串，并返回该字符串。
• parse(string): 将 JSON 字符串转化成对象，并返回该对象。

示例代码：

console.log(undefined === JSON.stringify());
console.log(undefined === JSON.stringify(undefined));
console.log("null"===JSON.stringify(null));

console.log("111"===JSON.stringify(111));
console.log('"111"'===JSON.stringify("111"));
console.log("true"===JSON.stringify(true));
console.log(undefined===JSON.stringify(function(){}));


console.log(undefined===JSON.parse(JSON.stringify()));
console.log(undefined===JSON.parse(JSON.stringify(undefined)));
console.log(null===JSON.parse(JSON.stringify(null)));

console.log(111===JSON.parse(JSON.stringify(111)));
console.log("111"===JSON.parse(JSON.stringify("111")));
console.log(true===JSON.parse(JSON.stringify(true)));

console.log(undefined===JSON.parse(JSON.stringify(function(){})));

2.7.4、Number

属性

• MAX_VALUE
• MIN_VALUE
• NEGATIVE_INFINITY
• POSITIVE_INFINITY

以上属性的具体使用请参考 ES5 标准。

2.7.5、Date

属性

• parse
• UTC
• now

以上属性的具体使用请参考 ES5 标准。

2.7.6、Global

属性

• NaN
• Infinity
• undefined

以上属性的具体使用请参考 ES5 标准。

方法

• parseInt
• parseFloat
• isNaN
• isFinite
• decodeURI
• decodeURIComponent
• encodeURI
• encodeURIComponent

以上方法的具体使用请参考 ES5 标准。

2.8、WXS与JS的区别

1、WXS 中不支持 let和const；不支持箭头函数、一切ES6及以后新增加的内容都不支持。

2、WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API。

3、由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

4、WXS只支持到JS5版本，不支持ES6

5、WXS使用了JS的严格模式strict mode

6、WXS 里，遍历数组只能通过for实现，而JS中的for in和for of不被支持，对于需要循环处理数据的场景，也可以通过数组的forEach方法实现遍历：

var ary = [0, 1, 2];
 ary.forEach(function(i) {
  console.log(i);
 })

7、WXS只提供给开发者5个基础类库，分别是 console，Math，JSON，Number，Date，以及一些常用的全局变量和全局函数，数量不多，但已经能满足基本的数据操作要求，而对于复杂的数据操作，比如类定义和继承等，还是需要依靠逻辑层的 JS 脚本完成。

8、由于WXS先天不支持使用 Array 对象，因此我们平常用于判断数组类型变量的语句[] instanceof Array也就不能使用了，而typeof []的输出结果是"object"，并不能满足实际的开发要求。所幸我们还可以使用变量的 「constructor」属性进行类型判断：

[].constructor === Array  //true

9、小程序的架构分成了逻辑层和视图层，WXS 与JavaScript还有一个差异在于，它与WXML一同们于视图层，运行于同一个线程内，因此减少了跨线程通信的开销。这也是我们之所以优先采用WXS处理数据的原因之一。

10、小程序在Android上，使用V8引擎解析和渲染 JavaScript; 而在iOS上，则是使用 JavaScriptCore，这两者在解析性能的表现上差异比较大，相对来说 V8 的性能比 JSC 要好得多，那么在 IOS 的小程序中，使用脱离 JavaScript 环境的 WXS，就会使性能有更多的提升，这也是WXS文档中提及 “在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍” 的具体原因

11、不要使用DOM与BOM,使用ES5

三、生命周期

小程序的生命周期说白了就是指程序从创建、到开始、暂停、唤起、停止、卸载的过程。

微信小程序生命周期包含了三个部分：

• 应用级别的生命周期（整个App的生命周期）
• 页面级别的生命周期（单个页面(page)的生命周期）
• 组件基本的生命周期（组件(component)的生命周期）

3.1、小程序的启动流程

通过了解小程序的启动流程，可以了解小程序的代码执行顺序。每个小程序都需要在 app.js 中调用 App() 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等，而且整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp() 方法获取到全局唯一的 App 实例，获取 App 上的数据或调用开发者注册在 App 上的函数。官方文档

小程序的启动流程简述：小程序在启动的时候会先下载小程序包，再启动小程序，然后加载 app.json 全局配置文件，然后在 app.js 中调用 App() 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

3.2、app生命周期

app.js 文件下小程序的 App 相关生命周期代码如下：

// app.js
App({
  //小程序初始化完成，会执行的生命周期函数 onLaunch
  onLaunch (options) {    // Do something initial when launch.    },    //例如网络请求、获取用户信息等：异步
  //小程序界面显示出来，会执行的生命周期函数 onShow
  onShow (options) {    // Do something when show.    },
  //小程序界面被隐藏时，会执行的生命周期函数 onHide，隐藏后小程序会在后台存活两个小时，该时间内打开小程序不会重新加载
  onHide () {    // Do something when hide.    },
  //小程序中发生错误时，会执行的生命周期函数 onError
  onError (msg) {    console.log(msg)    },
  globalData: 'I am global data'    //全局数据，可以在其他页面通过getApp()获取App()产生的实例对象
                                    //const app = getApp();    console.log(app.globalData.name);
})

注册完 App 实例后，会加载自定义组件并注册，之后会加载某一个页面（一般是app.json配置中的pages数组的第一个路径的页面，如果配置了编译环境的话，就会在该配置环境下先加载指定页面），首先会加载某个页面的 json 文件，读取该文件下的相关页面配置，然后是渲染 wxml 文件，将代码转化成 JS 对象，进而转化成 真实DOM树，然后把 DOM 树渲染出来。而且也会加载某个页面的 js 文件（双线程模型），会调用 Page() 函数，并绑定 Page 生命周期函数。

每个小程序都需要在 app.js 中调用 App() 方法注册小程序实例，在注册时，可以绑定对应的生命周期函数，在小程序的生命周期函数中，执行对应的代码，具体的参数及介绍可以参考一下 官方文档。

必须在 app.js 中调用，必须调用且只能调用一次。里面包含了几个app的生命周期钩子：

2. onLaunch： 小程序初始化完成时触发，全局只触发一次
• 云开发的初始化 方便其他页面直接调用云开发的SDK
• 发送请求获取用户的个人信息 方便其他页面使用
• 获取本地存储数据 方便其他页面使用

• 
  

  //注册小程序
  App({
    onLaunch(options){
      console.log("App->onLaunch:应用程序加载完成",options);
    }
  })

  
  

• 添加query参数

• 

   

  

   获取参数

• 

• 
  

  //注册页面
  Page({
    launchHandle(){
      //获得启动参数
      const options=wx.getLaunchOptionsSync();
      console.log(options);
    }
  });

  
  

  

4. onShow：小程序启动或切前台显示时触发。
• 重新启动定时器 继续定时执行功能
• 重新触发异步 获取新的数据
• 重新启动播放器等
  .
6. onHide：小程序从前台进入后台时触发(如 切换到其他的App)。
• 当暂停定时器
• 暂停视频音频的播放

• 

8. onError：小程序发生脚本错误或 API 调用报错时触发。
• 收集错误信息 发送到后台 进行错误日志的记录
• 弹出窗口提示用户
  .
10. onPageNotFound：小程序要打开的页面不存在时触发。
• 监听报错，弹出窗口提示用户
• 监听报错，重新跳转页面
  .
12. onUnhandledRejection：小程序有未处理的 Promise 拒绝时触发。
• 用在统一捕获处理 可以在该生命周期中处理错误情况 ，一般是由于异步代码出错导致的
  .
14. onThemeChange：系统切换主题时触发。
• 让小程序可以跟着主题的切换 也改变小程序的UI风格，使之体验更好！

示例：

3.3、page注册与生命周期

对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。

onlaunch：当小程序初始化完成时，会触发 onLaunch（全局只触发一次）（app.js）；
onLoad: 页面加载小程序注册完成后，加载页面，触发onLoad方法。一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数（页面js）。
onShow: 页面显示页面载入后触发onShow方法，显示页面。每次打开页面都会调用一次（比如当小程序有后台进入到前台运行或重新进入页面时）。
onReady: 首次显示页面，页面初次渲染完成，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。
onHide: 页面隐藏当navigateTo、底部tab切换、上传文件选择图片时调用。
onUnload: 页面卸载当返回上一页wx.navigateBack、wx.relanch、wx.redirectTo时都会被调用

3.3.1、使用 Page 构造器注册页面

简单的页面可以使用 Page() 进行构造。

代码示例：

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
　　//json文件中enablePullDownRefresh:true开启下拉刷新
     //wx.stopPullDownRefresh(); 数据更新完成后，调用该方法停止刷新
},
  onReachBottom: function() {
    // 页面触底时执行
　　//onReachBottomDistance
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function(options) {
    // 页面滚动时执行
　　//scrollTop 距离
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})

详细的参数含义和使用请参考 Page 参考文档 。

3.3.2、在页面中使用 behaviors

基础库 2.9.2 开始支持，低版本需做兼容处理。

页面可以引用 behaviors 。 behaviors 可以用来让多个页面有相同的数据字段和方法。

// my-behavior.js
module.exports = Behavior({
  data: {
    sharedText: 'This is a piece of data shared between pages.'
  },
  methods: {
    sharedMethod: function() {
      this.data.sharedText === 'This is a piece of data shared between pages.'
    }
  }
})

// page-a.js
var myBehavior = require('./my-behavior.js')
Page({
  behaviors: [myBehavior],
  onLoad: function() {
    this.data.sharedText === 'This is a piece of data shared between pages.'
  }
})

具体用法参见 behaviors 。

onLoad(Object query)

页面加载时触发，一个页面只会调用一次，可以在onLoad的参数中获取打开当前页面路径中的参数，一般建议在这个函数中做一些数据初始化的工作。

onShow()

页面显示/切入前台时触发，比如：新推入了一个新的页面，那么原来的页面就处于后台，这时如果把新页面又移除掉，那么下面的页面就会调用onShow方法

onReady()

页面初次渲染完成时触发，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互，对界面内容进行设置的API，可以在这个页面中进行执行

onHide()

页面隐藏/切入后台时触发，如：navigateTo或底部tab切换至其他页面，小程序切入后台等

onUnload()

页面卸载时触发，如：redirectTo或navigateBack到其他页面

3.4、总结

1. 打开小程序：

(App)onLaunch --> (App)onShow --> (Pages)onLoad --> (Pages)onShow --> (pages)onReady

2. 进入下一个页面：

(Pages)onHide --> (Next)onLoad --> (Next)onShow --> (Next)onReady

3. 返回上一个页面：

(curr)onUnload --> (pre)onShow

4. 离开小程序：

(App)onHide

5. 再次进入：

小程序未销毁 --> (App)onShow(执行上面的顺序），小程序被销毁，（App)onLaunch重新开始执行.