【鸿蒙实战开发】基于webview的Picker拉起

于 2024-09-11 22:06:59 发布
阅读量791 收藏 6
点赞数 14
分类专栏： 鸿蒙开发 移动开发 HarmonyOS 文章标签： harmonyos 移动开发 组件化 ArkUI 鸿蒙开发 Webview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CTrup/article/details/142151543
版权

往期知识点整理

场景描述

在webview中拉起文件管理器，图库以及相机。场景一：在web页面实现文件和图片上传。场景二：在web页面拉起摄像头，实现拍照上传

方案描述

场景一

本地h5页面内picker拉起

效果图

在web页面实现picker拉起文件管理器。

在web页面实现picker拉起图库。

方案

调用web的onShowFileSelector事件响应用户在h5侧写入的“选择文件”按钮，并使用文件选择器对象DocumentViewPicker的select方法，通过选择模式拉起documentPicker界面选择文件。


Image(this.uris[0]).width(100).height(100)

//用来展示选择的图片

Image(this.uris[1]).width(100).height(100)

Web({ src: $rawfile('TestonShowFileSelector.html'), controller: this.controller })

.javaScriptAccess(true)

.domStorageAccess(true)

.onShowFileSelector((event) => {

console.log('MyFileUploader onShowFileSelector invoked')

const documentSelectOptions = new picker.DocumentSelectOptions();

// 选择媒体文件的最大数目

documentSelectOptions.maxSelectNumber = 2;

let uris: Array<string> = [];

const documentViewPicker = new picker.DocumentViewPicker();

documentViewPicker.select(documentSelectOptions).then((DocumentSelectResult: Array<string>) => {

this.uris[0] = DocumentSelectResult[0];

console.info('photoViewPicker.select to file succeed and uris are:' + this.uris);

}).catch((err: BusinessError) => {

console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);

})

调用web的onShowFileSelector事件响应用户在h5侧写入的“选择文件”按钮，并使用图库选择器对象PhotoViewPicker的select方法，通过选择模式拉起photoPicker界面选择图片。


Web({ src: $rawfile('i.html'), controller: this.controller })

.javaScriptAccess(true)

.domStorageAccess(true)

.onShowFileSelector((event) => {

console.log('MyFileUploader onShowFileSelector invoked')

const photoSelectOptions = new picker.PhotoSelectOptions();

// 过滤选择媒体文件类型为IMAGE_VIDEO_TYPE

photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE;

// 选择媒体文件的最大数目

photoSelectOptions.maxSelectNumber = 2;

let uris: Array<string> = [];

const photoViewPicker = new picker.PhotoViewPicker();

photoViewPicker.select(photoSelectOptions).then((photoSelectResult: picker.PhotoSelectResult) => {

this.uris = photoSelectResult.photoUris;

console.info('photoViewPicker.select to file succeed and uris are:' + this.uris);

}).catch((err: BusinessError) => {

console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);

})

return false

})

场景二

在web页面拉起摄像头，实现拍照上传

效果图

方案

调用web的onShowFileSelector事件响应用户在h5侧写入的“选择文件”按钮，先通过getContext接口获取Context上下文，返回的Context类型为UIAbilityContext。然后调用 startAbilityForResult启动一个Ability，在其want参数中表明要启动的应用信息以及对应的pid。


const context = getContext(this) as common.UIAbilityContext

context.startAbilityForResult({

action:"ohos.want.action.imageCapture",

parameters:{

callBundleName:"com.hm.imageshow"

}

}).then((res)=>{

console.log("testTag - " +JSON.stringify(res));

let str:string = res.want?.parameters!["resourceUri"] as string

console.log("str"+str);//file://media/Photo/11/IMG_1713942933_005/IMG_20240424_151353.jpg

let fd = fs.openSync(str).fd

this.uris[0] = str

let arr:ArrayBuffer = new ArrayBuffer(128)

fs.readSync(fd,arr)

console.log("testTag - " + str);

})

以上两种场景的h5页面可以通用，都可以用一个上传文件的input框来拉起。


<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">

</head>

<body>

<form id="upload-form" enctype="multipart/form-data">

<input type="file" id="upload" name="upload"/>

</form>

</body>

</html>

总是有很多小伙伴反馈说：鸿蒙开发不知道学习哪些技术？不知道需要重点掌握哪些鸿蒙开发知识点？ 为了解决大家这些学习烦恼。在这准备了一份很实用的鸿蒙全栈开发学习路线与学习文档给大家用来跟着学习。

