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

小程序框架->框架,视图层,生命周期(逻辑层)

  • 框架
  • 视图层
  • 生命周期(逻辑层)

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 体验的服务。 整个小程序框架系统分为两部分&#xff1a;**[逻辑层](https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/)…...

Spring framework Day14:配置类的Lite模式和Full模式

前言 Lite模式和Full模式是指在软件或系统中的不同配置选项。一般来说&#xff0c;Lite模式是指较为简洁、轻量级的配置&#xff0c;而Full模式则是指更加完整、功能更丰富的配置。 Lite模式通常会去除一些不常用或占用资源较多的功能&#xff0c;以提高系统的运行效率和响应…...

公司要做大数据可视化看板,除了EXCEL以外有没有好用的软件可以用

当企业需要进行大数据可视化看板的设计和开发时&#xff0c;除了Excel&#xff0c;还有许多其他强大且适合大数据可视化的软件工具。以下是几种常用的好用软件&#xff0c;以及它们的特点和优势&#xff0c;供您参考。 一、Datainside 特点和优势&#xff1a; - **易于使用**…...

掌握深入挖掘数据本质的方法

文章目录 掌握深入挖掘数据本质的方法1. 确定数据类型2. 数据清洗3. 数据可视化4. 探索性数据分析5. 特征工程6. 机器学习算法7. 自然语言处理 &#x1f4d5;我是廖志伟&#xff0c;一名Java开发工程师、Java领域优质创作者、CSDN博客专家、51CTO专家博主、阿里云专家博主、清华…...

MyBatisPlus的学习项目页面

MyBatisPlus通过扫描实体类&#xff0c;并基于反射获取实体类信息作为数据库表信息 类名驼峰转下划线作为表名 名为id的字段作为主键 变量名驼峰转下划线作为表的字段名 常见注解 TableName&#xff1a;用来指定表名 Tableld&#xff1a;用来指定表中的主键字段信息 Tabl…...

基于EtherCAT的机器人多轴同步运动控制

随着工业自动化的发展&#xff0c;机器人在生产线上的应用越来越广泛。为了实现高效、精确的运动控制&#xff0c;机器人的多轴运动必须能够实现同步操作&#xff0c;它能够提高机器人的运动精度和稳定性&#xff0c;实现更高效的生产线操作。同时&#xff0c;它也为机器人的协…...

彩虹易支付 9.27 最新版加订单查询 sy 更新版

彩虹易支付 9.27 最新版加订单查询 sy 更新版 修复客服 2023/09/25&#xff1a; 1. 新增支付宝红包支付插件 2. 新增支付宝 APP 支付转 H5 支付 3. 更新了几个支付插件 安装教程&#xff1a; 环境&#xff1a;php7.2 上传后访问域名进行安装即可 源码下载&#xff1a;ht…...

python树状打印项目路径

学习这个的需求来自于&#xff0c;我想把项目架构告诉gpt问问它&#xff0c;然后不太会打印项目架构&#x1f602; 联想到Linux的tree指令 import osclass DirectoryTree:def __init__(self, path):self.path pathdef print_tree(self, methoddefault):if method default:sel…...

mysql误删误操作恢复数据,比传统方式和binlog2sql更快速用的恢复方式-reverse_sql恢复数据(单表多表)

场景&#xff1a; 误操作删除了某个表的数据&#xff0c;本文只讲工具的使用&#xff0c;首先自己通过mysqlbinlog或者记录找到误操作的时间范围&#xff1a;开始时间和结束时间&#xff0c;已经确定好是哪个binlog了下面以误删为例。 查看binlog是否开启 show variables like …...

CORE: Cooperative Reconstruction for Multi-Agent Perception 论文阅读

论文连接 CORE: Cooperative Reconstruction for Multi-Agent Perception 0. 摘要 本文提出了 CORE&#xff0c;一种概念简单、有效且通信高效的多智能体协作感知模型。 从合作重建的新颖角度解决了该任务&#xff1a; 合作主体共同提供对环境的更全面的观察整体观察可以作为…...

