鸿蒙星空的太白星 | WebView给元服务调用JS API指明方向
漆黑深夜夜凉如水，繁星盛开于无垠苍穹。清风徐来，一片薄云，夜空顿然失色，有些阴霾。天空中最亮的星，太白星，在薄云中依然闪耀，如同海上迷雾中的灯塔，为迷失方向的船只指明方向。
元服务是华为提供的一种面向未来的服务形态，具有独立入口和免安装等特性，支持运行在1+8+N设备上。在万物互联时代，提供了更丰富的入口、更智能的分发、更高效的转化，助力开发者快速抢占流量入口。
景区类型的元服务如果实现一键购票、游览路线推荐、智慧导览、智慧商店等，将大大提升旅客的兴致来自主游览。开发此类元服务过程中通常需要用到地图功能，例如在景区类型元服务的卡片中显示我的位置信息，通过推荐路线提供景区最佳游览路线。通常思路是PageAbility打开自定义地图，查询地图信息（POI）点，做路径规划、路径推荐等。通过卡片中内置导航功能，在景区内帮用户贴心的避开人从众。
想法是美好的，现实是骨感的。查阅了高德、百度、华为、腾讯地图能力的后发现，各大厂商对鸿蒙系统的支持能力参差不齐，都没有提供鸿蒙可用的SDK。商用APP的主体页面通常都是JS类的WEB页面，于是一直琢磨如何使用JS API的方式。最初的思路被局限在通过鸿蒙的JS集成地图的JS API来实现，但是最终被各种报错而折磨不堪。秉着只要思想不滑坡，方法总比问题多，冥冥中看到了鸿蒙漆黑星空中那颗最亮的星，Java UI组件之太白星WebView。
WebView组件灯塔般的星光一闪，解决问题的思路灵感乍现。立刻想到了JS类WEB页面通过startAbility跳转到mapAbility，来实现JS页面跳转到Java页面的逻辑。在mapAbility中开发地图页面，妙用Java UI框架中的Webview组件来加载本地Html文件，即可使用Html调用地图JS API接口。
敲黑板，画重点，关键几步听我娓娓道来。
1.准备地图的key。
参考地图厂商的JS API开发指导，申请地图的key，这里以高德地图为例说明。
2.完成WebView组件的初始化。
请认真参考WebView组件文档完成，千万不要跳过。
其中最关键的就是配置应用的网络权限，如果网络权限不对，还想调通JS API，那就等于是奢望。
打开“entry > src > main > config.json”文件，添加如下配置。
"module": {
"reqPermissions": [
{
"name": "ohos.permission.INTERNET"
}]
}
3.新建资源文件。
“资源类型”请选择“Layout”。
布局文件内容中定义地图组件。
示例代码如下：
<?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:orientation="vertical">
<ohos.agp.components.webengine.WebView
ohos:id="$+id:ability_main_webview"
ohos:height="600vp"
ohos:width="match_parent"
ohos:weight="1"/>
<Text
ohos:height="150vp"
ohos:width="match_parent"
ohos:text="hello map">
</Text>
</DirectionalLayout>
4.针对JS类Web开发范式开发的主体页面，使用startAbility跳转到mapAbility，实现从JS页面跳转到Java页面。
说明：开发UI的程序员习惯用JS，所以主体页面通常都是JS的。WebView组件是Java的，所以需要从JS页面跳转到Java页面。
新建mapAbility
示例代码如下：
Intent intent = new Intent();
Operation operation = new Intent.OperationBuilder()
.withBundleName("com.huawei.testjsmap.hmservice")
.withAbilityName("com.huawei.testjsmap.mapAbility")
.build();
intent.setOperation(operation);
startAbility(intent);
5.在mapAbility中开发地图页面，Webview加载本地Html文件来调用地图JS API接口。
说明：Java代码开发请参考Java UI框架文档。
在资源文件“resources/rawfile”目录下增加map.html文件，参考地图JS开发指导编写Html文件。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>创建地图</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=准备工作中申请的地图KEY"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
height: 100%;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<script type="text/javascript">
function initMap() {
var center = new TMap.LatLng(39.984104, 116.307503);
//初始化地图
var map = new TMap.Map("container", {
rotation: 20,//设置地图旋转角度
pitch:30, //设置俯仰角度（0~45）
zoom:12,//设置地图缩放级别
center: center//设置地图中心点坐标
});
}
</script>
</body>
</html>
在mapAbility的onstart方法中直接通过mapview.load打开一个拼装的URI地址： webView.load("https://example.com/rawfile/map.html");
至此问题的迷雾已破开，薄云消散，原本有些阴霾的苍穹，星光璀璨。鸿蒙星空恍若一个巨大的舞台，星有多大，舞台就有多大。剩下的要在元服务中实现哪些业务就看对应地图厂商JS API能力了。
一颗“彩蛋”流星划破天空。
“彩蛋”流星之本地调试技巧：
在webAgent中通过复写processResourceRequest的方式实现本地文件加载，这种方式可以直接通过IDE工具打开Html页面进行调试，调试JS API的效率大大提升。
示例代码如下：
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_map_main);
WebView webView = (WebView) findComponentById(ResourceTable.Id_ability_main_webview);
webView.getWebConfig().setJavaScriptPermit(true);
webView.setWebAgent(new WebAgent() {
@Override
public ResourceResponse processResourceRequest(WebView webview, ResourceRequest request) {
final String authority = "example.com";
final String rawFile = "/rawfile/";
Uri requestUri = request.getRequestUrl();
if (authority.equals(requestUri.getDecodedAuthority())) {
String path = requestUri.getDecodedPath();
if (TextTool.isNullOrEmpty(path)) {
return super.processResourceRequest(webview, request);
}
if (path.startsWith(rawFile)) {
// 根据自定义规则访问资源文件
String rawFilePath = "entry/resources/rawfile/" + path.replace(rawFile, "");
String mimeType = URLConnection.guessContentTypeFromName(rawFilePath);
try {
Resource resource = getResourceManager().getRawFileEntry(rawFilePath).openRawFile();
ResourceResponse response = new ResourceResponse(mimeType, resource, null);
return response;
} catch (IOException e) {
HiLog.info(TAG, "open raw file failed");
}
}
}
return super.processResourceRequest(webview, request);
}
});
webView.load("https://example.com/rawfile/map.html");
}
鸿蒙星空的太白星 | WebView给元服务调用JS API指明方向的更多相关文章
- 如何优雅的使用Fegin去构造通用的服务调用的API
第一步: 创建一个公共的API服务:命名为api(根据自己实际情况进行命名) <?xml version="1.0" encoding="UTF-8"?& ...
- 手把手教你学Dapr - 4. 服务调用
上一篇:手把手教你学Dapr - 3. 使用Dapr运行第一个.Net程序 介绍 通过使用服务调用,您的应用程序可以使用标准的gRPC或HTTP协议与其他应用程序可靠.安全地通信. 为什么不直接用Ht ...
- Dapr初体验之服务调用
初次理解服务调用 在微服务中,有一个难点就是:如果你想使用各个服务组件,你就得知道不同服务的地址和端口,也就是服务发现. 在传统应用我们是怎么做的?就是在web项目里配置上api地址,如下: 在一个w ...
- Spring Cloud 声明式服务调用 Feign
一.简介 在上一篇中,我们介绍注册中心Eureka,但是没有服务注册和服务调用,服务注册和服务调用本来应该在上一章就应该给出例子的,但是我觉得还是和Feign一起讲比较好,因为在实际项目中,都是使用声 ...
- Dubbo 源码分析 - 服务调用过程
注: 本系列文章已捐赠给 Dubbo 社区,你也可以在 Dubbo 官方文档中阅读本系列文章. 1. 简介 在前面的文章中,我们分析了 Dubbo SPI.服务导出与引入.以及集群容错方面的代码.经过 ...
- go微服务系列(三) - 服务调用(http)
1. 关于服务调用 2. 基本方式调用服务 3. 服务调用正确姿势(初步) 3.1 服务端代码 3.2 客户端调用(重要) 1. 关于服务调用 这里的服务调用,我们调用的可以是http api也可以是 ...
- Dubbo服务调用过程源码解析④
目录 0.服务的调用 1.发送请求 2.请求编码 3.请求的解码 4.调用具体服务 5.返回调用结果 6.接收调用结果 Dubbo SPI源码解析① Dubbo服务暴露源码解析② Dubbo服务引用源 ...
- C#.NET 大型企业信息化系统集成快速开发平台 4.2 版本 - 外部服务调用、内部服务调用优化，面向服务化的
现在的信息系统越来越复杂,越来越庞大,不仅需要内部是一个整体,而且还需要提供很多对外的服务调用. 1:别人如何调用最方便?用不同的开发语言调用.例如app.手持设备.服务器.2:服务的返回状态是什么样 ...
- WCF 服务调用 QueryRun
通过AX2012的WCF服务调用AX2012的方法时,如果方法里调用了QueryRun对象时,会报错,报错信息如下:System.ServiceModel.FaultException: 无法将类型为 ...
- Wcf:可配置的服务调用方式
添加wcf服务引用时,vs.net本来就会帮我们在app.config/web.config里生成各种配置,这没啥好研究的,但本文谈到的配置并不是这个.先看下面的图: 通常,如果采用.NET的WCF技 ...
随机推荐
- pandas之loc/iloc操作
在数据分析过程中,很多时候需要从数据表中提取出相应的数据,而这么做的前提是需要先"索引"出这一部分数据.虽然通过 Python 提供的索引操作符"[]"和属性操 ...
- PHP的WAMP的安装
WAMP独立安装 软件官网下载: Apache:http://httpd.apache.org/download.cgi MySQL:http://dev.mysql.com/downloads/ P ...
- 最新升级优化 shopee|美客多 Mercadolibre|shopfiy|lazada|独立货代贴单系统 可规模化的贴单打单系统 源码下载独立部署
七想网络 跨境猴 最新优化改进版本的 虾皮代打包-虾皮代贴单 独立部署源码版本货代贴单系统 介绍: 台湾海外仓_shopee货代_虾皮物流–虾皮代贴单 虾皮代打包-虾皮代贴单-虾皮货代平台 shope ...
- 3.1 JAVA方法：
JAVA方法: 何为方法 方法是语句的集合,这个集合执行一个功能 方法包含于类或对象中 方法在程序中被创建,在其他地方被引用 java全是值传递 方法的定义和调用 方法的定义: 修饰符 返回类型 方法 ...
- [双目视差] 立体匹配-SGBM半全局立体匹配算法
立体匹配-SGBM半全局立体匹配算法 一.SGBM算法实现过程 1.预处理 预处理目的是得到图像的梯度信息 Step1:SGBM采用水平Sobel算子,对图像做处理,公式为: Sobel(x,y)=2 ...
- 记一次某CMS代码审计（转载）
作者:ddwGeGe 本文转自先知社区:https://xz.aliyun.com/t/11774 前言 无意中浏览到某小众OA官网且可以下载到源码,随机审计一波,最后成功Getshell,大佬勿喷 ...
- Python定时任务框架apscheduler的简单使用
apscheduler的简单使用 APScheduler有四大组件: 1.触发器 triggers : 触发器包含调度逻辑.每个作业都有自己的触发器,用于确定下一个任务何时运行.除了初始配置之外,触发 ...
- vue+vant项目中 rem适配配置
vant rem适配,需要安装两个插件 postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem lib-flexible 用于设置 rem 基准值 postcss-px ...
- 2021-08-11：按要求补齐数组。给定一个已排序的正整数数组 nums，和一个正整数 n 。从 [1, n] 区间内选取任意个数字补充到 nums 中，使得 [1, n] 区间内的任何数字都可以用
2021-08-11:按要求补齐数组.给定一个已排序的正整数数组 nums,和一个正整数 n .从 [1, n] 区间内选取任意个数字补充到 nums 中,使得 [1, n] 区间内的任何数字都可以用 ...
- 2021-11-04：计算右侧小于当前元素的个数。给你`一个整数数组 nums ，按要求返回一个新数组 counts 。数组 counts 有该性质： counts[i] 的值是 nums[i] 右
2021-11-04:计算右侧小于当前元素的个数.给你`一个整数数组 nums ,按要求返回一个新数组 counts .数组 counts 有该性质: counts[i] 的值是 nums[i] 右侧 ...