针对一些列因素，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线，包含了鸿蒙开发必掌握的核心知识要点，内容有（OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、系统定制移植……等）技术知识点。

《鸿蒙 (Harmony OS)开发学习手册》（共计892页）:https://gitcode.com/HarmonyOS_MN/733GH/overview

如何快速入门？

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识:

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

在这里插入图片描述

基于ArkTS 开发

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

在这里插入图片描述

鸿蒙开发面试真题（含参考答案）:https://gitcode.com/HarmonyOS_MN/733GH/overview

在这里插入图片描述

OpenHarmony 开发环境搭建

图片

《OpenHarmony源码解析》:https://gitcode.com/HarmonyOS_MN/733GH/overview

  • 搭建开发环境
  • Windows 开发环境的搭建
  • Ubuntu 开发环境搭建
  • Linux 与 Windows 之间的文件共享
  • ……
  • 系统架构分析
  • 构建子系统
  • 启动流程
  • 子系统
  • 分布式任务调度子系统
  • 分布式通信子系统
  • 驱动子系统
  • ……

图片

OpenHarmony 设备开发学习手册:https://gitcode.com/HarmonyOS_MN/733GH/overview

图片

CTrup
关注
  • 14
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
鸿蒙javaUI-webview-demo.rar
06-10
鸿蒙SDK是华为推出的用于开发鸿蒙OS应用的软件开发工具包，它包含了各种API、工具和文档，帮助开发者构建跨设备的应用程序。在本示例中，开发者将使用鸿蒙SDK中的Java UI和WebView组件。 2. **Java UI**： 鸿蒙...
【愚公系列】2023年12月 HarmonyOS教学课程 054-Web组件（基本使用和属性）
热门推荐
时光隧道
12-25 6万+
Web是一种基于互联网的技术和资源的网络服务系统。它是指由许多互连的计算机组成的全球性计算机网络，使用户能够通过浏览器访问和交互式使用各种信息和资源，如网页、文档、图片、视频、音频等。通过Web，用户可以浏览网页、发送电子邮件、参与在线社交网络、进行在线购物等各种活动。Web的核心技术包括超文本传输协议（HTTP），超文本标记语言（HTML）和统一资源定位器（URL）。HarmonyOS中的Web组件是一种基于Web技术的组件，可以在HarmonyOS应用程序中嵌入Web内容。
鸿蒙-webview的使用和JS交互（附源码）
坚果的博客
01-25 3610
作者：坚果 公众号：“大前端之旅” 华为云享专家，InfoQ签约作者，阿里云专家博主，51CTO博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。 日常我们在开发项目时，为了项目快速的开发和迭代，难免会用到H5页面。使用鸿蒙进行项目开发时，也一样免不了要加载H5页面，在移动开发中打开H5页面需要使用WebView组件。同时，为了和H5页面进行数据交换，有时候还需要借助JSBridge来实现客户端与H5之间的通讯。 那么鸿蒙之中.
鸿蒙星空的太白星 | WebView给元服务调用JS API指明方向
Mayism123的博客
06-27 434
查阅了高德、百度、华为、腾讯地图能力的后发现，各大厂商对鸿蒙系统的支持能力参差不齐，都没有提供鸿蒙可用的SDK。最初的思路被局限在通过鸿蒙的JS集成地图的JS API来实现，但是最终被各种报错而折磨不堪。开发此类元服务过程中通常需要用到地图功能，例如在景区类型元服务的卡片中显示我的位置信息，通过推荐路线提供景区最佳游览路线。在万物互联时代，提供了更丰富的入口、更智能的分发、更高效的转化，助力开发者快速抢占流量入口。天空中最亮的星，太白星，在薄云中依然闪耀，如同海上迷雾中的灯塔，为迷失方向的船只指明方向。
基于webview的Picker拉起
最新发布
hongxiaomeng的博客
06-21 316
【妙用WebView】鸿蒙元服务中如何使用Java Script的API创建地图
华为开发者联盟
04-03 902
查看了高德、百度、华为、腾信地图的后发现，各大厂商对鸿蒙系统的支持能力参差不齐，都没有提供鸿蒙可用的SDK；最初思路被局限在通过鸿蒙的JS 集成地图的JS API，但是最终被各种报错折磨到放弃。3）加载组件：String innhtml="document.getElementsByTagName('html')[0].innerHTML='"+mapbody+"';我这边主体页面都是用的JS类Web开发范式开发的，所以需要从JS页面跳转到JAVA页面；webview 地图 高德 腾讯地图 百度地图。
鸿蒙webview的使用和JS交互.zip
02-07
在鸿蒙系统（HarmonyOS）的开发过程中，Webview组件扮演着重要的角色，它使得开发者可以将网页内容嵌入到原生应用中，提供丰富的交互体验。本教程将深入探讨如何在鸿蒙系统中使用Webview以及实现与JavaScript的交互...
基于Android的安卓TV原生Webview打包设计源码
04-08
安卓TV原生Webview打包 - 基于Android开发，包含55个文件，如PNG、XML、JAVA、GITIGNORE、GRADLE、APK、PROPERTIES、SER和LICENSE等。该项目提供了一个安卓TV原生Webview打包的解决方案，通过Java语言实现，为用户...
Android混合开发教程之WebView的使用方法总结
01-20
【Android混合开发中的WebView使用详解】 在Android应用开发中，WebView是一个至关重要的组件，它允许开发者在应用程序中嵌入网页内容并实现与网页的交互。本文将深入探讨WebView的使用方法，包括其基本功能、配置...
基于鸿蒙HarmonyOS，使用ArkTS开发纯净的浏览器（小狐狸浏览器）.zip
02-07
在本项目中，我们将探讨如何基于华为的鸿蒙HarmonyOS操作系统，利用 ArkTS 开发一个纯净的浏览器应用，以“小狐狸浏览器”为例。鸿蒙系统是华为面向物联网时代推出的一款全新分布式操作系统，旨在提供跨平台、跨设备...
鸿蒙开发（17）---WebView组件
李元静
07-07 6724
目录WebView组件 WebView组件
【鸿蒙 HarmonyOS】Web组件_harmonyos webview(2)，2024年最新阿里P8亲自讲解
2401_84160272的博客
04-17 1309
Web组件默认支持手势进行缩放。Button(‘后退’).onClick(()=>this.controller.backward())Button(‘前进’).onClick(()=>this.controller.forward())Button(‘刷新’).onClick(()=>this.controller.refresh())Button(‘停止’).onClick(()=>this.controller.stop())Button(‘获取js中的方法’).onClick(()=>{
鸿蒙-webview的使用和JS交互（附源码），零基础前端开发培训
2401_84166376的博客
04-09 1157
第三步打开模拟器点击登录，打开浏览器授权选择p40启动模拟器第五步开始正文接下来开始正文。应用预览：点击"打开网址"按钮会加载上方网址的Web页面，通过后退"和"前进"按钮实现Web页面间的导航。点击"加载本地网页"按钮加载本地Web页面，点击"发送消息给本地html"或者Web页面中的"调用Java方法"按钮，实现应用与Web页面间的交互。这里是http访问方式，鸿蒙的默认是https访问模式，如果您的请求网址是http开头的，可以继续查看后面的教程。1. 增加一个WebView组件。
鸿蒙ArkTs开发WebView问题总结
Florenza的博客
02-28 1833
解决:在加载webview的controller中加入.官方文档。
2024年最全鸿蒙-webview的使用和JS交互（附源码），2024年最新HarmonyOS鸿蒙模块化面向接口编程
2401_84853495的博客
05-08 999
在Web页面进行链接跳转时，WebView默认会打开目标网址，通过WebAgent对象可以定制该行为，示例代码如下：@Override} else {});除此之外，WebAgent对象还提供了相关的回调函数以观测页面状态的变更，如onLoadingPage、onPageLoaded、onError等方法。
鸿蒙 加载 webview
cmmboy1990的博客
05-13 1508
1.xml代码 <ohos.agp.components.webengine.WebView ohos:id="$+id:webView" ohos:height="match_content" ohos:width="match_parent"/> 注意包名一起写，不能直接写 WebView 2.java代码： private void initWebView() { webView = findComponentByI
鸿蒙开发之Web与原生通信
Lu_Ca的博客
12-29 1714
提示：目前API9、鸿蒙4.0的本地模拟器不支持交互，巨坑。参考。
【HarmonyOS】webview在鸿蒙系统无点击反应
华为开发者联盟
12-24 1964
webview的activity的launchmode是singleTop类型的。在shouldOverrideUrlLoading方法中，判断url是否包含某个字段，然后替换url该字段为其他字段，然后继续打开当前activity，但是跳转不过去。设置WebViewClient 且该方法返回 true ，则说明由应用的代码处理该 url，WebView 不处理。1、在其他品牌手机没有出现这个问题，华为非鸿蒙系统也无此问题。欲了解更多更全技术文章，欢迎访问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值