小程序框架语法详解以及页面生命周期的代码预演

2023-11-08 01:59
文章标签 代码 程序 详解 语法 页面 框架 生命周期 预演

本文主要是介绍小程序框架语法详解以及页面生命周期的代码预演，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

一、框架简介

二、视图层

2.1 简介

2.2 WXML语法演示

2.2.1 数据绑定

2.2.2 列表渲染

2.2.3 条件渲染

2.2.4 模板

2.3 事件系统

2.4 页面一级菜单展示及切换

2.5 a页面跳b页面界面内部按钮演示

2.6 a页面跳c页面（不在一级菜单内的页面）

三、页面生命周期

3.1 详解

3.2 图解

3.3 代码预演

3.3.1 一级跳一级

3.3.2 一级跳二级

3.3.3 二级跳二级

3.3.4 页面隔代跳转

3.4 代码预演结果总结

四、收获

一、框架简介

微信小程序框架是一种开发小程序的基础结构，它提供了一组规范和工具，用于构建、管理和运行微信小程序。微信小程序框架的主要作用是简化小程序开发过程，提供一种结构化的方式来组织代码，使开发者能够更轻松地创建小程序应用。以下是关于微信小程序框架的一些重要信息：

  1. 基本架构：微信小程序框架通常由三个主要部分组成：

    • 逻辑层：这是小程序的核心，用于处理小程序的业务逻辑。逻辑层使用JavaScript编写，并包括页面逻辑、网络请求、数据处理等。
    • 视图层：视图层负责渲染小程序的界面，通常使用WXML（类似于HTML）和WXSS（类似于CSS）来定义页面结构和样式。
    • 配置：小程序的全局配置，包括小程序的名称、页面路径、tabBar等信息。

  2. 双向绑定：微信小程序框架支持数据的双向绑定，这意味着数据的变化会自动更新到页面上，而页面上的操作也可以反馈到数据模型中。这有助于实现实时的界面更新。

  3. 事件处理：框架提供了丰富的事件处理机制，允许开发者为页面元素绑定事件处理函数，例如点击事件、输入事件等。

  4. 小程序生命周期：框架定义了小程序的生命周期，包括onLoad、onShow、onReady、onHide、onUnload等生命周期函数，开发者可以在这些函数中执行特定的操作。

  5. 模块化开发：微信小程序框架支持模块化开发，允许开发者将代码划分为模块，提高了代码的可维护性和重用性。

  6. 网络请求：框架提供了内置的网络请求API，用于与服务器通信，获取数据并更新页面。

  7. 本地存储：小程序框架允许开发者使用本地存储功能，将数据保存在用户的设备上，以提高小程序的性能和用户体验。

  8. 第三方库支持：微信小程序框架支持使用第三方JavaScript库，以扩展小程序的功能和效率。

  9. 跨平台开发：微信小程序框架可以在不同平台上运行，包括iOS、Android和Web，这使得开发者可以更轻松地跨平台开发应用。

总的来说，微信小程序框架为开发者提供了一种方便、高效的方式来创建小程序应用。开发者可以使用框架提供的工具和规范来管理小程序的结构和功能，从而快速开发出具备良好用户体验的小程序应用。

二、视图层

2.1 简介

