微信小程序知识点整理一

JAY.LIN 收录于微信小程序

2024-12-30 约 3012 字预计阅读 7 分钟

https://bing.ee123.net/img/rand?artid=103603916

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

文章目录

一、什么是 `rpx` 尺寸单位

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

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

二、 `rpx` 与 `px` 之间的换算

以 `iPhone6` 为例， `iPhone6` 的屏幕宽度为 `375px` ，共有 750 个物理像素，则 `750rpx`

`375px`

`750` 物理像素，也就是 **`1rpx`

`0.5px`

1 物理像素** ， 因为设计师的图一般是二倍图，所以在iphone6下直接使用测量出来的值来设置rpx就可以了

设备	`rpx` 换算 `px` (屏幕宽度/750)	`px` 换算 `rpx` (750/屏幕宽度)
`iPhone5`	`1rpx` = 0.42 `px`	`1px` = `2.34rpx`
`iPhone6`	`1rpx` = `0.5px`	`1px` = `2rpx`
`iPhone6 Plus`	`1rpx` = `0.552px`	`1px` = `1.81rpx`

三、 `@import` 样式导入

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

data-*属性选择器

[data-color='pink'] {
  color: pink;
}

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

.box {
  width: 375rpx;
  height: 375rpx;
  background-color: skyblue;
}

四、全局样式和局部样式

全局样式

定义在 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 中，只能配置最少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) {
    
  }
})

十二、页面生命周期函数

每个小程序页面，必须拥有自己的 .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 () {

  }
})

官方文档:

十三、数据绑定

如何定义页面的数据

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

`Mustache` 语法格式

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

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

Mustache 语法的主要场景

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

案例代码

<!-- 页面结构 -->

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

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

<!-- 三元表达式 -->
<view>{{ id == 10 ? "正确" : "错误" }}</view>

// 页面数据

Page({
  data: {
  	info: 'hello world',
    id: 10,
    arr: [1, 2, 3]
  }
})

十四、小程序中的事件

官方文档：

什么是事件

事件是视图层到逻辑层的通讯方式
事件可以将用户的行为反馈到逻辑层中进行处理
事件可以绑定到组件上，当组件触发事件，就会执行逻辑层中对应的事件处理函数
事件对象可以携带额外信息，如： 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>

Page({
	data: {
	    info:'hello world'
	  },
  	handleInput(e) {
   		console.log(e)
	  //  当前输入框中的数据
	   console.log(e.detail.value)
	   	this.setData({
	     info:e.detail.value
  	 	})
  	}
  })

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

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

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

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

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

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

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

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

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

<!-- 页面结构 -->

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

// 页面逻辑

Page({
  data: {},
    
  eventHandle: function (e) {
    console.log(e.target.dataset.info) //hhh
  }
   
  // coding...
})