【HarmonyOS】一文教你如何在低代码项目中跳转H5页面

 【关键字】

元服务、低代码、H5页面跳转、WebView

【1、写在前面】

今天我们来实现一个在低代码项目中通过按钮跳转到H5页面的功能，本项目是基于API6的JS工程，我们的实现思路是在页面B中通过Java加载WebView控件，在低码页面中为按钮绑定点击事件，事件中实现通过JS调用Java能力，OK，下面一起来实战一下吧。

【2、Java实现WebView】

首先我们在“entry/src/main/java/包名/”这个目录下新建一个PageAbility，这里命名H5Ability：

该类中代码如下：

然后进入H5AbilitySlice，首先编辑页面布局，打开ability_h5.xml文件：

在布局中添加一个返回按钮和一个WebView组件，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="horizontal_center"
    ohos:orientation="vertical">


    <Text
        ohos:id="$+id:back"
        ohos:height="50vp"
        ohos:width="match_parent"
        ohos:start_margin="10vp"
        ohos:end_margin="10vp"
        ohos:text="返回"
        ohos:text_size="18vp"/>


    <ohos.agp.components.webengine.WebView
        ohos:id="$+id:webview"
        ohos:height="match_parent"
        ohos:width="match_parent"/>
</DirectionalLayout>

然后回到H5AbilitySlice类中编写逻辑代码，代码也很简单，就是初始化控件，然后为返回按钮绑定页面回退事件，然后为WebView添加load()方法，完整代码如下：

import com.jarchie.h5.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Text;
import ohos.agp.components.webengine.WebView;
import ohos.app.Context;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;


public class H5AbilitySlice extends AbilitySlice {
    private static final HiLogLabel TAG = new HiLogLabel(HiLog.DEBUG, 0x0, H5AbilitySlice.class.getName());
    private Text backText;
    private WebView webView;


    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_h5);
        initBackText();
        initWebView();
    }


    // 初始化WebView
    private void initWebView() {
        webView = (WebView) findComponentById(ResourceTable.Id_webview);
        webView.getWebConfig().setJavaScriptPermit(true);  // 如果网页需要使用JavaScript，增加此行
        final String url = "https://www.baidu.com/"; // EXAMPLE_URL由开发者自定义
        webView.load(url);
    }


    // 初始化返回文本
    private void initBackText() {
        backText = (Text) findComponentById(ResourceTable.Id_back);
        backText.setClickedListener(component -> onBackPressed());
    }


    @Override
    public void onActive() {
        HiLog.info(TAG, "onActive：");
        super.onActive();
    }


    @Override
    public void onForeground(Intent intent) {
        HiLog.info(TAG, "onForeground：");
        super.onForeground(intent);
    }


    @Override
    protected void onStop() {
        HiLog.info(TAG, "onStop：");
        super.onStop();
        }
       }

【3、低码绑定跳转事件】

首先打开低码编辑页面index.visual，在该页面中添加一个文本组件，设置文本内容为“跳转H5”，如下图所示：

然后打开entry/src/main/js/default/pages/index/index.js这个同名的js文件：

然后在代码中添加页面跳转事件：

import featureAbility from '@ohos.ability.featureAbility';


export default {
    data: {
        title: "跳转H5"
    },
    onInit() {


    },
    gotoH5Ability() {
        featureAbility.startAbility({
            want:
            {
                bundleName: "com.jarchie.h5",
                abilityName: "com.jarchie.h5.H5Ability"
            },
        });
    },
    }

最后再回到index.visual文件，找到事件绑定按钮，为其添加事件，如下图所示：

【4、实现效果】

一起来看一下最终的实现效果吧：