微信小程序知识点整理(一)_微信小程序 知识体系

一、什么是 rpx 尺寸单位

rpx： 是微信小程序独有的，解决屏幕自适应的尺寸单位

• 可以根据屏幕宽度进行自适应，不论屏幕大小，规定屏幕宽为 750rpx
• 通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕上，可以实现自动适配

二、rpx 与 px 之间的换算

以 iPhone6 为例，iPhone6 的屏幕宽度为 375px ，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，也就是 1rpx = 0.5px = 1 物理像素 ，因为设计师的图一般是二倍图，所以在iphone6下直接使用测量出来的值来设置rpx就可以了

三、 @import 样式导入

• 使用 @import 语句可以导入外联样式表
• 语法格式：@import "wxss 样式表文件的相对路径"
• 注意要在@import 最后加上;

data-*属性选择器

[data-color='pink'] {
  color: pink;
}
1
2
3
4

@import "/assets/common/common.wxss";
/*上面这个是根路径下的表示方法*/
/* @import "../../assets/common/common.wxss"; */

.box {
  width: 375rpx;
  height: 375rpx;
  background-color: skyblue;
}
1
2
3
4
5
6
7
8
9

四、全局样式和局部样式

全局样式

• 定义在 app.wxss 中的样式为全局样式，作用于每一个页面。

局部样式

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

注意：当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式效果！

五、app.json 配置文件

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，

它决定了页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

在 app.json 配置文件中，最主要的配置节点是：

• pages 数组：配置小程序的页面路径
• window 对象：用于设置小程序的状态栏、导航条、标题、窗口背景色
• tabBar 对象：配置小程序的tab栏效果

六、pages 数组的用法

app.json 中的 pages 数组，用来配置小程序的页面路径

基础配置

• pages 用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径+文件名 信息。
• 文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json、 .js、 .wxml 和 .wxss 四个文件进行处理。

创建页面的另一种方式

• 打开 app.json --> pages 数组节点 --> 新增页面路径并保存 --> 自动创建路径对应的页面

设置项目的首页

• 打开 app.json -> pages 数组节点
• 按需调整数组中路径的顺序，即可修改默认首页

注意事项：

• 数组的第一项代表小程序的小程序的初始页面也就是首页
• 小程序中新增/减少页面，都需要对 pages 数组进行修改，否则在运行小程序时就会报错

七、tabBar 的概念

tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换；小程序中通常将其分为底部 tabBar 和顶部 tabBar

官方文档：tabBar

注意：tabBar 中，只能配置最少2个、最多5个 tab 页签，当渲染顶部 tabBar 的时候，不显示 icon，只显示文本

• 都不支持网络图片
• 当 position 为 top 时，不显示 icon。
  tabBar的路径要放到pages最前面，防止加载首页时无法出现tabBar的情况
  

八、页面配置

页面配置和局部配置的关系

• app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现；
• 如果某些小程序页面，想要拥有特殊的窗口表现，此时，“页面级别的 .json 配置文件”就可以实现这种需求；

注意：页面级别配置优先于全局配置生效

官方文档： 页面配置详细文档

九、生命周期的概念

生命周期（Life Cycle）是指一个对象从 创建 -> 运行 -> 销毁 的整个阶段，强调的是一个时间段。

小程序的生命周期

• 小程序的启动，表示生命周期的开始
• 小程序的关闭，表示生命周期的结束
• 中间小程序运行的过程，就是小程序的生命周期

小程序生命周期的两种类型

• 应用生命周期：特指小程序从启动 --> 运行 --> 销毁的过程；
• 页面生命周期：特指小程序中，每个页面的加载 --> 渲染 --> 销毁的过程；
• 注意：页面的生命周期范围较小，应用程序的生命周期范围较大
  

十、小程序的生命周期函数

小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行

生命周期函数的作用：

允许程序员在特定的生命周期时间点上，执行某些特定的操作。例如，页面刚加载的时候，在生命周期函数中自动发起数据请求，获取当前页面的数据；

注意：生命周期强调的是时间段，生命周期函数强调的是时间点。

十一、应用生命周期函数

• app.js 是小程序执行的入口文件，在 app.js 中必须调用 App() 函数，且只能调用一次。其中，App() 函数是用来注册并执行小程序的。
• App(Object) 函数接收一个 Object 参数，可以通过这个 Object 参数，指定小程序的生命周期函数。