微信小程序框架的视图层是小程序应用的界面渲染部分，负责展示用户界面和处理用户交互。以下是有关微信小程序框架视图层的简介：

  1. WXML（WeiXin Markup Language）：WXML是一种类似于HTML的标记语言，用于定义小程序的页面结构。与HTML不同，WXML更加精简，包含少量标签和属性，专注于描述页面的结构。在WXML中，你可以定义视图元素、组件、数据绑定等。

  2. WXSS（WeiXin Style Sheet）：WXSS是一种类似于CSS的样式定义语言，用于控制小程序页面的样式。你可以在WXSS中定义样式规则，包括颜色、字体、布局等，然后将这些规则应用于WXML中的元素。微信小程序框架支持类似CSS的选择器，使样式定义更灵活。

  3. 组件：微信小程序框架提供了一系列内置组件，如view、text、button、image等，用于构建页面元素。除了内置组件，你还可以创建自定义组件，以便在不同页面中重复使用相同的功能或界面元素。

  4. 数据绑定：视图层支持数据绑定，这意味着你可以将数据绑定到页面上，实现数据的动态展示。通过使用双花括号{{}}，你可以将页面的元素和数据模型关联起来。当数据模型中的数据发生变化时，页面会自动更新以反映这些变化。

  5. 事件处理：你可以在视图层中定义事件处理函数，以响应用户的交互操作，如点击事件、触摸事件等。事件处理函数通常使用bind和catch前缀来绑定到相应的组件上。

  6. 模板和条件渲染：微信小程序框架支持模板的使用，你可以将一组相同结构的元素封装为一个模板，并在不同位置引用它们，提高代码的重用性。另外，你可以使用条件渲染来控制在不同条件下渲染不同的内容。

  7. 页面栈管理：微信小程序框架维护了一个页面栈，允许你在不同页面之间进行导航。你可以通过wx.navigateTo、wx.redirectTo等API来管理页面栈，实现页面之间的切换和导航。

  8. 动画效果：视图层支持添加动画效果，通过wx.createAnimation和动画API来实现元素的平移、旋转、缩放等动画效果，增强用户体验。

总的来说，微信小程序框架的视图层提供了丰富的工具和功能，用于构建小程序的用户界面，实现数据展示、用户交互和界面美化。通过合理使用WXML、WXSS、组件和事件处理，开发者可以创建各种类型的小程序应用，从简单的信息展示页面到复杂的交互应用。

2.2 WXML语法演示

在进行代码演示前我们先新建四个今天要用的新页面，在昨天的代码上加上新的代码，如下：

 "pages/a/a","pages/b/b","pages/c/c","pages/d/d",

紧接着开发工具会自动生成目录，如下：

2.2.1 数据绑定

在a.wxml文件中加入以下代码，如下：

<!--pages/a/a.wxml-->
<view>{{message}}</view>

然后在a.js中data下加入message代码，如下：

/*** 页面的初始数据*/data: {message:'Hello 页面1!'},

模拟器展示效果如下：

2.2.2 列表渲染

在a.wxml中加入以下代码，如下：

<view wx:for="{{array}}"> {{item}} </view>

在a.js中加入以下代码，如下：

array:[1,2,3,4,5],

模拟器展示效果如下：

但是我们写小程序一般在数组中放的都是对象，那么代码应该如下：

在a.js加入：

users: [{ id: 1, name: '刘三金' }, { id: 2, name: '疯翰林' }, { id: 3, name: '丧表锅' }]

在a.wxml加入：

<view wx:for="{{users}}" wx:key="id">用户编号：{{item.id}};用户姓名：{{item.name}};</view>

模拟器展示效果如下：

2.2.3 条件渲染

在a.wxml中加入以下代码，如下：

<!--wxml-->
<view wx:if="{{view == '1'}}"> "生命如同骑自行车，想要保持平衡就得不断前进。" — 阿尔伯特·爱因斯坦 </view>
<view wx:elif="{{view == '2'}}"> "行动胜过千言万语。" — 狄奥尼修斯 </view>
<view wx:else="{{view == '3'}}"> "时刻保持好奇心，保持学习的态度。" — 斯蒂芬·霍金 </view>

在a.js中data代码块下加入view，如下：

view:3

条件渲染演示效果如下：

2.2.4 模板

在a.wxml中加入以下代码，如下：

<!--wxml-->
<template name="staffName"><view>炙热沙城II: {{firstName}}, 炼狱小镇: {{lastName}}</view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

在a.js中data代码块下加入以下代码，如下：

 staffA: {firstName: 'B1', lastName: '锅炉房'},staffB: {firstName: 'XBOX', lastName: '旋梯'},staffC: {firstName: '沙地', lastName: '连接'}

