# web

**Repository Path**: harmony-free/web

## Basic Information

- **Project Name**: web
- **Description**: Harmony OS web 鸿蒙web组件
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2025-06-30
- **Last Updated**: 2026-04-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# wechat

#### Description [中文](README.md)

This is a feature added to the Hongmeng version based on web components. It includes location permission acquisition, opening the Alipay application, configuring the title, and JSBridge interaction.



| Function            | Status | Description            |
|---------------------|--------|------------------------|
| Open Alipay         | √      | Alipay payment         |
| Open WeChat         | ×      | Alipay payment         |
| Open Phone          | √      | Make phone call        |
| Open Phone          | √      | Make phone call        |
| JSBridge            | √      | JavaScript interaction |
| Open Douyin         | ×      | Douyin function        |
| Permission Function | √      | Location Permission    |


#### Software Architecture 

This is the Hongmeng version that has added multiple commonly used functions based on web components.

#### Installation

`ohpm install @free/web`

#### Instructions

Usage method


// url: Webpage address
// title: Webpage title
// controller: Webpage controller
// progress: Loading progress
// webStatus: Webpage status
// onIntercept: Initial loading interception

```
WebBase({
        url:this.url,
        title:this.title,
        controller:this.controller,
        progress: this.progress,
        webStatus:this.webStatus,
        onIntercept:this.onIntercept
      })
```

#### Plugin Details

Hello, dear students! Good morning!
Today, we are going to talk about WebView in HarmonyOS.
Many apps require the display of front-end pages.
During the process of displaying front-end pages, some basic settings need to be repeated over and over again, which is very troublesome.
Here, we have integrated Alipay payment, WeChat payment, as well as permission and JSBridge capabilities.

Built-in interception - Open Alipay, open WeChat, open Douyin, open the phone

```
.onLoadIntercept((event) => {
        if (event) {
          event = this.onIntercept(event);
          let currentUrl: string = event.data.getRequestUrl()
          let currentUri = new uri.URI(currentUrl)
          if (currentUri.scheme == "alipay" || currentUri.scheme == "alipays" || currentUri.scheme == "weixin" || currentUri.scheme == "tiktok") {
            this.openLink(currentUrl)
          } else if (currentUri.scheme == "tel") {
            call.makeCall(currentUri.ssp)
            return true
          }
        }
        return false
      })
```

JSBridge - Native Interaction with JavaScript Frontend - Embedded Interaction Methods

```
  const JSBridgeMap = {};
  let callID = 0;

  function JSBridgeCallback (id, params) {
    JSBridgeMap[id](params);
    JSBridgeMap[id] = null;
    delete JSBridgeMap[id];
  }

  window.ohosCallNative = {
    callNative(method, params, callback) {
      const id = callID++;
      const paramsObj = {
          callID: id,
          data: params || null
      }
      JSBridgeMap[id] = callback || (() => {});
      JSBridgeHandle.call(method, JSON.stringify(paramsObj));
    }
  }
```

Permission Application -- Location Permission Application

```
     .onGeolocationShow((event) => { 
        AlertDialog.show({
          title: 'Location permission request',
          message: 'Is it allowed to obtain location information?',
          primaryButton: {
            value: 'Not allowed',
            action: () => {
              if (event) {
                event.geolocation.invoke(event.origin, false, false); // Disallow this site's geographical location permission request
              }
            }
          },
          secondaryButton: {
            value: 'Permit',
            action: () => {
              if (event) {
                event.geolocation.invoke(event.origin, true, true); // Allow this site's geographical location permission request
              }
            }
          },
          cancel: () => {
            if (event) {
              event.geolocation.invoke(event.origin, false, false); // Disallow this site's geographical location permission request
            }
          }
        })

      })
```

Note: The complete code has been submitted to the [HarmonyOS Third-Party Library](https://ohpm.openharmony.cn/).



If you like this content, please give a little heart!


#### Contribution

1.  Fork the repository
2.  Create Feat_xxx branch
3.  Commit your code
4.  Create Pull Request


#### Gitee Feature

1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
4.  The most valuable open source project [GVP](https://gitee.com/gvp)
5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)