1.1、尺寸单位

张果

发布于 2023-05-02 16:03:06

3.4K0

文章被收录于专栏：软件开发软件开发

一、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物理像素。

设备	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是响应式的相对刻度单位。

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、选择器

目前支持的选择器有：

选择器	样例	样例描述
.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 组件前边插入内容

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://img2023.cnblogs.com/blog/63651/202304/63651-20230427095037374-1403577959.png

（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

`2.1.3、<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.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"。

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

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的生命周期钩子：

onLaunch：小程序初始化完成时触发，全局只触发一次
- 云开发的初始化方便其他页面直接调用云开发的SDK
- 发送请求获取用户的个人信息方便其他页面使用
- 获取本地存储数据方便其他页面使用 .
onShow：小程序启动或切前台显示时触发。
- 重新启动定时器继续定时执行功能
- 重新触发异步获取新的数据
- 重新启动播放器等 .
onHide：小程序从前台进入后台时触发(如切换到其他的App)。
- 当暂停定时器
- 暂停视频音频的播放 .
onError：小程序发生脚本错误或 API 调用报错时触发。
- 收集错误信息发送到后台进行错误日志的记录
- 弹出窗口提示用户 .
onPageNotFound：小程序要打开的页面不存在时触发。
- 监听报错，弹出窗口提示用户
- 监听报错，重新跳转页面 .
onUnhandledRejection：小程序有未处理的 Promise 拒绝时触发。
- 用在统一捕获处理可以在该生命周期中处理错误情况，一般是由于异步代码出错导致的 .
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重新开始执行.

四、视频

【微信小程序开发】 https://www.bilibili.com/video/BV1pv4y1n7Zg/?share_source=copy_web&vd_source=475a31f3c5d6353a782007cd4c638a8a

五、作业

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-04-27，如有侵权请联系 cloudcommunity@tencent.com 删除

小程序

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

1.1、尺寸单位

1.1、尺寸单位

一、WXSS (WeiXin Style Sheets)

1.1、尺寸单位

1.2、样式导入

1.3、内联样式

1.4、选择器

1.5、全局样式与局部样式

1.6、background-image问题

二、WXS（WeiXin Script）

2.1、WXS 模块

2.1.1、模块

2.1.2、.wxs 文件

module 对象

属性

require函数

2.1.3、<wxs> 标签

module 属性

src 属性

2.1.4、注意事项

2.2、变量

2.2.1、概念

2.2.2、变量名

2.2.3、保留标识符

2.3、注释

2.4、运算符

2.4.1、基本运算符

2.4.2、一元运算符

2.4.3、位运算符

2.4.5、比较运算符

2.4.6、等值运算符

2.4.7、赋值运算符

2.4.8、二元逻辑运算符

2.4.9、其他运算符

2.5、语句

2.5.1、if 语句

2.5.2、switch 语句

2.5.3、for 语句

2.5.4、while 语句

2.6、数据类型

2.6.1、number

语法

属性

方法

2.6.2、string

语法

属性

方法

2.6.3、boolean

语法

属性

方法

2.6.4、object

语法

属性

方法

2.6.5、function

语法

arguments

属性

方法

2.6.6、array

语法

属性

方法

2.6.7、date

语法

属性

方法

2.6.8、regexp

语法

属性

方法

2.6.9、数据类型判断

constructor 属性

typeof

2.7、基础类库

2.7.1、console

2.7.2、Math

属性

`2.1.3、<wxs>` 标签

`constructor` 属性

`typeof`