模拟器演示效果如下：

2.3 事件系统

事件使用：首先在a.wxml中加入以下代码：

<view id="tapTest" data-hi="找不到我吧" data-meetingSteate="1" bindtap="tapName"> 点我！！！ </view>

然后在a.js中加入：

 tapName: function(event) {console.log(event)},

模拟器效果展示如下：

那么当我们想拿到data-hi以及data-meetingSteate中的值时，我们可以进行以下操作：

在tapName代码块下加入：

console.log(event.target.dataset);

模拟器展示效果如下：

2.4 页面一级菜单展示及切换

参考微信开发文档，全局配置进行代码优化，如下：

在app.json中加入以下代码，如下：

"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页"}, {"pagePath": "pages/a/a","text": "a页面"}, {"pagePath": "pages/b/b","text": "b页面"}]},

然后把主页面挪到所有页面最上方，如下：

紧接着我们通过模拟器观看效果，如下：

这样我们的小程序页面一级菜单及切换就完成了。 那么假如我们现在还有一个c页面，并不在一级菜单栏中，又该如何跳转呢？这就牵扯到生命周期了，下面听博主娓娓道来。

2.5 a页面跳b页面界面内部按钮演示

在a.wxml中加入以下代码：

<button bindtap="atob">a页面跳b页面</button>

在a.js中加入以下代码：

atob:function() {wx.switchTab({url: '/pages/b/b',})},

然后保存重新编译代码打开模拟器查看演示效果，如下：

2.6 a页面跳c页面（不在一级菜单内的页面）

在a.wxml中加入按钮代码如下：

<button bindtap="atoc">a页面跳c页面</button>

在a.js中加入以下代码，如下：

 atoc:function() {wx.navigateTo({url: '/pages/c/c',})},

模拟器展示如下：

接下来就是生命周期的理解了。

三、页面生命周期

3.1 详解

微信小程序的逻辑层生命周期是指在小程序的运行过程中，逻辑层（JavaScript 文件）中的不同生命周期函数被调用的顺序。这些生命周期函数允许你在不同的时刻执行特定的操作，以响应小程序的生命周期事件。以下是微信小程序逻辑层的主要生命周期函数及其调用顺序：

  1. onAppLaunch(options)：当小程序初始化启动时调用，只在小程序第一次启动时触发。

  2. onLaunch(options)：当小程序初始化启动时调用，包括首次进入小程序和后台切前台。

  3. onShow(options)：当小程序启动，或从后台切前台时调用，可以获得进入小程序的路径、场景值等信息。

  4. onHide()：当小程序从前台切入后台时调用。

  5. onError(error)：当小程序发生脚本错误或 API 调用失败时调用，可以用于监测和上报错误。

  6. onPageNotFound(options)：当小程序页面不存在时触发，可以用于自定义页面不存在时的行为。

  7. onUnhandledRejection：当 Promise 被 reject 且没有错误处理函数时，会触发此函数。

  8. onThemeChange：当系统主题变化时，触发此函数。

除了上述的生命周期函数，逻辑层还可以定义页面级别的生命周期函数，这些函数通常在对应的页面文件中定义。例如：

  1. onLoad(options)：在页面加载时触发，可以获得页面跳转时传递的参数。

  2. onShow()：当页面显示时触发。

  3. onReady()：当页面初次渲染完成时触发，表示页面已经准备就绪。

  4. onHide()：当页面从前台切入后台时触发。

  5. onUnload()：当页面被销毁时触发，如页面被关闭或切换到其他页面。

这些生命周期函数允许你在不同的时机执行代码，以实现特定的功能和逻辑。理解这些生命周期函数的调用顺序对于开发小程序非常重要，因为它们决定了何时执行特定的操作，如数据加载、页面渲染、事件绑定等。

3.2 图解

官方图解生命周期：

