场景描述
透明页面也可以叫做弹窗页面,实际开发场景中经常有一个页面覆盖在另一个页面上的效果,例如:评论弹窗页面、广告弹窗页面等。
场景:评论弹窗页面
功能点:
-
弹窗页面拉起。
-
评论页面状态持久化保存。
-
带参页面拉起。
方案一:使用router+subWindow实现
router路由无法更改页面模式,所以无法直接实现透明页面,需要借助拉起子窗口的方案实现透明页面的效果。思路如下:
-
获取窗口实例。
-
拉起一个子窗口并加载对应页面。
-
设置子窗口背景透明。
-
定义子窗口的关闭方案。
核心代码
在Ability中获取windowStage实例。
onWindowStageCreate(windowStage: window.WindowStage): void {
// Main window is created, set main page for this ability
windowStage.loadContent('pages/Index', (err) =