WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。
WXSS 用来决定 WXML 的组件应该怎么显示。
为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。
与 CSS 相比,WXSS 扩展的特性有:
设备 | 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 作为视觉稿的标准。
注意: 在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况。
<view>
Hello RPX!
</view>
view{
width: 750rpx;
background:orange;
height: 750rpx;
font-size: 70rpx;
}
小屏幕时:
大屏幕时:
屏幕大时字体、高与宽都同时变大,rpx是响应式的相对刻度单位。
使用@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"
运行结果:
框架组件上支持使用 style、class 属性来控制组件的样式。
<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);
.
,样式类名之间用空格分隔。<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);
目前支持的选择器有:
选择器 | 样例 | 样例描述 |
---|---|---|
.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 中相同的选择器。
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)、微信小程序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://img2023.cnblogs.com/blog/63651/202304/63651-20230427095037374-1403577959.png
(3)、将本地图片转化成base64方式引用图片
转化图片的网址https://www.bejson.com/ui/image2base64/
WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML
,可以构建出页面的结构。
WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。
WXS 代码可以编写在 wxml 文件中的 <wxs>
标签内,或以 .wxs
为后缀名的文件内。
每一个 .wxs
文件和 <wxs>
标签都是一个单独的模块。
每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。
一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports
实现。
在微信开发者工具里面,右键可以直接创建 .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>
标签引用。
每个 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
在.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
2.1.3、<wxs>
标签属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
module | String | 当前 <wxs> 标签的模块名。必填字段。 | |
src | String | 引用 .wxs 文件的相对路径。仅当本标签为单闭合标签或标签的内容为空时有效。 |
module 属性是当前 <wxs>
标签的模块名。在单个 wxml 文件内,建议其值唯一。有重复模块名则按照先后顺序覆盖(后者覆盖前者)。不同文件之间的 wxs 模块名不会相互覆盖。
module 属性值的命名必须符合下面两个规则:
示例代码:
<!--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
模块对象。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
模块。
<wxs>
模块只能在定义模块的 WXML 文件中被访问到。使用 <include>
或 <import>
时,<wxs>
模块不会被引入到对应的 WXML 文件中。<template>
标签中,只能使用定义该 <template>
的 WXML 文件中定义的 <wxs>
模块。undefined
。var foo = 1;
var bar = "hello world";
var i; // i === undefined
上面代码,分别声明了 foo
、 bar
、 i
三个变量。然后,foo
赋值为数值 1
,bar
赋值为字符串 "hello world"
。
变量命名必须符合下面两个规则:
以下标识符不能作为变量名:
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
WXS 主要有 3 种注释的方法。
示例代码:
<!-- wxml -->
<wxs module="sample">
// 方法一:单行注释
/*
方法二:多行注释
*/
/*
方法三:结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释
var a = 1;
var b = 2;
var c = "fake";
</wxs>
上述例子中,所有 WXS 代码均被注释掉了。
方法三 和 方法二 的唯一区别是,没有
*/
结束符。
示例代码:
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);
示例代码:
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);
示例代码:
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));
示例代码:
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));
示例代码:
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));
示例代码:
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);
示例代码:
var a = 10, b = 20;
// 逻辑与
console.log(20 === (a && b));
// 逻辑或
console.log(10 === (a || b));
示例代码:
var a = 10, b = 20;
//条件运算符
console.log(20 === (a >= 10 ? a + 10 : b + 10));
//逗号运算符
console.log(20 === (a, b));
在 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 {
代码块;
}
示例语法:
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
示例语法:
for (语句; 语句; 语句)
语句;
for (语句; 语句; 语句) {
代码块;
}
break
,continue
关键词。示例代码:
for (var i = 0; i < 3; ++i) {
console.log(i);
if( i >= 1) break;
}
输出:
0
1
示例语法:
while (表达式)
语句;
while (表达式){
代码块;
}
do {
代码块;
} while (表达式)
表达式
为 true 时,循环执行语句
或代码块
。break
,continue
关键词。WXS 语言目前共有以下几种数据类型:
number
: 数值string
:字符串boolean
:布尔值object
:对象function
:函数array
: 数组date
:日期regexp
:正则number 包括两种数值:整数,小数。
var a = 10;
var PI = 3.141592653589793;
constructor
:返回字符串 "Number"
。toString
toLocaleString
valueOf
toFixed
toExponential
toPrecision
以上方法的具体使用请参考
ES5
标准。
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
标准。
布尔值只有两个特定的值:true
和 false
。
constructor
:返回字符串 "Boolean"
。toString
valueOf
以上方法的具体使用请参考
ES5
标准。
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]"
。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() );
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());
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
标准。
生成 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
标准。
生成 regexp 对象需要使用 getRegExp
函数。
getRegExp(pattern[, flags])
pattern
: 正则表达式的内容。flags
:修饰符。该字段只能包含以下字符: g
: globali
: ignoreCasem
: 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
标准。
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 );
console.log
方法用于在 console 窗口输出信息。它可以接受多个参数,将它们的结果连接起来输出。
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
标准。
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(){})));
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
POSITIVE_INFINITY
以上属性的具体使用请参考
ES5
标准。
parse
UTC
now
以上属性的具体使用请参考
ES5
标准。
NaN
Infinity
undefined
以上属性的具体使用请参考
ES5
标准。
parseInt
parseFloat
isNaN
isFinite
decodeURI
decodeURIComponent
encodeURI
encodeURIComponent
以上方法的具体使用请参考
ES5
标准。
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.js 中调用 App() 方法注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等,而且整个小程序只有一个 App 实例,是全部页面共享的。开发者可以通过 getApp() 方法获取到全局唯一的 App 实例,获取 App 上的数据或调用开发者注册在 App 上的函数。官方文档
小程序的启动流程简述:小程序在启动的时候会先下载小程序包,再启动小程序,然后加载 app.json 全局配置文件,然后在 app.js 中调用 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的生命周期钩子:
onLaunch
: 小程序初始化完成时触发,全局只触发一次 onShow
:小程序启动或切前台显示时触发。 onHide
:小程序从前台进入后台时触发(如 切换到其他的App)。 onError
:小程序发生脚本错误或 API 调用报错时触发。 onPageNotFound
:小程序要打开的页面不存在时触发。 onUnhandledRejection
:小程序有未处理的 Promise 拒绝时触发。 onThemeChange
:系统切换主题时触发。 示例:
对于小程序中的每个页面,都需要在页面对应的 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时都会被调用
简单的页面可以使用 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 参考文档 。
基础库 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的参数中获取打开当前页面路径中的参数,一般建议在这个函数中做一些数据初始化的工作。
页面显示/切入前台时触发,比如:新推入了一个新的页面,那么原来的页面就处于后台,这时如果把新页面又移除掉,那么下面的页面就会调用onShow方法
页面初次渲染完成时触发,一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互,对界面内容进行设置的API,可以在这个页面中进行执行
页面隐藏/切入后台时触发,如:navigateTo或底部tab切换至其他页面,小程序切入后台等
页面卸载时触发,如:redirectTo或navigateBack到其他页面
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重新开始执行.