小程序框架->框架,视图层,生命周期(逻辑层)
- 框架
- 视图层
- 生命周期(逻辑层)
1.框架
小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
整个小程序框架系统分为两部分:**[逻辑层](https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/)**(App Service)和 **[视图层](https://developers.weixin.qq.com/miniprogram/dev/framework/view/)**(View)。小程序提供了自己的视图层描述语言 `WXML` 和 `WXSS`,以及基于 `JavaScript` 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。
2.视图层
//min2\app.json
{"pages":["pages/a/a","pages/b/b","pages/c/c","pages/d/d","pages/user/user","pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#00f","navigationBarTitleText": "Weixin","navigationBarTextStyle":"black"},"style": "v2","sitemapLocation": "sitemap.json"
}
//min2\pages\a\a.js
C:\Users\朱\WeChatProjects\min2\pages\a\a.json
C:\Users\朱\WeChatProjects\min2\pages\a\a.wxml
C:\Users\朱\WeChatProjects\min2\pages\a\a.wxss
<!--pages/a/a.wxml-->
<view> {{message}} </view>
<view wx:for="{{array}}"> {{item}} </view>
<view wx:for="{{users}}"> 用户编号:{{item.id}};用户姓名:{{item.name}} </view><!--wxml-->
<view wx:if="{{view == '1'}}"> WEBVIEW </view>
<view wx:elif="{{view == '2'}}"> APP </view>
<view wx:else="{{view == '3'}}"> MINA </view><!--wxml-->
<template name="staffName"><view>FirstName: {{firstName}}, LastName: {{lastName}}</view><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-meetingState="6" bindtap="tapName"> Click me! </view>
// pages/a/a.js
Page({/*** 页面的初始数据*/data: {message: 'Hello 页面一',array:[1,2,3,4,5],users:[{id:1,name:'牛逼'},{id:2,name:'晴天'},{id:3,name:'雨天'}],view:2,staffA: {firstName: 'Hulk', lastName: 'Hu'},staffB: {firstName: 'Shang', lastName: 'You'},staffC: {firstName: 'Gideon', lastName: 'Lin'}},tapName: function(event) {console.log(event);console.log(event.target.dataset);},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

2.生命周期(逻辑层)
## 响应的数据绑定
框架的核心是一个响应的数据绑定系统,可以让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。
//min2\app.json
{"pages":["pages/index/index","pages/a/a","pages/b/b","pages/c/c","pages/d/d","pages/user/user","pages/logs/logs"
],
"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#00f","navigationBarTitleText": "Weixin","navigationBarTextStyle":"black"
},
"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页"}, {"pagePath": "pages/a/a","text": "a页面"}, {"pagePath": "pages/b/b","text": "b页面"}]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
// pages/a/a.js
Page({/*** 页面的初始数据*/data: {message: 'Hello 页面一',array:[1,2,3,4,5],users:[{id:1,name:'牛逼'},{id:2,name:'晴天'},{id:3,name:'雨天'}],view:2,staffA: {firstName: 'Hulk', lastName: 'Hu'},staffB: {firstName: 'Shang', lastName: 'You'},staffC: {firstName: 'Gideon', lastName: 'Lin'}},tapName: function(event) {console.log(event);console.log(event.target.dataset);},a2b:function() {wx.switchTab({url: '/pages/b/b',})},a2c:function() {wx.navigateTo({url: '/pages/c/c',})},/*** 生命周期函数--监听页面加载*/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");},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})
<!--pages/a/a.wxml-->
<view> {{message}} </view>
<view wx:for="{{array}}"> {{item}} </view>
<view wx:for="{{users}}"> 用户编号:{{item.id}};用户姓名:{{item.name}} </view><!--wxml-->
<view wx:if="{{view == '1'}}"> WEBVIEW </view>
<view wx:elif="{{view == '2'}}"> APP </view>
<view wx:else="{{view == '3'}}"> MINA </view><!--wxml-->
<template name="staffName"><view>FirstName: {{firstName}}, LastName: {{lastName}}</view><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-meetingState="6" bindtap="tapName"> Click me! </view><button bindtap="a2b">a页面跳B页面</button>
<button bindtap="a2c">a页面跳C页面</button>
// pages/b/b.js
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad(options) {console.log("b.onload");},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {console.log("b.onReady");},/*** 生命周期函数--监听页面显示*/onShow() {console.log("b.onShow");},/*** 生命周期函数--监听页面隐藏*/onHide() {console.log("b.onHide");},/*** 生命周期函数--监听页面卸载*/onUnload() {console.log("b.onUnload");},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})
// pages/c/c.js
// import c from cs
Page({/*** 页面的初始数据*/data: {},c2b:function() {wx.switchTab({url:'/pages/b/b',})},c2d:function() {wx.navigateTo({url: '/pages/d/d',})},/*** 生命周期函数--监听页面加载*/onLoad(options) {console.log("c.onload");},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {console.log("c.onReady");},/*** 生命周期函数--监听页面显示*/onShow() {console.log("c.onShow");},/*** 生命周期函数--监听页面隐藏*/onHide() {console.log("c.onHide");},/*** 生命周期函数--监听页面卸载*/onUnload() {console.log("c.onUnload");},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})
<!--pages/c/c.wxml-->
<text>pages/c/c.wxml</text>
<button bindtap="c2d">c页面跳d页面</button>
<button bindtap="c2b">c页面跳b页面</button>
// pages/d/d.js
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad(options) {console.log("d.onload");},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {console.log("d.onReady");},/*** 生命周期函数--监听页面显示*/onShow() {console.log("d.onShow");},/*** 生命周期函数--监听页面隐藏*/onHide() {console.log("d.onHide");},/*** 生命周期函数--监听页面卸载*/onUnload() {console.log("d.onUnload");},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})
结论:
一级不会销毁;
二级层级深跳到层级低的会销毁;
二级层级低级跳到深层级只会隐藏;
隔代中间所有页面会被销毁;

