【关键字】
元服务、低代码、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>
![](/i/l/?n=23&i=blog/3211477/202306/3211477-20230605190446068-2139364740.gif)
然后回到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();
}
}
![](/i/l/?n=23&i=blog/3211477/202306/3211477-20230605190446068-2139364740.gif)
【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" }, }); },
}
![](/i/l/?n=23&i=blog/3211477/202306/3211477-20230605190446068-2139364740.gif)
最后再回到index.visual文件,找到事件绑定按钮,为其添加事件,如下图所示:
【4、实现效果】
一起来看一下最终的实现效果吧: