OpenHarmony开发者论坛

标题: OpenHarmony如何模拟搭建本地http静态服务 [打印本页]

作者: gebiwangge    时间: 2024-3-18 11:21
标题: OpenHarmony如何模拟搭建本地http静态服务
简介
本文是在基于OpenHarmony 4.0的基础上介绍了一种编写一个前端http静态服务的思路在本文结尾会提供一个简单的demo示例

方案设计
在OpenHarmony上,如果想要访问本地网页。有两种方案
u 方案一:使用file协议,将html放至entry/src/main/resource/rawfile下,然后webview使用$rawfile(xxx.html)访问,如下图官方示例:
(, 下载次数: 2)

u 方案二:在app内搭建http静态服务器,然后webview采用http协议访问本地静态服务。
接下来我们分别剖析一下这两种方案的优劣:

优点
缺点
方案一
简单可靠,可能需要改动前端代码适配
1、网页涉及到采用ajax访问本地的配置文件,此时会报404
2、现代网页大多采用vue/react这种单页面框架编写,如果页面采用history模式路由,那么页面将因为静态资源加载错误无法展示
方案二
与在服务器部署环境保持一致,无需改动前端代码
1、目前OpenHarmony生态不成熟,暂未有搭建http静态服务第三方库

结论:如果项目中不涉及到使用ajax按需加载文件,并且单页面项目采用hash模式或者项目为传统的html,此时选择方案一为最优选择。如果方案一无法解决,建议采用方案二。可能这时有人会说了,方案二不是不能实现吗?你提出来的意义是什么?接下来将讲一个思路,如何模拟出一个http静态服务。

解决方案
OpenHarmony4.0下,目前顶层并未提供相关端口监听Api,所以,我们现在并不采用直接搭建服务端的方式实现。在官方文档上有个示例,webview 有一个api接口叫onInterceptRequest,该接口的作用及使用方法如下:
(, 下载次数: 2)
(, 下载次数: 1)

也就是说,我们可以在onInterceptRequest内拦截webview的所有请求,只需要我们并对某些特殊的请求自己构造出一个服务端响应,只要responseDataresponseCoderesponseMineTyperesponseCode设置正确,那么这个响应就与服务端返回的无异。
比如接下来的代码:
(, 下载次数: 4)
(, 下载次数: 3)

上述代码做了这些事情:
1. 拦截webview发出的http://127.0.0.1开头的请求。
2. 截取请求的uri, 比如:http://127.0.0.1:9081/#/abc.js 此时的uri abc.js
3. 根据urientry/src/main/resource/rawfile目录下匹配对应的文件,然后返回文件数据
4. 根据uri的文件后缀,获取对用的mineType,然后返回

相关示例与效果,见附件





欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/) Powered by Discuz! X3.5