3.3 代码预演

页面跳转的几种情况罗列：

  1. 一级跳一级
  2. 一级跳二级
  3. 二级跳二级
  4. 二级跳一级（通过js的路由方式去跳转页面）
  5. 页面隔代跳转 （即从a-b-c-d-a，从a页面跳到b页面依次跳转最后跳到d页面，然后从d页面直接跳转回a页面，这种情况下b页面跟c页面的数据到底会不会丢失？）

然后我们把四个界面的js页面中生命周期函数用console.log打印出来，如下：

 /*** 生命周期函数--监听页面加载*/onLoad(options) {console.log("a.onLoad");},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {console.log("a.onReady");},/*** 生命周期函数--监听页面显示*/onShow() {console.log("a.onShow");},/*** 生命周期函数--监听页面隐藏*/onHide() {console.log("a.onHide");},/*** 生命周期函数--监听页面卸载*/onUnload() {console.log("a.onUnload");},

3.3.1 一级跳一级

具体操作如下：

可以看到我们一级菜单跳一级菜单出发了三个生命周期函数，分别是：

index—>a

a.onLoad，a.onShow，a.onReady

a—>b

a.onHide，b.onLoad，b.onShow，b.onReady

3.3.2 一级跳二级

具体效果如下：

a—>c（一级跳二级）

a.onHide，c.onLoad，c.onShow，c.onReady

c—>a（二级返回一级）

c.onUnload，a.onShow

3.3.3 二级跳二级

为了演示需求，我们需要在二级菜单（即c页面添加按钮进行跳转），添加的代码如下：

在c.wxml中加入以下代码：

<button bindtap="ctod">c页面跳d页面</button>
<button bindtap="ctob">c页面跳b页面</button>

在c.js中加入以下代码，如下：

 ctod:function() {wx.navigateTo({url: '/pages/d/d',})},ctob:function() {wx.switchTab({url: '/pages/b/b',})},

添加完之后我们就可以进行代码预演了，模拟器演示如下：

c—>d

c.onHide，d.onLoad，d.onShow，d.onReady

d—>c

d.onUnload，c.onShow

c—>a

c.onUnload，a.onShow

3.3.4 页面隔代跳转

模拟器代码预演操作如下：

a—>c—>d—>a

d.onUnload，c.onUnload，a.onShow

3.4 代码预演结果总结

  1. 一级不会销毁.
  2. 二级层级深的跳到层级低的会销毁.
  3. 二级层级低跳到高的只会隐藏.
  4. 隔代中间所有页面会被销毁.

四、收获

学习小程序框架页面生命周期是非常重要的，因为它们决定了小程序页面在不同阶段执行的操作。页面生命周期函数允许你在不同的时间点执行特定的逻辑，以确保你的小程序页面能够按照预期工作。

以下是一些关于小程序页面生命周期的收获：

通过充分理解这些生命周期函数，你可以更好地掌握小程序页面的开发和控制页面的行为。你可以在不同的生命周期函数中执行不同的操作，确保页面能够响应用户的操作和事件，以提供更好的用户体验。同时，你还可以利用生命周期函数来处理资源管理和性能优化，以确保小程序的流畅运行。

最后小程序框架语法详解以及页面生命周期的代码预演就到这里，祝大家在敲代码的路上一路通畅!

感谢大家的观看 !

这篇关于小程序框架语法详解以及页面生命周期的代码预演的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/367269。

相关文章

C++ move 的作用详解及陷阱最佳实践

C++ move 的作用详解及陷阱最佳实践

《C++move的作用详解及陷阱最佳实践》文章详细介绍了C++中的`std::move`函数的作用,包括为什么需要它、它的本质、典型使用场景、以及一些常见陷阱和最佳实践,感兴趣的朋友跟随小编一起看... 目录C++ move 的作用详解一、一句话总结二、为什么需要 move？C++98/03 的痛点⚡C++
阅读更多...
MySQL中between and的基本用法、范围查询示例详解

