cordova 真机使用远程H5页面调试

前言

这是公司一位同事的成果，我只是拿来记录一下，在这要谢谢那位同事，真的很棒

cordova

cordova 是使用h5 css js 来开发移动端应用。具有一套页面可以多端适配的特性，大大提高了APP的开发效率，节省了开发成本，也是目前比较流行的一套解决方案。

那么我们是怎么让开发的页面在手机上运行的呢，其实cordova就是相当于一个桌面应用的游览器，我们开发好的页面放进cordova中就相当于在游览器中打开一个网页，当然啦，加载速度要比游览器快的多，之前webapp为什么会那么卡顿，就是因为他根本就是网页，那么使用cordova开发的应用跟他们又有什么区别呢？

cordova应用雨传统webapp的区别

首页要说一下webapp他本质上来说是一个网页，所有的资源和我们在游览器中打开一个网页一样，都需要从远端加载，那cordova到底跟它有啥区别呢（哈哈。。。别急听我慢慢道来===>注意下面是重点）cordova的所有资源到不是从远端加载的，而是我们打包的时候把所有的资源都打到了本地，所以就不需要从远端加载数据，大大提高了加载速度，是不是觉得很简单

h5远程调试

前面说了一大堆废话，接下来我们来一步一步实现真机h5的远程调试功能

原理

我们将开发好的h5页面放在cordova中的www目录下，查看cordova的config.xml其中content:这个index.html是我们h5的启动页面，在www的根目录下面，之后再使用cordova build android/ios就可以编译成对应的程序包

现在的问题是我们的h5是在node的环境下开发的，所以如果只开发页面还好，可以直接在游览器中开发调试，一旦涉及到与原生交互的调试起开非常痛苦，每次我们都需要把编译好的包放进cordova的www目录下再使用 cordova build android/ios来进行安装，想想都痛苦。那我们是不是可以修改content里的这个index.html呢？事实证明是可以的，不过我们还需要折腾一番才行，那么让我们来改造一下

step1

将cordova 项目里的platforms/android/platform_www下的文件和文件夹拷贝到我们h5项目的static目录中（与src同级的static）

step2

修改index.html（h5项目中的index.html）在head标签中

<script type="text/javascript" src="./static/cordova.js"></script>

step3

启动h5项目 npm run dev

step4

修改cordova项目中的config.xml的

content <content src="http://192.168.XX.XX:8080"/>

这个地址就是你h5项目运行的地址，IP请改为本机的地址，不能使用localhost

step5

在cordova项目中开发命令输入cordova run android 注意是run

提示

注意调试完后删除index.html中

<script type="text/javascript" src="./static/cordova.js"></javascript