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)
相关推荐
xiaoqi92224 分钟前
React Native鸿蒙跨平台如何实现分类页面组件通过searchQuery状态变量管理搜索输入,实现了分类的实时过滤功能
javascript·react native·react.js·ecmascript·harmonyos
听麟30 分钟前
HarmonyOS 6.0+ 智慧出行导航APP开发实战:离线地图与多设备位置协同落地
华为·wpf·harmonyos
qq_177767371 小时前
React Native鸿蒙跨平台实现应用介绍页,实现了应用信息卡片展示、特色功能网格布局、权限/联系信息陈列、评分展示、模态框详情交互等通用场景
javascript·react native·react.js·ecmascript·交互·harmonyos
jin1233222 小时前
基于React Native鸿蒙跨平台地址管理是许多电商、外卖、物流等应用的重要功能模块,实现了地址的添加、编辑、删除和设置默认等功能
javascript·react native·react.js·ecmascript·harmonyos
2501_920931703 小时前
React Native鸿蒙跨平台医疗健康类的血压记录,包括收缩压、舒张压、心率、日期、时间、备注和状态
javascript·react native·react.js·ecmascript·harmonyos
2501_920931704 小时前
React Native鸿蒙跨平台使用useState管理健康记录和过滤状态,支持多种健康数据类型(血压、体重等)并实现按类型过滤功能
javascript·react native·react.js·ecmascript·harmonyos
2501_921930834 小时前
高级进阶 React Native 鸿蒙跨平台开发:InteractionManager 交互优化
react native·harmonyos
前端不太难4 小时前
HarmonyOS PC 文档模型完整范式
华为·状态模式·harmonyos
ITUnicorn6 小时前
【HarmonyOS6】从零实现自定义计时器:掌握TextTimer组件与计时控制
华为·harmonyos·arkts·鸿蒙·harmonyos6
摘星编程6 小时前
OpenHarmony + RN:Stack堆栈导航转场
react native·react.js·harmonyos