“高级小程序开发指南“
目录
- 引言
- 小程序视图层
- 小程序逻辑层及生命周期
- 总结
引言
随着移动互联网的快速发展,小程序作为一种轻量级的应用形态,在用户使用体验和开发者便捷性方面受到了广泛关注。本篇博客将带你深入探索小程序的视图层和逻辑层,并介绍其生命周期。
小程序视图层
视图层是小程序的前端部分,负责展示页面内容和处理用户操作。下面是视图层的目录结构:
- 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…...
手游刚开服就被攻击怎么办?如何防御DDoS?
开服初期是手游最脆弱的阶段,极易成为DDoS攻击的目标。一旦遭遇攻击,可能导致服务器瘫痪、玩家流失,甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案,帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
装饰模式(Decorator Pattern)重构java邮件发奖系统实战
前言 现在我们有个如下的需求,设计一个邮件发奖的小系统, 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其…...
在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:
在 HarmonyOS 应用开发中,手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力,既支持点击、长按、拖拽等基础单一手势的精细控制,也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档,…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
一、开发准备 环境搭建: 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 项目创建: File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现,这取决于你是想在组件内部直接设置,还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法: 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
相机从app启动流程
一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...
Reasoning over Uncertain Text by Generative Large Language Models
https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...
服务器--宝塔命令
一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行! sudo su - 1. CentOS 系统: yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...
使用Spring AI和MCP协议构建图片搜索服务
目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式(本地调用) SSE模式(远程调用) 4. 注册工具提…...
