“高级小程序开发指南“
目录
- 引言
- 小程序视图层
- 小程序逻辑层及生命周期
- 总结
引言
随着移动互联网的快速发展,小程序作为一种轻量级的应用形态,在用户使用体验和开发者便捷性方面受到了广泛关注。本篇博客将带你深入探索小程序的视图层和逻辑层,并介绍其生命周期。
小程序视图层
视图层是小程序的前端部分,负责展示页面内容和处理用户操作。下面是视图层的目录结构:
- wxml
<!--pages/a/a.wxml-->
<text>pages/a/a.wxml</text>
<view> {{message}} </view>
<view wx:for="{{array}}"> {{item}} </view>
<view wx:for="{{users}}"> {{item.id}} :{{item.name}}</view>
<!--wxml条件渲染-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
<!--wxml模板-->
<template name="staffName"><view>FirstName: {{firstName}}, LastName: {{lastName}}</view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template><view id="tapTest" data-hi="Weixin" data-meetingSteate="6" bindtap="tapName"> Click me! </view>
- ts
// pages/a/a.ts
Page({/*** 页面的初始数据*/data: {message: 'Hello a!',array: [1, 2, 3, 4, 5],users:[{id:1,name:"张三"},{id:2,name:"张四"},{id:3,name:"张五"},{id:4,name:"张六"}],view:'APP',staffA: {firstName: 'Hulk', lastName: 'Hu'},staffB: {firstName: 'Shang', lastName: 'You'},staffC: {firstName: 'Gideon', lastName: 'Lin'}},tapName: function(event) {console.log(event)},/*** 生命周期函数--监听页面加载*/onLoad() {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})
- 效果图

小程序逻辑层及生命周期
小程序生命周期是指小程序在运行过程中不同阶段的状态变化和相应的触发事件。下面是小程序的详细生命周期介绍:
-
onLoad:当小程序初始化完成时,会触发onLoad事件。在这个阶段,可以进行一些初始化操作和数据加载。
-
onShow:当小程序启动或从后台进入前台显示时,会触发onShow事件。在这个阶段,可以执行一些需要实时更新UI的操作,如获取用户信息、开启定位等。
-
onReady:当小程序页面初次渲染完成时,会触发onReady事件。在这个阶段,可以进行一些页面渲染后的操作,如获取组件的宽高、设置定时器等。
-
onHide:当小程序从前台进入后台时,会触发onHide事件。在这个阶段,可以执行一些暂停或保存数据的操作。
-
onUnload:当小程序销毁时,会触发onUnload事件。在这个阶段,可以执行一些清理操作,如清除定时器、释放资源等。
此外,小程序还有一些可选的生命周期事件,包括:
-
onPullDownRefresh:用户下拉刷新时,会触发onPullDownRefresh事件。在这个阶段,可以执行一些数据刷新操作,如重新请求数据、更新UI等。
-
onReachBottom:当页面滚动到底部时,会触发onReachBottom事件。在这个阶段,可以进行加载更多数据的操作。
-
onShareAppMessage:当用户点击右上角分享按钮时,会触发onShareAppMessage事件。在这个阶段,可以自定义分享内容和路径等。
-
1.一级跳一级
假设1页面跳2页面
1会执行onHide
2会执行onLoad,onShow,onReddy -
2.一级跳二级
假设1页面跳2页面
1会执行onHide
2会执行onLoad,onShow,onReddy -
3.二级跳二级
假设1页面跳2页面
1会执行onHide
2会执行onLoad,onShow,onReddy
点击返回
2会执行onunload(销毁)
1会执行onShow -
4.二级跳一级
2会执行onunload(销毁)
1会执行onShow -
5.页面隔代跳转
总结
1.一级不会销毁
2.层级深跳低会销毁
3.层级低跳高会隐藏
4.隔代跳中间所有页面销毁
总结
本篇博客深入介绍了小程序的视图层和逻辑层,并详细展示了它们各自的目录结构及内容扩展。通过对小程序的全面理解,开发者可以更加灵活地运用视图层和逻辑层的功能,提升小程序的用户体验和功能实现。希望本篇博客能为小程序开发者提供一些帮助和指导。
补充内容:在实际开发过程中,还需要注重小程序的性能优化、安全防护、版本管理等方面的考虑。同时,不断学习新的开发技术和框架,保持对行业的敏感度和创新意识也是非常重要的。祝愿每位开发者都能在小程序开发的道路上取得进步和成就!
相关文章:
“高级小程序开发指南“
目录 引言小程序视图层小程序逻辑层及生命周期总结 引言 随着移动互联网的快速发展,小程序作为一种轻量级的应用形态,在用户使用体验和开发者便捷性方面受到了广泛关注。本篇博客将带你深入探索小程序的视图层和逻辑层,并介绍其生命周期。 …...
分类算法-逻辑回归与二分类
1、逻辑回归的应用场景 广告点击率是否为垃圾邮件是否患病金融诈骗虚假账号 看到上面的例子,我们可以发现其中的特点,那就是都属于两个类别之间的判断。逻辑回归就是解决二分类问题的利器。 2、 逻辑回归的原理 2.1 输入 逻辑回归的输入就是一个线性…...
金融液冷数据中心,噱头还是趋势?
当前,全社会数字化进程加速,金融行业已全面进入数字化和智能化时代。与此同时,随着云计算、分布式架构、大数据分析、通用人工智能等技术的广泛运用,金融行业从数据大集中到分布式融合,金融企业的数据中心建设正围绕其…...
LeetCode 高频题目分类列表
💡 LeetCode 高频面试题分类列表,总共24类,312道题目! 图 133.克隆图 207.课程表 210.课程表 II 399.除法求值 547.省份数量 684.冗余连接 743.网络延迟时间 785.判断二分图 堆 215.数组中的第K个最大元素 295.数据流的中位数 26…...
为什么模方有时候置平之后再打开,置平的地方纹理就缺失了,显示为下图中反光的灰色?
答:一般置平后结构改动多的位置会用灰面填充纹理,可以联动PS或者空三映射进行纹理贴图。 模方是一款针对实景三维模型的冗余碎片、水面残缺、道路不平、标牌破损、纹理拉伸模糊等共性问题研发的实景三维模型修复编辑软件。模方4.0新增单体化建模模块&am…...
k8s基础 随笔
写个笔记,后面再完善 部署第一个应用 为什么先实战水平扩缩?因为这个最简单,首先来部署一个喜闻乐见的nginx kubectl create deployment web --imagenginx:1.14 --dry-run -o yaml > web.yaml --dry-run表示试运行,试一下看…...
c# 关于某管理业务系统对数据统计问题.
1.业务系统主要的就是功能的稳定,流畅性. 最近客户提出某统计功能数据加载到页面很慢.反映到运维工程师处,运维跟我说之后我(研发), 我看了看代码,有几处代码确实需要优化,统计功能调用了4次服务端,每一次客户端调用服务端的时候返回结果3S左右,有三次调用服务端,一共大约耗时…...
nginx 配置相关详解
目录 Nginx的优点 Nginx简介 Nginx的优点 可以高并发连接 内存消耗少 成本低廉 配置文件非常易懂 稳定性高 内置有健康的检查功能 支持Rewrite重写 支持热部署 Nginx与Apache的对比 Nginx多进程工作原理跟设计 Nginx是如何实现高性能的 事件驱动模型 多进程机制…...
解决spring项目中无法加载resources下文件
解决spring项目中无法加载resources下文件 问题发现问题解决步骤一:检查文件名步骤二:确保测试资源目录步骤三:检查文件路径是否正确 问题发现 在学习Spring过程中,TestContext框架试图检测一个默认的XML资源位置。如果您的类被命…...
【广州华锐互动】人体血管器官3D动态展示为医学生提供哪些便利?
人体血管器官3D动态展示是一种采用先进的计算机图形技术和立体成像技术,对人体内部结构和功能进行三维可视化的教学方法。这种教学方式以其独特的优势,正在改变传统的解剖学教学模式,为医学教育带来了革新。 首先,3D动态演示能够提…...
【QT开发笔记-基础篇】| 第四章 事件QEvent | 4.7 拖放事件
本节对应的视频讲解:B_站_链_接 【QT开发笔记-基础篇】 第4章 事件 4.7 拖动事件 本章要实现的整体效果如下: QEvent::DragEnter 当拖动文件进入到窗口/控件中时,触发该事件,它对应的子类是 QDragEnterEvent QEvent::DragLe…...
【Linux】介绍 Docker 的基本概念和优势,以及在应用程序开发中的实际应用
Docker 是一种轻量级的虚拟化技术,它基于 Linux 容器技术,能够在不同平台、不同主机上快速地运行和部署应用程序。Docker 的基本概念包括以下几点: 镜像(Image):Docker 镜像是一个只读的模板,它…...
GUN C/C++ undefined reference to symbol ‘dlclose@@GLIBC_2.2.5‘
编译问题: /usr/bin/ld: ../../3rdParty/lib/libluajit.a(lj_clib.o): undefined reference to symbol dlcloseGLIBC_2.2.5 //usr/lib64/libdl.so.2: error adding symbols: DSO missing from command line collect2: error: ld returned 1 exit status make[1]: …...
RabbitMQ概述,死信队列
RabbitMQ(Rabbit Message Queue)是一个开源的消息队列中间件,它实现了高级消息队列协议(AMQP)并提供可靠的消息传递机制。RabbitMQ 在分布式系统中广泛用于消息传递和事件驱动的架构。以下是一些 RabbitMQ 的重要知识点…...
【开发日常】insmod: error inserting ‘*.ko‘: -1 Unknown symbol in module原理分析
问题的起源是一次面试,面试官询问加载内核的时候,如果insmod失败,且提示Unknown symbol in module。请问我里面的原理是什么呢?为什么内核知道当前缺少的是这个symbol? 想了解下具体的原因。 首先是模拟一个环境。 写…...
圆弧插补【C#】
圆弧: 圆弧插补方法可以通过提供圆弧的起点、终点和半径来画弧。下面是一个用C#实现的圆弧插补方法的示例代码: public void DrawArc(Point startPoint, Point endPoint, int radius, bool isClockwise) {// 计算圆心坐标int centerX (startPoint.X e…...
Redis EmbeddedString
前言 Redis 写入键值对时,首先会先创建一个 RedisObject 对象来存储 Value。 如果写入的 Value 是字符串,那么 Redis 会再根据写入的字符串长度,来创建对应的 sdshdr 来存储字符串,最后把 RedisObject 的 ptr 指针指向 sdshdr。 …...
SpringMVC之WEB-INF下页面跳转@ModelAttributeIDEA tomcat控制台中文乱码问题处理
WEB-INF下页面跳转 ModelAttribute来注解非请求处理方法 用途:预加载数据,会在每个RequestMapping方法执行之前调用。 特点:无需返回视图,返回类型void IDEA tomcat控制台中文乱码问题处理 复制此段代码:-Dfile.e…...
利用ChatGPT练习口语
目录 ChatGPT 这两天发布了一个激动人心的新功能,App端(包括iOS和Android)开始支持语音对话以及图片识别功能。 这两个功能一如既往的优先开放给Plus用户使用,现在将App更新到最新版本,就能体验。 为什么说激动人心&a…...
【Django 01】环境搭配与项目配置
1. 介绍 https://github.com/Joe-2002/sweettalk-django4.2#readme Django 是一个使用 Python 编写的开源 Web 应用程序框架,它提供了一套用于快速开发安全、 可扩展和高效的 Web 应用程序的工具和功能。Django 基于 MVC(Model-View-Controller…...
基于算法竞赛的c++编程(28)结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中,结构体可以嵌套使用,形成更复杂的数据结构。例如,可以通过嵌套结构体描述多层级数据关系: struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
uniapp 对接腾讯云IM群组成员管理(增删改查)
UniApp 实战:腾讯云IM群组成员管理(增删改查) 一、前言 在社交类App开发中,群组成员管理是核心功能之一。本文将基于UniApp框架,结合腾讯云IM SDK,详细讲解如何实现群组成员的增删改查全流程。 权限校验…...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架,它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用,和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
边缘计算医疗风险自查APP开发方案
核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...
pam_env.so模块配置解析
在PAM(Pluggable Authentication Modules)配置中, /etc/pam.d/su 文件相关配置含义如下: 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块,负责验证用户身份&am…...
P3 QT项目----记事本(3.8)
3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...
大模型多显卡多服务器并行计算方法与实践指南
一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...
12.找到字符串中所有字母异位词
🧠 题目解析 题目描述: 给定两个字符串 s 和 p,找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义: 若两个字符串包含的字符种类和出现次数完全相同,顺序无所谓,则互为…...
ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作:ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等(ArcGIS出图图例8大技巧),那这次我们看看ArcGIS Pro如何更加快捷的操作。…...
华硕a豆14 Air香氛版,美学与科技的馨香融合
在快节奏的现代生活中,我们渴望一个能激发创想、愉悦感官的工作与生活伙伴,它不仅是冰冷的科技工具,更能触动我们内心深处的细腻情感。正是在这样的期许下,华硕a豆14 Air香氛版翩然而至,它以一种前所未有的方式&#x…...
