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

一、准备及原型
  1. 前言 这个暑假接了一个小项目,用cordova实现一个表型采集的app,其中一个文件传输导入导出的的需求使:手机端开启服务,在同一个wifi环境下,电脑浏览器进行访问手机ip地址,然后显示出手机暴露的页面,再进行相关的操作。
    第一念头:什么鬼的需求!
    这里写图片描述
    但是还是硬着头皮按照产品经理学长的的意思,画出该功能相关的原型:
  2. 原型
    手机端:
    这里写图片描述
    电脑端:
    这里写图片描述
二、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>
    <<
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值