当前位置: 首页 > 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…...

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &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…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...

从“安全密码”到测试体系:Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...