相关文章:
小程序框架->框架,视图层,生命周期(逻辑层)
框架视图层生命周期(逻辑层) 1.框架 小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。 整个小程序框架系统分为两部分:**[逻辑层](https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/)…...
Spring framework Day14:配置类的Lite模式和Full模式
前言 Lite模式和Full模式是指在软件或系统中的不同配置选项。一般来说,Lite模式是指较为简洁、轻量级的配置,而Full模式则是指更加完整、功能更丰富的配置。 Lite模式通常会去除一些不常用或占用资源较多的功能,以提高系统的运行效率和响应…...
公司要做大数据可视化看板,除了EXCEL以外有没有好用的软件可以用
当企业需要进行大数据可视化看板的设计和开发时,除了Excel,还有许多其他强大且适合大数据可视化的软件工具。以下是几种常用的好用软件,以及它们的特点和优势,供您参考。 一、Datainside 特点和优势: - **易于使用**…...
掌握深入挖掘数据本质的方法
文章目录 掌握深入挖掘数据本质的方法1. 确定数据类型2. 数据清洗3. 数据可视化4. 探索性数据分析5. 特征工程6. 机器学习算法7. 自然语言处理 📕我是廖志伟,一名Java开发工程师、Java领域优质创作者、CSDN博客专家、51CTO专家博主、阿里云专家博主、清华…...
MyBatisPlus的学习项目页面
MyBatisPlus通过扫描实体类,并基于反射获取实体类信息作为数据库表信息 类名驼峰转下划线作为表名 名为id的字段作为主键 变量名驼峰转下划线作为表的字段名 常见注解 TableName:用来指定表名 Tableld:用来指定表中的主键字段信息 Tabl…...
基于EtherCAT的机器人多轴同步运动控制
随着工业自动化的发展,机器人在生产线上的应用越来越广泛。为了实现高效、精确的运动控制,机器人的多轴运动必须能够实现同步操作,它能够提高机器人的运动精度和稳定性,实现更高效的生产线操作。同时,它也为机器人的协…...
彩虹易支付 9.27 最新版加订单查询 sy 更新版
彩虹易支付 9.27 最新版加订单查询 sy 更新版 修复客服 2023/09/25: 1. 新增支付宝红包支付插件 2. 新增支付宝 APP 支付转 H5 支付 3. 更新了几个支付插件 安装教程: 环境:php7.2 上传后访问域名进行安装即可 源码下载:ht…...
python树状打印项目路径
学习这个的需求来自于,我想把项目架构告诉gpt问问它,然后不太会打印项目架构😂 联想到Linux的tree指令 import osclass DirectoryTree:def __init__(self, path):self.path pathdef print_tree(self, methoddefault):if method default:sel…...
mysql误删误操作恢复数据,比传统方式和binlog2sql更快速用的恢复方式-reverse_sql恢复数据(单表多表)
场景: 误操作删除了某个表的数据,本文只讲工具的使用,首先自己通过mysqlbinlog或者记录找到误操作的时间范围:开始时间和结束时间,已经确定好是哪个binlog了下面以误删为例。 查看binlog是否开启 show variables like …...
CORE: Cooperative Reconstruction for Multi-Agent Perception 论文阅读
论文连接 CORE: Cooperative Reconstruction for Multi-Agent Perception 0. 摘要 本文提出了 CORE,一种概念简单、有效且通信高效的多智能体协作感知模型。 从合作重建的新颖角度解决了该任务: 合作主体共同提供对环境的更全面的观察整体观察可以作为…...
MySQL连接方式: Unix套接字 TCP/IP
今天连接mysql数据库使用mysql -u root -p指令的时候遇到了这个问题: 解决之后来总结一下mysql的连接方式 文章目录 1. Unix套接字(或Windows命名管道)特点:场景: 2. TCP/IP特点:场景: 3.对比总…...
TSINGSEE青犀智慧城市数字基座解决方案,助力城市数字化转型
一、行业背景 我国“十四五”规划纲要中提出,分级分类推进新型智慧城市建设,将物联网感知设施、通信系统等纳入公共基础设施统一规划建设,推进市政公用设施、建筑等物联网应用和智能化改造。完善城市信息模型平台和运行管理服务平台…...
【JavaEE】初识网络
网络初识 文章目录 网络初识网络发展史独立模式网络互连局域网LAN广域网 网络通信基础IP地址端口号格式 协议五元组协议分层OSI七层模型TCP/IP五(四)层协议1.物理层2.数据链路层3.网络层4.传输层5.应用程序 网络设备所在的分层封装和分用例子发送方接收方…...
UGUI交互组件ScrollBar
一.ScrollBar的结构 对象说明Scrollbar挂有Image和Scrollbar组件的主体对象Sliding Area表示滑动范围Handle滑块 二.Scrollbar的属性 属性说明Handle Rect控制柄对象的引用Direction拖动控制柄时滚动条值增加的方向Value滚动条的当前值,范围为 0.0 到 1.0Suze控制柄…...
DamiBus v0.51 发布
DamiBus,专为本地多模块之间通讯解耦而设计(尤其是未知模块、隔离模块、领域模块)。零依赖,特适合 DDD。 特点 结合 Bus 与 RPC 的概念,可作事件分发,可作接口调用,可作响应订阅。 支持事务传…...
[OpenJDK:环境变量配置]:填充Profile并修改默认配置
文章目录 一:背景:安装hadoop启动提示未找到JAVA_HOME1.1:配置Hadoop的Java环境变量 二:排查-定位解决2.1:查看环境变量配置发现没有JAVA_HOME2.1.1:解决:查看java安装目录2.1.2:再次…...
连接mysql报错 :Host ‘xxx.xx.x.x‘ is not allowed to connect to this MySQL server
排查思路 命令行连接mysql 我是安装在本地docker容器中的,可以使用一下命令直接连接 docker exec -it mysqldb mysql -u root -p其中mysqldb是我的mysql容器名字,后面跟随mysql的连接命令,然后输入密码即可。 如果没有设置过密码,…...
Qt 布局(QSplitter 类QDockWidget 类) 总结
一、QSplitter 类(窗口分割) QSplitter类是一个Qt框架提供的基础窗口控件类,用于分割窗口,使得用户可以通过拖动分隔条来调节子窗口的大小。QSplitter在用户界面设计中非常常见,经常用于划分窗口区域,使得程序可以同时显示多个子…...
git-ssh-key协议同步文件
生成秘钥 ssh-keygen -t rsa ssh-keygen -t rsa Generating public/private rsa key pair. Enter file in which to save the key (/c/Users/Beza/.ssh/id_rsa): /c/Users/Beza/.ssh/id_rsa already exists. Overwrite (y/n)? y Enter passphrase (empty for no passphrase): …...
2018-2019 ACM-ICPC, Asia Nanjing Regional Contest G. Pyramid(组合数学 计数)
题目 t(t<1e6)组样例,每次给定一个n(n<1e9),统计边长为n的上述三角形的等边三角形个数 其中等边三角形的三个顶点,可以在所有黑色三角形&白色三角形的顶点中任取, 答案对1e97取模 思路来源 申老师 & oeis A0003…...
【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型
摘要 拍照搜题系统采用“三层管道(多模态 OCR → 语义检索 → 答案渲染)、两级检索(倒排 BM25 向量 HNSW)并以大语言模型兜底”的整体框架: 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后,分别用…...
AI Agent与Agentic AI:原理、应用、挑战与未来展望
文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例:使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例:使用OpenAI GPT-3进…...
云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地
借阿里云中企出海大会的东风,以**「云启出海,智联未来|打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办,现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...
Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)
概述 在 Swift 开发语言中,各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过,在涉及到多个子类派生于基类进行多态模拟的场景下,…...
UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法:netstat [选项] 功能:查看网络状态 常用选项: n 拒绝显示别名&#…...
【Go】3、Go语言进阶与依赖管理
前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课,做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程,它的核心机制是 Goroutine 协程、Channel 通道,并基于CSP(Communicating Sequential Processes࿰…...
css3笔记 (1) 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size:0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)
Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习) 一、Aspose.PDF 简介二、说明(⚠️仅供学习与研究使用)三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...
Python+ZeroMQ实战:智能车辆状态监控与模拟模式自动切换
目录 关键点 技术实现1 技术实现2 摘要: 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式(自动驾驶、人工驾驶、远程驾驶、主动安全),并通过实时消息推送更新车…...
[ACTF2020 新生赛]Include 1(php://filter伪协议)
题目 做法 启动靶机,点进去 点进去 查看URL,有 ?fileflag.php说明存在文件包含,原理是php://filter 协议 当它与包含函数结合时,php://filter流会被当作php文件执行。 用php://filter加编码,能让PHP把文件内容…...
