HarmonyOS基本工具封装——JumpUtils可自定参数跳转PkWebView页面

前言

简介

鸿蒙基本库封装,提升鸿蒙开发效率

安装

ohpm install @peakmain/library

介绍

实现原生与H5高效通信

导入依赖

javascript 复制代码
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 | 左边箭头的图片资源,默认为 r("app.media.ic_public_left_arrow") | | 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,修改状态栏为红色
ini 复制代码
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,添加右边按钮
ini 复制代码
let bean = new WebViewBean();
bean.url = this.url
bean.rightText = "去登录"
bean.rightClick = () => {
  new ToastManager(this.getUIContext()).showNormalMessage("点击去登录")
}
JumpUtils.jumpToH5ByBean(bean)
跳转H5,自定义拦截标题
ini 复制代码
let bean = new WebViewBean();
bean.url = this.url
bean.onTitleReceiveEvent = (event) =
  if (event.title.startsWith("首页")) 
    event.title = "peakmain"
  }
}
JumpUtils.jumpToH5ByBean(bean)
相关推荐
lbb 小魔仙39 分钟前
【HarmonyOS实战】OpenHarmony + RN:自定义 useForm 表单管理
harmonyos
早點睡39044 分钟前
高级进阶 ReactNative for Harmony 项目鸿蒙化三方库集成实战:react-native-video
react native·华为·harmonyos
开开心心就好1 小时前
发票合并打印工具,多页布局设置实时预览
linux·运维·服务器·windows·pdf·harmonyos·1024程序员节
前端不太难1 小时前
HarmonyOS 游戏项目,从 Demo 到可上线要跨过哪些坑
游戏·状态模式·harmonyos
全栈探索者2 小时前
列表渲染不用 map,用 ForEach!—— React 开发者的鸿蒙入门指南(第 4 期)
react.js·harmonyos·arkts·foreach·列表渲染
一只大侠的侠3 小时前
Flutter开源鸿蒙跨平台训练营 Day8获取轮播图网络数据并实现展示
flutter·开源·harmonyos
Lionel6894 小时前
鸿蒙Flutter跨平台开发:首页特惠推荐模块的实现
华为·harmonyos
盐焗西兰花4 小时前
鸿蒙学习实战之路-Reader Kit自定义页面背景最佳实践
学习·华为·harmonyos
果粒蹬i4 小时前
【HarmonyOS】DAY10:React Native开发应用品质升级:响应式布局与用户体验优化实践
华为·harmonyos·ux
早點睡3905 小时前
基础入门 React Native 鸿蒙跨平台开发:react-native-flash-message 消息提示三方库适配
react native·react.js·harmonyos