当前位置: 首页 > news >正文

“高级小程序开发指南“

目录

  • 引言
  • 小程序视图层
  • 小程序逻辑层及生命周期
  • 总结

在这里插入图片描述

引言

随着移动互联网的快速发展,小程序作为一种轻量级的应用形态,在用户使用体验和开发者便捷性方面受到了广泛关注。本篇博客将带你深入探索小程序的视图层和逻辑层,并介绍其生命周期。

小程序视图层

视图层是小程序的前端部分,负责展示页面内容和处理用户操作。下面是视图层的目录结构:

  • 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.隔代跳中间所有页面销毁

总结

本篇博客深入介绍了小程序的视图层和逻辑层,并详细展示了它们各自的目录结构及内容扩展。通过对小程序的全面理解,开发者可以更加灵活地运用视图层和逻辑层的功能,提升小程序的用户体验和功能实现。希望本篇博客能为小程序开发者提供一些帮助和指导。

补充内容:在实际开发过程中,还需要注重小程序的性能优化、安全防护、版本管理等方面的考虑。同时,不断学习新的开发技术和框架,保持对行业的敏感度和创新意识也是非常重要的。祝愿每位开发者都能在小程序开发的道路上取得进步和成就!

相关文章:

“高级小程序开发指南“

目录 引言小程序视图层小程序逻辑层及生命周期总结 引言 随着移动互联网的快速发展&#xff0c;小程序作为一种轻量级的应用形态&#xff0c;在用户使用体验和开发者便捷性方面受到了广泛关注。本篇博客将带你深入探索小程序的视图层和逻辑层&#xff0c;并介绍其生命周期。 …...

分类算法-逻辑回归与二分类

1、逻辑回归的应用场景 广告点击率是否为垃圾邮件是否患病金融诈骗虚假账号 看到上面的例子&#xff0c;我们可以发现其中的特点&#xff0c;那就是都属于两个类别之间的判断。逻辑回归就是解决二分类问题的利器。 2、 逻辑回归的原理 2.1 输入 逻辑回归的输入就是一个线性…...

金融液冷数据中心,噱头还是趋势?

当前&#xff0c;全社会数字化进程加速&#xff0c;金融行业已全面进入数字化和智能化时代。与此同时&#xff0c;随着云计算、分布式架构、大数据分析、通用人工智能等技术的广泛运用&#xff0c;金融行业从数据大集中到分布式融合&#xff0c;金融企业的数据中心建设正围绕其…...

LeetCode 高频题目分类列表

&#x1f4a1; LeetCode 高频面试题分类列表&#xff0c;总共24类&#xff0c;312道题目&#xff01; 图 133.克隆图 207.课程表 210.课程表 II 399.除法求值 547.省份数量 684.冗余连接 743.网络延迟时间 785.判断二分图 堆 215.数组中的第K个最大元素 295.数据流的中位数 26…...

为什么模方有时候置平之后再打开,置平的地方纹理就缺失了,显示为下图中反光的灰色?

答&#xff1a;一般置平后结构改动多的位置会用灰面填充纹理&#xff0c;可以联动PS或者空三映射进行纹理贴图。 模方是一款针对实景三维模型的冗余碎片、水面残缺、道路不平、标牌破损、纹理拉伸模糊等共性问题研发的实景三维模型修复编辑软件。模方4.0新增单体化建模模块&am…...

k8s基础 随笔

写个笔记&#xff0c;后面再完善 部署第一个应用 为什么先实战水平扩缩&#xff1f;因为这个最简单&#xff0c;首先来部署一个喜闻乐见的nginx kubectl create deployment web --imagenginx:1.14 --dry-run -o yaml > web.yaml --dry-run表示试运行&#xff0c;试一下看…...

c# 关于某管理业务系统对数据统计问题.

1.业务系统主要的就是功能的稳定,流畅性. 最近客户提出某统计功能数据加载到页面很慢.反映到运维工程师处,运维跟我说之后我(研发), 我看了看代码,有几处代码确实需要优化,统计功能调用了4次服务端,每一次客户端调用服务端的时候返回结果3S左右,有三次调用服务端,一共大约耗时…...

nginx 配置相关详解

目录 Nginx的优点 Nginx简介 Nginx的优点 可以高并发连接 内存消耗少 成本低廉 配置文件非常易懂 稳定性高 内置有健康的检查功能 支持Rewrite重写 支持热部署 Nginx与Apache的对比 Nginx多进程工作原理跟设计 Nginx是如何实现高性能的 事件驱动模型 多进程机制…...

解决spring项目中无法加载resources下文件

解决spring项目中无法加载resources下文件 问题发现问题解决步骤一&#xff1a;检查文件名步骤二&#xff1a;确保测试资源目录步骤三&#xff1a;检查文件路径是否正确 问题发现 在学习Spring过程中&#xff0c;TestContext框架试图检测一个默认的XML资源位置。如果您的类被命…...

