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

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。

相关文章

详解SpringBoot+Ehcache使用示例

详解SpringBoot+Ehcache使用示例

《详解SpringBoot+Ehcache使用示例》本文介绍了SpringBoot中配置Ehcache、自定义get/set方式,并实际使用缓存的过程,文中通过示例代码介绍的非常详细,对大家的学习或者... 目录摘要概念内存与磁盘持久化存储：配置灵活性：编码示例引入依赖：配置ehcache.XML文件：配置
阅读更多...
从基础到高级详解Go语言中错误处理的实践指南

从基础到高级详解Go语言中错误处理的实践指南

《从基础到高级详解Go语言中错误处理的实践指南》Go语言采用了一种独特而明确的错误处理哲学,与其他主流编程语言形成鲜明对比,本文将为大家详细介绍Go语言中错误处理详细方法,希望对大家有所帮助... 目录1 Go 错误处理哲学与核心机制1.1 错误接口设计1.2 错误与异常的区别2 错误创建与检查2.1 基础
阅读更多...
k8s按需创建PV和使用PVC详解

k8s按需创建PV和使用PVC详解

《k8s按需创建PV和使用PVC详解》Kubernetes中,PV和PVC用于管理持久存储,StorageClass实现动态PV分配,PVC声明存储需求并绑定PV,通过kubectl验证状态,注意回收... 目录1.按需创建 PV（使用 StorageClass）创建 StorageClass2.创建 PV
阅读更多...
Python版本信息获取方法详解与实战

Python版本信息获取方法详解与实战

《Python版本信息获取方法详解与实战》在Python开发中,获取Python版本号是调试、兼容性检查和版本控制的重要基础操作,本文详细介绍了如何使用sys和platform模块获取Python的主... 目录1. python版本号获取基础2. 使用sys模块获取版本信息2.1 sys模块概述2.1.1
阅读更多...
一文详解Python如何开发游戏

一文详解Python如何开发游戏

《一文详解Python如何开发游戏》Python是一种非常流行的编程语言,也可以用来开发游戏模组,：本文主要介绍Python如何开发游戏的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录一、python简介二、Python 开发 2D 游戏的优劣势优势缺点三、Python 开发 3D
阅读更多...
Redis 基本数据类型和使用详解

Redis 基本数据类型和使用详解

《Redis基本数据类型和使用详解》String是Redis最基本的数据类型,一个键对应一个值,它的功能十分强大,可以存储字符串、整数、浮点数等多种数据格式,本文给大家介绍Redis基本数据类型和... 目录一、Redis 入门介绍二、Redis 的五大基本数据类型2.1 String 类型2.2 Hash
阅读更多...
Java中的.close()举例详解

Java中的.close()举例详解

《Java中的.close()举例详解》.close()方法只适用于通过window.open()打开的弹出窗口,对于浏览器的主窗口,如果没有得到用户允许是不能关闭的,：本文主要介绍Java中的.... 目录当你遇到以下三种情况时，一定要记得使用 .close()：用法作用举例如何判断代码中的 input
阅读更多...
Linux创建服务使用systemctl管理详解

Linux创建服务使用systemctl管理详解

《Linux创建服务使用systemctl管理详解》文章指导在Linux中创建systemd服务,设置文件权限为所有者读写、其他只读,重新加载配置,启动服务并检查状态,确保服务正常运行,关键步骤包括权... 目录创建服务 /usr/lib/systemd/system/设置服务文件权限：所有者读写js，其他
阅读更多...
通过React实现页面的无限滚动效果

通过React实现页面的无限滚动效果

《通过React实现页面的无限滚动效果》今天我们来聊聊无限滚动这个现代Web开发中不可或缺的技术,无论你是刷微博、逛知乎还是看脚本,无限滚动都已经渗透到我们日常的浏览体验中,那么,如何优雅地实现它呢？... 目录1. 早期的解决方案2. 交叉观察者：IntersectionObserver2.1 Inter
阅读更多...
k8s中实现mysql主备过程详解

k8s中实现mysql主备过程详解

《k8s中实现mysql主备过程详解》文章讲解了在K8s中使用StatefulSet部署MySQL主备架构,包含NFS安装、storageClass配置、MySQL部署及同步检查步骤,确保主备数据一致... 目录一、k8s中实现mysql主备1.1 环境信息1.2 部署nfs-provisioner1.2.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2