【入门到实战】OpenHarmony开发：JumpUtils跳转PkWebView页面

本文链接：https://blog.csdn.net/Androidbye/article/details/147609441

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

介绍

实现原生与H5高效通信

导入依赖

import {JumpUtils}from '@peakmain/library'

1.1 跳转H5页面，携带token

public static jumpToH5(url: string, showTitle: boolean = true):void

参数

参数	参数类型	是否必填	说明
url	string	是	跳转url
showTitle	boolean	否	是否显示导航栏，默认为true，表示显示

1.2 跳转到H5页面，携带token的同时携带version

public static jumpToH5AddVersion(url: string, showTitle: boolean = true):void

参数

参数	参数类型	是否必填	说明
url	string	是	跳转url
showTitle	boolean	否	是否显示导航栏，默认为true，表示显示

1.3 跳转H5，拼接若干个参数

jumpToH5AddParams(url: string, showTitle: boolean = true, params: Map<string, string | number | boolean>,isAddToken: boolean = false):void

参数

参数	参数类型	是否必填	说明
url	string	是	跳转url
showTitle	boolean	否	是否显示导航栏，默认为true，表示显示
params	Map<string, string \| number \| boolean>	是	需要拼接的参数
isAddToken	boolean	否	是否拼接token，默认是false

1.4 为url添加版本号

static addVersionToUrl(url: string):string

参数

参数	参数类型	是否必填	说明
url	string	是	跳转url

1.5 为url添加token

static addTokenToUrl(url: string):string

参数

参数	参数类型	是否必填	说明
url	string	是	跳转url

1.6 跳转H5,自定义参数

public static jumpToH5ByBean(bean: WebViewBean)

参数

参数	参数类型	说明
showTitle	boolean	是否显示标题，默认为 true
url	string	网页的 URL，默认为空字符串
backgroundColorResource	ResourceColor	背景颜色资源，默认为白色
leftImage	PixelMap \| ResourceStr \| DrawableDescriptor	\| null
titleColor	ResourceColor	标题颜色资源，默认为 $r("app.color.color_272a2b")
titleBold	number \| FontWeight \| string	标题字体粗细，默认为粗体
rightText	string	右边显示的内容，默认为空字符串
rightImage	PixelMap \| ResourceStr \| DrawableDescriptor \| null	右边的图片资源，默认为 null
showStatusBar	boolean	是否显示状态栏，默认为 true
rightClick（setter）	() => void	右边点击事件的回调函数，设置后会将该回调赋值给 WebViewManager 实例的 rightClick 属性
onTitleReceiveEvent（setter）	Callback	标题接收事件的回调函数，设置后会将该回调赋值给 WebViewManager 实例的 callback 属性

示例代码

跳转H5，修改状态栏为红色

let bean = new WebViewBean();
bean.url = this.url
bean.backgroundColorResource = Color.Red
bean.titleColor = Color.White
bean.leftImage = $r("app.media.app_icon")
JumpUtils.jumpToH5ByBean(bean)

跳转H5，添加右边按钮

let bean = new WebViewBean();
bean.url = this.url
bean.rightText = "去登录"
bean.rightClick = () => {
  new ToastManager(this.getUIContext()).showNormalMessage("点击去登录")
}
JumpUtils.jumpToH5ByBean(bean)

跳转H5，自定义拦截标题

let bean = new WebViewBean();
bean.url = this.url
bean.onTitleReceiveEvent = (event) =
  if (event.title.startsWith("首页")) 
    event.title = "peakmain"
  }
}
JumpUtils.jumpToH5ByBean(bean)