MySQL中between and的基本用法、范围查询示例详解

《MySQL中betweenand的基本用法、范围查询示例详解》BETWEENAND操作符在MySQL中用于选择在两个值之间的数据,包括边界值,它支持数值和日期类型,示例展示了如何使用BETWEEN... 目录一、between and语法二、使用示例2.1、betwphpeen and数值查询2.2、be
阅读更多...
python中的flask_sqlalchemy的使用及示例详解

python中的flask_sqlalchemy的使用及示例详解

《python中的flask_sqlalchemy的使用及示例详解》文章主要介绍了在使用SQLAlchemy创建模型实例时,通过元类动态创建实例的方式,并说明了如何在实例化时执行__init__方法,... 目录@orm.reconstructorSQLAlchemy的回滚关联其他模型数据库基本操作将数据添
阅读更多...
Java中ArrayList与顺序表示例详解

Java中ArrayList与顺序表示例详解

《Java中ArrayList与顺序表示例详解》顺序表是在计算机内存中以数组的形式保存的线性表,是指用一组地址连续的存储单元依次存储数据元素的线性结构,：本文主要介绍Java中ArrayList与... 目录前言一、Java集合框架核心接口与分类ArrayList二、顺序表数据结构中的顺序表三、常用代码手动
阅读更多...
JAVA项目swing转javafx语法规则以及示例代码

JAVA项目swing转javafx语法规则以及示例代码

《JAVA项目swing转javafx语法规则以及示例代码》：本文主要介绍JAVA项目swing转javafx语法规则以及示例代码的相关资料,文中详细讲解了主类继承、窗口创建、布局管理、控件替换、... 目录最常用的“一行换一行”速查表（直接全局替换）实际转换示例（JFramejs → JavaFX）迁移建
阅读更多...
Go异常处理、泛型和文件操作实例代码

Go异常处理、泛型和文件操作实例代码

《Go异常处理、泛型和文件操作实例代码》Go语言的异常处理机制与传统的面向对象语言（如Java、C#）所使用的try-catch结构有所不同,它采用了自己独特的设计理念和方法,：本文主要介绍Go异... 目录一：异常处理常见的异常处理向上抛中断程序恢复程序二：泛型泛型函数泛型结构体泛型切片泛型 map三：文
阅读更多...
JAVA线程的周期及调度机制详解

JAVA线程的周期及调度机制详解

《JAVA线程的周期及调度机制详解》Java线程的生命周期包括NEW、RUNNABLE、BLOCKED、WAITING、TIMED_WAITING和TERMINATED,线程调度依赖操作系统,采用抢占... 目录Java线程的生命周期线程状态转换示例代码JAVA线程调度机制优先级设置示例注意事项JAVA线程
阅读更多...
详解C++ 存储二进制数据容器的几种方法

详解C++ 存储二进制数据容器的几种方法

《详解C++存储二进制数据容器的几种方法》本文主要介绍了详解C++存储二进制数据容器,包括std::vector、std::array、std::string、std::bitset和std::ve... 目录1.std::vector<uint8_t>（最常用）特点：适用场景：示例：2.std::arra
阅读更多...
C++构造函数中explicit详解

C++构造函数中explicit详解

《C++构造函数中explicit详解》explicit关键字用于修饰单参数构造函数或可以看作单参数的构造函数,阻止编译器进行隐式类型转换或拷贝初始化,本文就来介绍explicit的使用,感兴趣的可以... 目录1. 什么是explicit2. 隐式转换的问题3.explicit的使用示例基本用法多参数构造
阅读更多...
Android使用java实现网络连通性检查详解

Android使用java实现网络连通性检查详解

《Android使用java实现网络连通性检查详解》这篇文章主要为大家详细介绍了Android使用java实现网络连通性检查的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录NetCheck.Java（可直接拷贝）使用示例（Activity/Fragment 内）权限要求
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2