cordova Hybrid App环境搭建以及工程创建

约定不等于承诺〃 2022-06-01 10:11 377阅读 0赞

最近在公司有一个项目，用到了cordova，再次记录下项目中遇到的问题及解决方案。其实使用cordova开发Hybrid App,开发方式处理在搭建环境之外，其他开发模式与web的开发模式无很大差别，基本上都是使用html，css，js的方式完成项目开发。

[官网中文文档][Link 1]

步骤

**一、环境搭建：**

1.node.js  
[官网下载地址][Link 2]  
  
2.安卓/ios 开发环境  
  
**二、安装cordova/phonegap**  
  
phonegap 可装 可不装 只是用来调试的软件，跟一般的软件安装一样，看你需求而定吧。  
全局安装cordova：   
  
 npm install -g cordova   
  
最好不用cnpm安装,可能会有包丢失的情况。在安装环境的过程中，可能会出现各种各样的问题，我们要做的就是保持耐心，一定要有耐心，耐心折腾。首先检查步骤有没有错，要注意看报的什么错，缺少什么文件，保持耐心......我环境的问题也搞了两天。一开始java 路径配置错，还有安装好后创建工程报缺少gradle等，这些错误都要仔细观察，相信问题总能得到解决的，大不了从头再来。  
...  
  
安装好后  使用命令： cordova -v

查看是否安装成功

**三、创建cordova工程  <文件夹名> <包名> <app名>:**  
  
cordova create hello com.example.hello  hello  
  
目录结构如下：  
![SouthEast][]  
里面有我们十分熟悉的www目录，我们就可以在里面愉快编写代码了,www下的  
index.html默认为项目入口文件。

**四、添加平台支持**

添加安卓平台  
cordova platform add android   
添加ios平台  
  
cordova platform add  ios  
可以看到platforms里面多了andorid /ios 目录 那就是不同平台的工程目录。

**五、添加插件 **

cordova 为我们添加了很多插件支持，你可以选择你需要的插件进行安装:  
cordova plugin add  插件名 *\*\**\*

[插件地址][Link 3]

**六、编译、打包**

cordova build android

这样在android/app/build/ouputs/apk/debug下就生成了安装包。但是不知道为啥，网络请求会被拦截，通过我们公司的安卓工程师重写了方法来允许网络请求，数据就可以回来了。

[Link 1]: http://cordova.axuer.com/docs/zh-cn/latest/
[Link 2]: https://nodejs.org/zh-cn/
[SouthEast]: /images/20220601/3be122e080a54d80bf1161399db3b8f7.png
[Link 3]: http://cordova.apache.org/plugins/