手机app内置http服务器实现电脑端访问手机html页面（上）

最新推荐文章于 2025-05-26 15:34:36 发布

寒砧

最新推荐文章于 2025-05-26 15:34:36 发布

阅读量1.1w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Cordova 文章标签： cordova http服务器

本文链接：https://blog.youkuaiyun.com/hanzhenbushihu/article/details/81568004

一、准备及原型

前言这个暑假接了一个小项目，用cordova实现一个表型采集的app，其中一个文件传输导入导出的的需求使：手机端开启服务，在同一个wifi环境下，电脑浏览器进行访问手机ip地址，然后显示出手机暴露的页面，再进行相关的操作。
第一念头：什么鬼的需求！

但是还是硬着头皮按照产品经理学长的的意思，画出该功能相关的原型：
原型
手机端：

电脑端：

二、httpd插件

1..思路分析
大概就是上述原型的意思了，这个有点像小米文件管理中的远程管理功能，不过它的是ftp协议的服务，只能进行简单的文件传输。而需求是可以访问到html页面。
按照这种思路即是将手机变成一个http服务器，这样需要重写很多东西，这个项目是基于html的移动app，采用的是cordova 框架，于是我先去cordova 官方插件，功夫不负有心人，找到了一个httpd的插件。

cordova plugin add cordova-plugin-httpd

添加成功
2. api：先是看了一下readme提供的api，嗯只有四个分别是启动服务、停止服务，显示手机暴露的ip、显示根目录

startServer( options, success_callback, error_callback );

stopServer( success_callback, error_callback );

getURL( success_callback, error_callback );

getLocalPath( success_callback, error_callback );

三、使用及开发

1 . index.html界面分别创建四个按钮

    <p><button onclick="startServer('');">Start CorHttpd at assets/www/filetransfer</button></p>
    <p><button onclick="startServer('/');">Start CorHttpd at /</button></p>
    <<