【广州华锐互动】人体血管器官3D动态展示为医学生提供哪些便利?

人体血管器官3D动态展示是一种采用先进的计算机图形技术和立体成像技术&#xff0c;对人体内部结构和功能进行三维可视化的教学方法。这种教学方式以其独特的优势&#xff0c;正在改变传统的解剖学教学模式&#xff0c;为医学教育带来了革新。 首先&#xff0c;3D动态演示能够提…...

【QT开发笔记-基础篇】| 第四章 事件QEvent | 4.7 拖放事件

本节对应的视频讲解&#xff1a;B_站_链_接 【QT开发笔记-基础篇】 第4章 事件 4.7 拖动事件 本章要实现的整体效果如下&#xff1a; QEvent::DragEnter ​ 当拖动文件进入到窗口/控件中时&#xff0c;触发该事件&#xff0c;它对应的子类是 QDragEnterEvent QEvent::DragLe…...

【Linux】介绍 Docker 的基本概念和优势,以及在应用程序开发中的实际应用

Docker 是一种轻量级的虚拟化技术&#xff0c;它基于 Linux 容器技术&#xff0c;能够在不同平台、不同主机上快速地运行和部署应用程序。Docker 的基本概念包括以下几点&#xff1a; 镜像&#xff08;Image&#xff09;&#xff1a;Docker 镜像是一个只读的模板&#xff0c;它…...

GUN C/C++ undefined reference to symbol ‘dlclose@@GLIBC_2.2.5‘

编译问题&#xff1a; /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&#xff08;Rabbit Message Queue&#xff09;是一个开源的消息队列中间件&#xff0c;它实现了高级消息队列协议&#xff08;AMQP&#xff09;并提供可靠的消息传递机制。RabbitMQ 在分布式系统中广泛用于消息传递和事件驱动的架构。以下是一些 RabbitMQ 的重要知识点…...

【开发日常】insmod: error inserting ‘*.ko‘: -1 Unknown symbol in module原理分析

问题的起源是一次面试&#xff0c;面试官询问加载内核的时候&#xff0c;如果insmod失败&#xff0c;且提示Unknown symbol in module。请问我里面的原理是什么呢&#xff1f;为什么内核知道当前缺少的是这个symbol&#xff1f; 想了解下具体的原因。 首先是模拟一个环境。 写…...

圆弧插补【C#】

圆弧&#xff1a; 圆弧插补方法可以通过提供圆弧的起点、终点和半径来画弧。下面是一个用C#实现的圆弧插补方法的示例代码&#xff1a; public void DrawArc(Point startPoint, Point endPoint, int radius, bool isClockwise) {// 计算圆心坐标int centerX (startPoint.X e…...

Redis EmbeddedString

前言 Redis 写入键值对时&#xff0c;首先会先创建一个 RedisObject 对象来存储 Value。 如果写入的 Value 是字符串&#xff0c;那么 Redis 会再根据写入的字符串长度&#xff0c;来创建对应的 sdshdr 来存储字符串&#xff0c;最后把 RedisObject 的 ptr 指针指向 sdshdr。 …...

SpringMVC之WEB-INF下页面跳转@ModelAttributeIDEA tomcat控制台中文乱码问题处理

WEB-INF下页面跳转 ModelAttribute来注解非请求处理方法 用途&#xff1a;预加载数据&#xff0c;会在每个RequestMapping方法执行之前调用。 特点&#xff1a;无需返回视图&#xff0c;返回类型void IDEA tomcat控制台中文乱码问题处理 复制此段代码&#xff1a;-Dfile.e…...

利用ChatGPT练习口语

目录 ChatGPT 这两天发布了一个激动人心的新功能&#xff0c;App端&#xff08;包括iOS和Android&#xff09;开始支持语音对话以及图片识别功能。 这两个功能一如既往的优先开放给Plus用户使用&#xff0c;现在将App更新到最新版本&#xff0c;就能体验。 为什么说激动人心&a…...

【Django 01】环境搭配与项目配置

1. 介绍 https://github.com/Joe-2002/sweettalk-django4.2#readme Django 是一个使用 Python 编写的开源 Web 应用程序框架&#xff0c;它提供了一套用于快速开发安全、 可扩展和高效的 Web 应用程序的工具和功能。Django 基于 MVC&#xff08;Model-View-Controller&#xf…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

基于数字孪生的水厂可视化平台建设:架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...

LLMs 系列实操科普(1)

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

Java数组Arrays操作全攻略

Arrays类的概述 Java中的Arrays类位于java.util包中&#xff0c;提供了一系列静态方法用于操作数组&#xff08;如排序、搜索、填充、比较等&#xff09;。这些方法适用于基本类型数组和对象数组。 常用成员方法及代码示例 排序&#xff08;sort&#xff09; 对数组进行升序…...