带你认识 WIDGET、WINDOW 、FRAME和 FRAMEGROUP

2023-12-26 18:44:06

1、概述

YonBuilder 移动开发中,开发者需要了解一些常用的概念术语,其中和App整体框架结构及页面层级组成相关最重要几个重要概念,就是 WidgetWindowFrameframeGroup。掌握了这几个概念,对于开发者开发 App 时的 API 选择和页面实现将有很大的助益。

本文将分别对这几个概念进行讲解,并扩展介绍一下应用场景及相关的常用 API 函数命令。

2、概念说明

WidgetWindowFrameframeGroup层级关系示意图

QQGOD@QQ.com

2.1、Widget

Widget 有两重概念,Widget包Widget实例

第一重:当它作为 Widget包 的概念使用时,开发者可以将 Widget包 简单理解整个 App 的项目代码包,也就是我们初始化创建项目时的包含整个所有文件代码,资源图片等的根路径文件夹;

一个完整的 widget代码包 的结构如下:

第二重:当它作为 Widget实例 的概念使用时,代表的上面Widget包经过编译运行后的应用实例,一个 App 想要运行的话,至少拥有一个 widget 实例。我们在开发中的相关 API 描述中所引用的 Widget,通常默认作为第二重概念使用。

根据项目需求和开发需要,可以在一个 App 内包含有多个 widget 包,但是一个 App 内有且只能有一个 主Widget 示例,这个 主Widget 实例被关闭时,整个 App 将被关闭。

PS小知识:如何设置主Widget示例?

在根目录下的 config.xml 中,配置 App 的主入口页,该页面所在的 widget,将作为 主Widget

qqgod@qq.com

2.2、Window

Window 代表App中运行的一个整体页面,它是布满全屏的,也可以把 Window 理解为一个可以包含有多个子页面(frame)的页面容器。在 App 运行时,同一时间只能显示一个 Window。在 Android上,一个 Window 页面等同于一个 activity 页面。

在通常的移动端 App 项目中,常用的 Window 页面布局一般为:

  • NavigationBar布局: 即一个页面内,顶部是NavigationBar导航条 + 主体页面内容;

    qqgod@qq.com

    开发实现: openWinopenTabLayout

  • TabBar 布局: 即一个页面内,底部是TabBar导航条 + N个主体页面内容;

    qqgod@qq.com

    开发实现: openTabLayout、原生插件——例如NVTabBartabBarMenu)等

    qqgod@qq.com

  • 侧滑抽屉布局: 即一个页面内,在页面内左滑或右侧可以从侧边出现一个悬浮侧面板的页面结构

    qqgod@qq.com

    开发实现: openSlidLayoutopenDrawerLayout

PS小知识:如何 App 入口 window 页面是 config.xml 指定的,那么它的 name 是什么?

App 入口页的 win 窗口,即 App 的根窗口页面,它的名称默认设置为 root,所以如果想使用 API 函数操作该窗口时,对应的 name 参数字段就填写root,例如

<!--举例:关闭当前页面返回App的首页面-->
api.closeToWin({
 	name: 'root'
});

2.3、Frame

Frame也代表一个页面,不过这个页面和 window 不同的是,它具备自己的 rect,即可以定义它在 App 屏幕内的x,y坐标及宽高尺寸。同时 frame 页面必须依附于一个 window 页面,不能单独存在。

由于 frame 可以随意配置尺寸和位置这个特性,我们在具体的场景使用中,即可以把它作为一个整体页面使用,也可以把它设计成一个功能按钮。在使用原生插件的页面中,因为原生插件的显示优先级最高,所以普通的 html 标签构成的 dom 元素是无法覆盖原生插件显示出来的,此时就可以将这个 dom 元素代码单独写在一个 frame 中,然后在原生插件的页面中open该 frame ,即可实现 dom 元素覆盖原生插件之上的效果。具体实战案例,比如在百度或高德地图页面中,添加一个自定义的按钮,就可以用此方法实现。

2.4、Framegroup

顾名思义,Framegroup 是一组 frame 的集合,其内部可以包含多个 frame。它的是为了满足一些特殊场景使用而存在的。Framegroup 具备了一些独有的特性,比如支持手势滑动切换 frame (并支持动画效果),支持多个 frame 的一致性打开或关闭,并支持预处理、预读取指定的 frame 页面。这种特性在开发者进行复杂的复合页面结构开发时非常有用。

Framegroup 通常在 TabBar 布局中使用,用 Framegroup 中包含的 frame 对应 tabBar 上的每一个标签按钮。

在这里插入图片描述

3、常见使用场景及相关函数API

3.1、Widget:App操作

3.1.1、App退出功能

closeWidget

api.closeWidget({
	silent: false, // (可选项)是否静默退出应用,只在主 widget 中有效。当为 false 时,引擎会弹出对话框询问是否退出应用
});
3.1.2、调用第三方App

openApp

api.openApp({
    iosUrl: 'weixin://',     //打开微信,其中weixin为微信的URL Scheme
    appParam: {
        appParam: 'app参数'
    }
});

3.2、Window:页面操作

3.2.1、页面跳转,打开一个页面

openWin

openTabLayout

3.2.2、关闭当前页,返回上一页

closeWin

3.2.3、关闭当前页,返回指定页

closeToWin

api.closeToWin({
 name: 'xxx' // 指定的window的name名称
});

3.2.4、关闭当前页,返回主页面

closeToWin

api.closeToWin({
 name: 'root'
});

3.2.5、打开一个web网页
api.openWin({
	 name: 'developer',
	 url: 'https://developer.yonyou.com' // 具体的web网址
});

4、总结

综上所述,一个 App 中可以有多个 Widget 示例(只能有一个主Widget),每个 Widget 又可以包含多个 Window页面,每个 Window页面 又可以包含多个 Frame子页面。
在运行的 App 中,

  • 当一个 frame 页面被关闭掉时,应用将显示该 frame 所属的 window 内的上一级 frame 页面;
  • 当一个 framegroup 页面被关闭是,所有从属于该 framegroup frame 页面都将被一起关闭;
  • 当一个 window 页面被关闭是,所有从属于该 windowframe 页面都将被一起关闭;
  • 当一个子 Widget 被关闭时,所有正在运行的从属于该 Widgetwindow 页面都将被一起关闭;
  • 当一个主 Widget 被关闭时,当前 App 将自动关闭退出,返回手机系统桌面;

灵活掌握相关的概念,将有助于开发者在进行项目开发时,对 App 页面结构及页面跳转的实现有更好的理解,方便进行更加合理的页面层级拆分和逻辑实现。

文章来源:https://blog.csdn.net/SMDOUSM/article/details/135226580
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。