请选择 进入手机版 | 继续访问电脑版

积分31 / 贡献0

提问0答案被采纳0文章1

作者动态

    [经验分享] OpenHarmony如何模拟搭建本地http静态服务 原创 精华

    gebiwangge 显示全部楼层 发表于 2024-3-18 11:21:09
    简介
    本文是在基于OpenHarmony 4.0的基础上介绍了一种编写一个前端http静态服务的思路在本文结尾会提供一个简单的demo示例

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

    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,该接口的作用及使用方法如下:
    fakename.png
    fakename.png

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

    上述代码做了这些事情:
    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,然后返回

    相关示例与效果,见附件
    fakename.png

    demo30.zip

    617.64 KB, 下载次数: 5

    ©著作权归作者所有,转载或内容合作请联系作者

    您尚未登录,无法参与评论,登录后可以:
    参与开源共建问题交流
    认同或收藏高质量问答
    获取积分成为开源共建先驱

    Copyright   ©2023  OpenHarmony开发者论坛  京ICP备2020036654号-3 |技术支持 Discuz!

    返回顶部