Android H5混合开发（1）：构建Cordova 项目

大白兔幸福一米阳光 發表於 2019-10-11 15:25:00

Android H5混合开发（1）：构建Cordova 项目

<h2 id="cordova是什么">Cordova是什么</h2>
Apache Cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。 
 
以移动平台为例，安卓、IOS平台设备的常用功能，被Apache封装成一个个插件，如摄像头、传感器、网络、数据等。H5端通过调用插件，即可使用设备的这些功能。而项目具体的业务功能，也可封装成自定义的插件，供H5端调用，如：App端分享功能、支付功能、扫码、定位、自定义键盘等。 
 
Cordova提供了完整的机制，使得H5、安卓、IOS等平台混合开发不再复杂。
<pre><code>Cordova的项目可包含多个平台，各平台操作自己的代码即可，与H5端通过插件通信：
www：H5的工作目录
/platforms/android/：安卓项目的工作目录
/platforms/ios/：IOS项目的工作目录
....
</code></pre>
更多信息，请参考官网： 
https://cordova.apache.org/docs/en/latest/
<h2 id="cordova环境">Cordova环境</h2>
<h4 id="1平台环境">1.平台环境</h4>
用Cordova构建和运行App，需要安装每个你需要平台的SDK，以安卓为例：
1.1 Java开发工具包(JDK)
<pre><code>安装或者最新的版本
</code></pre>
1.2 Android SDK
<pre><code>安装或者
</code></pre>
1.3 设置环境变量JAVA_HOME 和 ANDROID_HOME 
为了使功能正常使用Cordova的CLI工具，需要设置一些环境变量。 
以Mac平台为例：
<pre><code>1.3.1 打开终端Terminal
1.3.2 输入创建命令(如果不存在)：touch .bash_profile
1.3.3 打开文件命令：open .bash_profile
</code></pre>
<img src="https://upload-images.jianshu.io/upload_images/10170988-79e8a22cc7d8c81c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"> 
打开.bash_profile，配置环境变量（根据自己的目录，修改即可），如下图： 
<img src="https://upload-images.jianshu.io/upload_images/10170988-9882a9e493c01d03.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<h4 id="2cordova环境">2.Cordova环境</h4>
安装cordova命令行工具： 
2.1 下载和安装Node.js(地址：https://nodejs.org/en/download/)。 
安装完成后你可以在命令行中使用<code>node</code> 和 <code>npm</code> 。
<pre><code>node.js是javascript的一种运行环境，是一个服务器端的javascript的解释器。
npm其实是Node.js的包管理工具（package manager）。
nodejs中包含npm，安装完成nodejs，npm也就安装好了。

通过命令node --version可查看nodejs版本；
通过命令npm --version可查看npm版本；
</code></pre>
2.2 安装cordova 模块使用Nodejs的npm工具。 
cordova模块会被npm工具自动下载。
<pre><code>2.2.1 打开终端

2.2.2 执行命令安装cordova：
sudo npm install -g cordova

2.2.3 执行命令安装插件管理器：
sudo npm install -g plugman

注释：
sudo OS X和Linux上的命令，可以被安装在权限受限的目录中(windows平台上去掉sudo即可)
-g 标志是告诉 npm 我们全局安装 cordova；
为避免安装时出现权限相关问题，也可先启用超级用户，命令：sudo -s ，这样就可直接通过 npm install -g cordova进行安装。
</code></pre>
2.3 cordova环境验证 
打开终端，输入以下命令，检查cordova环境版本，如下图： 
<img src="https://upload-images.jianshu.io/upload_images/10170988-9608c4bca80af5bd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
更多环境配置信息，请参考官网： 
https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html 
https://cordova.apache.org/docs/en/latest/guide/cli/index.html
<pre><code>plugman工具用于管理插件，如查看插件列表、新增插件、删除插件、添加到指定平台等。

plugman create --name ....
cordova plugin remove....
cordova plugin list
plugman platform add --platform_name android
</code></pre>
<h2 id="创建cordova项目">创建Cordova项目</h2>
接下来，我们使用Cordova开始搭建一个Cordova项目
<ol>
<li>新建准备存放Cordova项目的目录，我的本地目录名：TestCordova</li>
<li>打开终端，进入TestCordova目录</li>
<li>输入创建项目的命令：</li>
</ol>
<pre><code>cordova create myapp com.qxc.app MyApp

-- myapp 目录名称
-- com.qxc.app 包名/工程id
-- MyApp 项目名称
</code></pre>
项目创建成功，如下图： 
<img src="https://upload-images.jianshu.io/upload_images/10170988-d28d5255fa058628.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"> 
4. 添加Android平台 
通过上图，我们可以看到平台目录中（plantforms）是空的，因为我们还没有添加任何平台。 
输入进入项目目录命令：
<pre><code>cd myapp
</code></pre>
输入添加android平台命令：
<pre><code>cordova platform add android --save

-- ios平台类似：cordova platform add ios --save
</code></pre>
<img src="https://upload-images.jianshu.io/upload_images/10170988-c30d287b446ffc21.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"> 
添加Android平台成功后，项目目录如下图： 
<img src="https://upload-images.jianshu.io/upload_images/10170988-16f252387829d117.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
至此，项目创建完成。 
安卓端开发，使用/platforms/android目录； 
IOS端开发，使用/plantforms/ios目录；（当前示例demo没有添加） 
H5端开发，使用www目录；
具体安卓与H5端如何通信，我们后续再介绍。
<h2 id="测试android项目">测试Android项目</h2>
<ol>
<li>启动AndroidStudio，打开项目/platforms/android。</li>
<li>根据本地Gradle版本（我的是3.3和3.5），修改项目的Gradle。 
打开项目的/gradle/wrapper/gradle-wrapper.properties文件，修改gradle版本： 
<img src="https://upload-images.jianshu.io/upload_images/10170988-cf54caee196b013a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
<li>编译项目（如果编译有问题，一般是Gradle版本的问题，请根据本地gradle进行调整）</li>
<li>运行到手机 
<img src="https://upload-images.jianshu.io/upload_images/10170988-d9678186d442d988.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
</ol>
<hr>
Android H5混合开发（1）：构建Cordova 项目 
https://www.cnblogs.com/qixingchao/p/11654454.html
Android H5混合开发（2）：自定义Cordova插件 
https://www.cnblogs.com/qixingchao/p/11652418.html
Android H5混合开发（3）：原生Android项目里嵌入Cordova 
https://www.cnblogs.com/qixingchao/p/11652424.html
Android H5混合开发（4）：构建Cordova Jar包 
https://www.cnblogs.com/qixingchao/p/11652431.html
Android H5混合开发（5）：封装Cordova View, 让Fragment、弹框、Activity自由使用Cordova 
https://www.cnblogs.com/qixingchao/p/11652438.html 
来源：https://www.cnblogs.com/qixingchao/p/11654454.html

頁: [1]

琼殿技术论坛's Archiver

Android H5混合开发（1）：构建Cordova 项目