基于预渲染技术实现Web页面瞬开效果

介绍

本示例基于预渲染技术，实现了点击后Web页面瞬间打开的效果，无需额外加载过程，减少用户等待时长，提高了用户体验。

效果预览

直板机	双折叠	平板

使用说明：

1. 点击标签打开弹窗，加载Web网页。

工程目录

webprerenderlibrary
├──src/main/ets/
│  ├──common
│  │  ├──utils
│  │  │  ├──BreakpointSystem.ets        // 断点类
│  │  │  ├──Logger.ets                  // 日志类
│  │  │  └──WindowUtil.ets              // 窗口工具
│  │  ├──Constants.ets                  // 公共常量类
│  │  └──ResourceUtil.ets    
│  └──view              
│  │  └──WebPage.ets                    // 首页
│  │  └──WebPreRenderView.ets           // Web预渲染页面
│  └──WebPrerenderController.ets
└──src/main/resources                   // 静态资源
webprerendersample
├──src/main/ets                         
│  ├──entryability  
│  │  └──EntryAbility.ets         
│  └──pages                                    
│     └──Index.ets                      // 入口页面
└──src/main/resources                   // 应用静态资源目录

具体实现

1. 创建Web组件。
2. 在EntryAbility中预渲染网页，首页打开弹窗实现瞬开效果。

相关权限

ohos.permission.INTERNET

约束与限制

1. 本示例仅支持标准系统上运行，支持设备：phone，tablet，2in1。

2. HarmonyOS系统：HarmonyOS 5.0.0 Release及以上。

3. DevEco Studio版本：DevEco Studio 5.0.0 Release及以上。

4. HarmonyOS SDK版本：HarmonyOS 5.0.0 Release SDK及以上。