带你认识 WIDGET、WINDOW 、FRAME和 FRAMEGROUP

1、概述

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

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

2、概念说明

Widget、 Window 和 Frame、frameGroup层级关系示意图

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。

2.2、Window

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

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

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

  

  开发实现: openWin、openTabLayout

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

  

  开发实现: openTabLayout、原生插件——例如NVTabBar、tabBarMenu）等

  

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

  

  开发实现: openSlidLayout、openDrawerLayout）

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 页面被关闭是，所有从属于该 window 的 frame 页面都将被一起关闭；
• 当一个子 Widget 被关闭时，所有正在运行的从属于该 Widget 的 window 页面都将被一起关闭；
• 当一个主 Widget 被关闭时，当前 App 将自动关闭退出，返回手机系统桌面；

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