# WebJumpMiniprogram

**Repository Path**: scenario-samples/web-jump-miniprogram

## Basic Information

- **Project Name**: WebJumpMiniprogram
- **Description**: 【鸿蒙 Harmony Next 示例 代码】本示例基于web组件加载H5页面，通过拦截H5页面中基于微信协议的url链接，通过want和startAbility机制，由鸿蒙app拉起微信app，并跳转到对应的小程序链接，在微信app内拉起小程序。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 2
- **Created**: 2025-02-17
- **Last Updated**: 2025-05-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# H5页面跳转微信小程序

## 介绍

本示例基于web组件加载H5页面，通过拦截H5页面中基于微信协议的url链接，通过want和startAbility机制，由鸿蒙app拉起微信app，并跳转到对应的小程序链接，在微信app内拉起小程序。

## 效果预览
手机运行效果图如下：

<img src="screenshots/device/phone.gif" />


## 工程目录结构

```
├──entry/src/main/ets                                   // 代码区
│  ├──entryability
│  |  └──EntryAbility.ets
│  ├──entrybackupability
│  |  └──EntryBackupAbility.ets
│  └──pages
│     ├──Index.ets                                      // 入口界面
└──entry/src/main/resources                             // 应用资源目录
```

## 具体实现

1. 在web组件初始化前，设置H5页面的UA，从而能够显示H5页面底部导航栏
2. 加载web组件，调用onOverrideUrlLoading，自定义url行为
3. 拦截weixin://协议
4. 通过want和startAbility机制，跳转微信小程序
5. 若跳转失败，通过UI提示用户微信未安装

## 相关权限

* @kit.ArkWeb：web组件能力
* ohos.permission.INTERNET：网络访问能力

## 约束与限制

1. 本示例仅支持标准系统上运行，支持设备：华为手机。
2. HarmonyOS系统：HarmonyOS NEXT Developer Beta1及以上。
3. DevEco Studio版本：DevEco Studio NEXT Developer Beta1及以上。
4. HarmonyOS SDK版本：HarmonyOS NEXT Developer Beta1 SDK及以上。


## 一份简单的问卷反馈

亲爱的Harmony Next开发者，您好！<br>
为了协助您高效开发，提高鸿蒙场景化示例的质量，希望您在浏览或使用后抽空填写一份简单的问卷，我们将会收集您的宝贵意见进行优化:heart:

[:arrow_right: **点击此处填写问卷** ](https://wj.qq.com/s2/19042938/95ab/)

<div style="text-align: left;">