【小程序全面解析】生命周期、常用组件，代码示例和使用场景

文章目录

上一篇文章我们实现了小程序
用户增删改查功能，在这篇文章中我们详细介绍一下小程序生命周期，以及小程序基础组件。

前言

小程序是一种轻量级的应用程序，具有独立的生命周期和基础组件。以下是小程序的生命周期介绍、常用基础组件介绍、代码示例和使用场景。

小程序生命周期

小程序生命周期指的是小程序从创建到销毁期间经历的一系列阶段和事件。了解小程序生命周期可以帮助开发者在适当的时机执行相应的代码逻辑。

小程序的生命周期可以分为两部分：应用生命周期和页面生命周期。

应用生命周期

应用生命周期指的是小程序从启动到销毁期间经历的一系列阶段和事件。以下是小程序应用生命周期的各个阶段：

onLaunch: 当小程序初始化完成时触发，全局只触发一次；
onShow: 当小程序启动或从后台进入前台显示时触发；
onHide: 当小程序从前台进入后台时触发；
onError: 当小程序发生脚本错误或 API 调用失败时触发；
onPageNotFound: 当小程序页面找不到时触发。

以下是小程序应用生命周期的代码示例：

App({onLaunch:function(){
    console.log('小程序初始化完成')},onShow:function(){
    console.log('小程序启动或从后台进入前台显示')},onHide:function(){
    console.log('小程序从前台进入后台')},onError:function(msg){
    console.log('小程序发生错误：', msg)},onPageNotFound:function(options){
    console.log('小程序页面找不到：', options)}})

页面生命周期

页面生命周期指的是小程序页面从创建到销毁期间经历的一系列阶段和事件。以下是小程序页面生命周期的各个阶段：

onLoad: 当页面加载时触发；
onShow: 当页面显示时触发；
onReady: 当页面初次渲染完成时触发；
onHide: 当页面隐藏时触发；
onUnload: 当页面卸载时触发。

以下是小程序页面生命周期的代码示例：

Page({onLoad:function(options){
    console.log('页面加载')},onShow:function(){
    console.log('页面显示')},onReady:function(){
    console.log('页面初次渲染完成')},onHide:function(){
    console.log('页面隐藏')},onUnload:function(){
    console.log('页面卸载')}})

使用场景

小程序生命周期的使用场景比较广泛，例如：

onLoad：用于获取页面参数，初始化数据等；
onShow：用于监听页面显示事件，执行一些初始化操作；
onHide：用于监听页面隐藏事件，暂停页面动画和音乐等操作；
onUnload：用于监听页面卸载事件，清除页面相关的定时器和数据等。

开发者可以根据具体的业务需求，在生命周期函数中编写相应的代码逻辑。

小程序的基础组件

小程序的基础组件是小程序提供的常用组件，包括视图容器、表单组件、媒体组件等。开发者可以通过使用这些基础组件来快速构建小程序页面。

以下是小程序常用的基础组件介绍、代码示例及使用场景：

视图容器

视图容器是小程序中最常用的组件之一，包括 view、scroll-view、swiper 等。

view：视图容器，类似于 HTML 中的 div，用于组合其他组件和文本。
scroll-view：可滚动视图容器，可以垂直和水平滚动，用于显示长列表和横向滑动的内容。
swiper：轮播图组件，用于展示多张图片或卡片式内容。
以下是 view 组件的代码示例：

<viewclass="container"><viewclass="title">这是一个标题</view><viewclass="content">这是内容区域</view></view>

使用场景：用于组合其他组件和文本，构建页面的基本结构。

表单组件

表单组件用于收集用户输入的数据，包括 input、textarea、radio、checkbox 等。

input：文本输入框，用于输入单行文本。
textarea：多行文本输入框，用于输入多行文本。
radio：单选框，用于选择一个选项。
checkbox：多选框，用于选择多个选项。
以下是 input 组件的代码示例：

<formbindsubmit="onSubmit"><viewclass="form-item"><viewclass="form-label">用户名：</view><inputname="username"placeholder="请输入用户名"/></view><viewclass="form-item"><viewclass="form-label">密码：</view><inputname="password"type="password"placeholder="请输入密码"/></view><buttonformType="submit">提交</button></form>

使用场景：用于收集用户输入的数据，例如登录、注册、搜索等场景。

媒体组件

媒体组件用于播放音频、视频和图片，包括 image、audio、video 等。

image：图片组件，用于显示图片。
audio：音频组件，用于播放音频。
video：视频组件，用于播放视频。
以下是 image 组件的代码示例：

<viewclass="container"><imagesrc="{{imageUrl}}"mode="aspectFit"></image></view>

使用场景：用于展示图片、播放音频和视频等媒体内容。

总结

本篇文章主要介绍如何从零开始开发微信小程序，并以实现用户增删改查功能为例，详细讲解了小程序的目录结构、项目创建、编码等方面。通过本文的学习，读者可以了解到微信小程序开发的基本流程和常见操作，为深入学习和实践提供了基础。

希望本文对初学者有所帮助，如果有任何问题或建议，欢迎留言讨论。

写在最后

✨原创不易，希望各位大佬多多支持。

👍点赞，你的认可是我创作的动力。

⭐️收藏，感谢你对本文的喜欢。

✏️评论，你的反馈是我进步的财富。