app.js 代码

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

十二、页面生命周期函数

• 每个小程序页面，必须拥有自己的 .js 文件，且必须调用 Page() 函数，否则报错。其中 Page() 函数用来注册小程序页面。
• Page(Object) 函数接收一个 Object 参数，可以通过这个 Object 参数，指定页面的生命周期函数。

页面生命周期.js

// pages/tabHome/tabHome.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载(只加载一次)
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成（只加载一次）
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示（初始化完成时显示 或者后台切到前台时显示）
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏（前台切后台时触发）
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

官方文档:生命周期

十三、数据绑定

如何定义页面的数据

• 小程序每个页面，是由 4 部分组成，其中 .js 文件内可以定义页面的数据、生命周期函数、其他业务逻辑
• 如果要在 .js 文件内定义页面的数据，只需把数据定义在 data 节点下即可

Mustache 语法格式

把 data 中的数据绑定到页面中渲染，使用 Mustache 语法(双大括号) 将变量包裹起来即可

<view>{{ info }}</view>
1

Mustache 语法的主要场景

• 绑定内容(vue只能在标签之间使用)
• 绑定属性
• 运算(三元表达式、算术运算、逻辑判断、字符串运算、数据路径运算)

案例代码

<!-- 页面结构 -->

<!-- 绑定内容和属性 -->
<view id="item-{{id}}">{{ info }}</view>

<!-- 算数运算 -->
<view>{{ 1 + 1 }}</view>

<!-- 三元表达式 -->
<view>{{ id == 10 ? "正确" : "错误" }}</view>
1
2
3
4
5
6
7
8
9
10

// 页面数据

Page({
  data: {
  	info: 'hello world',
    id: 10,
    arr: [1, 2, 3]
  }
})
1
2
3
4
5
6
7
8
9

十四、小程序中的事件

官方文档：事件

什么是事件

• 事件是视图层到逻辑层的通讯方式
• 事件可以将用户的行为反馈到逻辑层中进行处理
• 事件可以绑定到组件上，当组件触发事件，就会执行逻辑层中对应的事件处理函数
• 事件对象可以携带额外信息，如： id、dataset、 touches

bindtap 绑定触摸事件

• 在小程序中，不存在网页中的 onclick 鼠标点击事件，而是通过 tap 事件来响应触摸行为
• 在小程序中，可以通过 input 事件来响应文本框内的输入事件
  • 使用 bindinput 为文本框绑定输入事件

data 和 文本框之间的数据同步

• 在文本框的 input 事件处理函数中，通过事件参数 event ，能够访问到文本框的最新值
  • 语法结构 event.detail.value
• 通过 this.setData(dataObject) 方法，可以把页面中的 data 数据重新赋值

<!-- wxml -->
<input bindinput="handleInput" value="{{info}}"></input>
1
2

Page({
	data: {
	    info:'hello world'
	  },
  	handleInput(e) {
   		console.log(e)
	  //  当前输入框中的数据
	   console.log(e.detail.value)
	   	this.setData({
	     info:e.detail.value
  	 	})
  	}
  })
1
2
3
4
5
6
7
8
9
10
11
12
13

十五、小程序中的事件传参

不能再绑定事件的同时传递参数

• 小程序的事件传参比较特殊，不能在为组件绑定事件的同时，为事件处理函数传递参数
• 小程序会把 bindtap 后指定的值，统一当做事件名称来处理

<!--错误做法-->
<button bindtap='btnHandle(123)'></button>
1
2

VM1683:1 Component "pages/tabHome/tabHome" does not have a method "btnHandle(123)" to handle event "tap".
1

通过 data-* 自定义属性传参

• 如果要在组件触发事件处理函数的时候，传递参数，可以为组件提供 data-* 自定义属性传参

获取 data-* 自定义属性中传递的参数

• 通过事件参数 event.target.dataset.参数名，能够获取 data-* 自定义属性传递到事件处理函数中的参数

<!-- 页面结构 -->

<button bindtap='eventHandle' type='primary' data-info='hhh'>传递参数</button>
1
2
3

// 页面逻辑

Page({
  data: {},
    
  eventHandle: function (e) {
    console.log(e.target.dataset.info) //hhh
  }
   
  // coding...
})
1
2
3
4
5
6
7
8
9
10
11