首页 > 其他分享 >【HarmonyOS】一文教你如何在低代码项目中跳转H5页面

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

时间:2023-06-05 19:24:44浏览次数:58  
标签:代码 ohos H5 HarmonyOS 跳转 import WebView 页面

​ 【关键字】

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

 

【1、写在前面】

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

 

【2、Java实现WebView】

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

cke_2004.png

该类中代码如下:

cke_2834.png

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

cke_3876.png

在布局中添加一个返回按钮和一个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”,如下图所示:

cke_13769.png

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

cke_18225.png

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

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文件,找到事件绑定按钮,为其添加事件,如下图所示:

cke_26675.png

【4、实现效果】

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

539969719cd5bfa93dc37222d83076c0_378x816.gif%40900-0-90-f.gif

标签:代码,ohos,H5,HarmonyOS,跳转,import,WebView,页面
From: https://www.cnblogs.com/mayism123/p/17458739.html

相关文章

  • h5上传图片的两种方法
    上传方法一、ajax用formData对象上传介绍一下formData:FormData对象把数据编译成键值对的形式,用XMLHttpRequest来发送数据。注意:1.要将编码方式(enctype属性)设置成multipart/form-data2.不设置内容类型(contentType:false)3.不处理数据(processData:false)html代码:......
  • 【HarmonyOS】API9中datashare转internal的方法
    【前言】HarmonyOS3.1Release版本正式发布了,这个版本给我们带来了一个非常有用的API——FilePicker(文件选择器)@ohos.file.picker,使用这个API我们可以选取手机中的图片视频等用于分享,并且不需要配置任何权限就可以使用。具体的使用方法就不赘述了,官网可以看选择用户文件和保存......
  • 【HarmonyOS】详解低代码端云一体化开发之连接器
    ​【关键字】元服务、低代码平台、端云一体化开发、连接器、拖拽式UI 【1、写在前面】前面我们写了两篇文章分别介绍了低代码平台的基本使用和端云一体化开发中数据模型的使用,有需要的可以了解一下,文章地址贴在下面了:低代码平台的基本使用:https://developer.huawei.com/co......
  • 微信小程序页面跳转方法总结微信小程序页面跳转方法总结
    微信小程序页面跳转目前有以下方法(不全面的欢迎补充):1.利用小程序提供的API跳转://保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。//注意:调用navigateTo跳转时,调用该方法的页面会被加入堆栈,但是redirectTowx.navigateTo({url:'page/hom......
  • h5 audio播放声音
    h5audio播放声音http://www.niunan.net/test_audio.html <!DOCTYPEhtml><html><head><metaname="viewport"content="width=device-width,initial-scale=1.0"><metacharset="utf-8"/><......
  • ios h5 input框自动填充会有黄色背景块
    iosh5input框自动填充会有黄色背景块(比如验证码发过来可以自动填充的时候)取消黄色块input:-webkit-autofill,  input:-webkit-autofill:hover,  input:-webkit-autofill:focus,  input:-webkit-autofill:active{    -webkit-transition-delay:99999......
  • uniapp h5+ 拍照、录音功能实现
    uniapph5+拍照、录音功能实现uniapp功能实现提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录uniapph5+拍照、录音功能实现前言一、拍照1.调取摄像头拍摄照片2.管理系统相册,支持从相册中选择图片或视频文件、保存图片或视频文件到相册等功能GalleryOptio......
  • ECharts点击横坐标事件实现超链接跳转
    需求:微博排行榜,横坐标展示出了微博对应的id,现在需要通过点击横坐标来实现跳转到对应的微博页面。设置横坐标中的triggerEvent属性为true;xAxis:{...triggerEvent:true,...},添加on点击事件。thisChart.on("click",function(params){window.location.......
  • 解决打开IE,自动跳转到Edge方法之一
    桌面上右键快捷方式,对象位置输入  如下内容。。。"C:\ProgramFiles(x86)\InternetExplorer\iexplore.exe"https://www.baidu.com/#ie={inputEncoding}&wd=%s-Embedding 其中  https://www.baidu.com  是可以改为自己需要的地址 ......
  • 手机端sso无法正常跳转
    Vue3前端.NET后端开发问题记录:1.钉钉sso,PC端跳转不受影响,但是手机端无法加载sso。发现是钉钉api版本落后导致,不更新版本的情况下需要在index.html文件中<head>中添加  <script>   this.globalThis||(this.globalThis=this);  </script>......