MySQL连接方式: Unix套接字 TCP/IP

今天连接mysql数据库使用mysql -u root -p指令的时候遇到了这个问题&#xff1a; 解决之后来总结一下mysql的连接方式 文章目录 1. Unix套接字&#xff08;或Windows命名管道&#xff09;特点&#xff1a;场景&#xff1a; 2. TCP/IP特点&#xff1a;场景&#xff1a; 3.对比总…...

TSINGSEE青犀智慧城市数字基座解决方案,助力城市数字化转型

一、行业背景 我国“十四五”规划纲要中提出&#xff0c;分级分类推进新型智慧城市建设&#xff0c;将物联网感知设施、通信系统等纳入公共基础设施统一规划建设&#xff0c;推进市政公用设施、建筑等物联网应用和智能化改造。完善城市信息模型平台和运行管理服务平台&#xf…...

【JavaEE】初识网络

网络初识 文章目录 网络初识网络发展史独立模式网络互连局域网LAN广域网 网络通信基础IP地址端口号格式 协议五元组协议分层OSI七层模型TCP/IP五&#xff08;四&#xff09;层协议1.物理层2.数据链路层3.网络层4.传输层5.应用程序 网络设备所在的分层封装和分用例子发送方接收方…...

UGUI交互组件ScrollBar

一.ScrollBar的结构 对象说明Scrollbar挂有Image和Scrollbar组件的主体对象Sliding Area表示滑动范围Handle滑块 二.Scrollbar的属性 属性说明Handle Rect控制柄对象的引用Direction拖动控制柄时滚动条值增加的方向Value滚动条的当前值&#xff0c;范围为 0.0 到 1.0Suze控制柄…...

DamiBus v0.51 发布

DamiBus&#xff0c;专为本地多模块之间通讯解耦而设计&#xff08;尤其是未知模块、隔离模块、领域模块&#xff09;。零依赖&#xff0c;特适合 DDD。 特点 结合 Bus 与 RPC 的概念&#xff0c;可作事件分发&#xff0c;可作接口调用&#xff0c;可作响应订阅。 支持事务传…...

[OpenJDK:环境变量配置]:填充Profile并修改默认配置

文章目录 一&#xff1a;背景&#xff1a;安装hadoop启动提示未找到JAVA_HOME1.1&#xff1a;配置Hadoop的Java环境变量 二&#xff1a;排查-定位解决2.1&#xff1a;查看环境变量配置发现没有JAVA_HOME2.1.1&#xff1a;解决&#xff1a;查看java安装目录2.1.2&#xff1a;再次…...

连接mysql报错 :Host ‘xxx.xx.x.x‘ is not allowed to connect to this MySQL server

排查思路 命令行连接mysql 我是安装在本地docker容器中的&#xff0c;可以使用一下命令直接连接 docker exec -it mysqldb mysql -u root -p其中mysqldb是我的mysql容器名字&#xff0c;后面跟随mysql的连接命令&#xff0c;然后输入密码即可。 如果没有设置过密码&#xff0c…...

Qt 布局(QSplitter 类QDockWidget 类) 总结

一、QSplitter 类(窗口分割) QSplitter类是一个Qt框架提供的基础窗口控件类&#xff0c;用于分割窗口&#xff0c;使得用户可以通过拖动分隔条来调节子窗口的大小。QSplitter在用户界面设计中非常常见&#xff0c;经常用于划分窗口区域&#xff0c;使得程序可以同时显示多个子…...

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)组样例&#xff0c;每次给定一个n(n<1e9)&#xff0c;统计边长为n的上述三角形的等边三角形个数 其中等边三角形的三个顶点&#xff0c;可以在所有黑色三角形&白色三角形的顶点中任取&#xff0c; 答案对1e97取模 思路来源 申老师 & oeis A0003…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

网络编程(UDP编程)

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

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...