开篇简言
我是一名前端工程师，刚刚完成了一个基于cordova的webapp，并且安卓和苹果双端都已上线，趁热写个总结分享给大家。（也是刚开始成长的小白，可能写的不好，大家多多包涵O(∩_∩)O ~）
大致过程
我是先在windows上完成的项目代码，然后打包安卓端的apk包并且上传到各大应用市场（360、应用宝等），然后把项目代码移植到mac本上，来打包ios端的ipa包并且上传到app store的。
背景介绍
Cordova是什么？百度词条中的定义：Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。Cordova还提供了一组统一的JavaScript类库，以及为这些类库所用的设备相关的原生后台代码。Cordova支持如下移动操作系统：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。
简单点理解，Cordova是一个工具，通过它可以将你做的html网页显示在WebView里面，而你网页中用到的JS可以通过他的API去调用原生的东西，比如照相机等。但它做出来的app比原生做出来的app好在哪里呢？直白点说，简便，省钱。因为cordova app显示的页面全是你做的html页面，所以说你写一套code，就可以用在Android上，IOS上，以及Web上。不用去分别找Android工程师，IOS工程师。
环境搭建
1. 安装node.js （Node.js是一个Javascript运行环境……）
下载安装node.js,下载地址：https://nodejs.org/en/，安装完成之后打开终端执行node -v，如果看到版本号表示安装成功。
查看node版本号
2. 安装ant （Ant是一种基于Java的build工具……）
下载地址：http://ant.apache.org/bindownload.cgi，下载完成之后解压到你想安装的目录，比如D:\ant。然后将目录添加到系统变量里（添加环境变量的步骤：右键我的电脑属性高级系统设置环境变量系统变量中添加ANT_HOME,值为D:\ant，在系统环境变量中的变量path中添加D:\ant\bin）。配置好之后在终端输入ant -v，看到版本号则表示成功。
查看ant 版本号
Ps：如果是windows7系统，在添加path的值时，多个值之间要用分号隔开。
3. 安装cordova
命令行输入 npm install –g cordova
npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等），但是因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，解决：用淘宝团队提供的国内的cnpm，执行命令npm install cnpm -g --registry=https://registry.npm.taobao.org，安装完后查看其版本号执行命令cnpm –v ，如果出现版本号则安装成功，我们就可以用cnpm安装我们所需要的东西了，比如 我们上面执行的 cnpm install –g cordova 。关于npm 和cnpm的详细讲解，可以参考这篇博客。
测试安装是否成功，终端输入cordova -v，如果出现版本号表示安装成功。
查看cordova版本号
4. 安装jdk
下载地址：http://www.oracle.com/technetwork/java/javase/downloads/index.html ，选择自己的版本点击下载。下载下来后，按照提示安装，安装位置比如D:\java\jdk1.8.0_131，然后进行环境变量的配置即可。（添加环境变量的步骤：右键我的电脑属性高级系统设置环境变量系统变量中添加JAVA_HOME,值为D:\java\jdk1.8.0_131，在系统环境变量中的变量path中添加%JAVA_HOME%\ bin）。
5. 安装sdk
下载地址：http://tools.android-studio.org/index.php/sdk/ ，建议大家下载.zip文件不要下载.exe文件。反正我下载.exe文件就装不上。下载下来.zip文件后解压缩，按照提示安装，然后根据安装的位置进行环境变量的配置。（添加环境变量的步骤：右键我的电脑属性高级系统设置环境变量系统变量中添加ANDROID_SDK_HOME,值为D:\android\android-sdk-windows，在系统环境变量中的变量path中添加%ANDROID_SDK_HOME%\platform-tools和%ANDROID_SDK_HOME%\ tools）。
下载sdk
走到现在，开发所需的环境配置过程已经基本完成了！！
创建第一个应用
创建基于cordova平台的hybrid app，有下面几种情况：
1. 原生cordova app（可以配合自己公司开发的框架）
2. 采用ionic框架（个人理解ionic=angular+cordova）
3. 采用vue、react等其他框架，我还没有研究过。下面只介绍前两种。
===1 . 原生cordova app===
a） 在某个目录下创建cordova项目（cordova create <文件夹名> <包名> < app 名>）。
命令行输入 cordova create test com.cordova.test test
创建cordova项目
创建成功后，打开文件目录如下：
新建的cordova项目目录
hooks：存放自定义cordova命令的脚本文件。
platforms：平台目录，各自的平台代码就放在这里，可以放一下平台专属的代码，现在这个目录应该是空的，后面会介绍如何创建平台。
plugins：插件目录，安装的插件会放在这里。后面会介绍如何安装插件。
www：最重要的目录，存放项目的HTML5和JS代码的目录。app一开始打开的就是这个目录中index.html文件，也就是项目的入口文件。
config.xml：主要是cordova的一些配置，比如：项目使用了哪些插件、应用图标icon和启动页面SplashScreen，修改app的版本，名字等信息，还有平台的配置。
package.json：一个JSON对象，该对象的每一个成员就是当前项目的一项设置。比如name就是项目名称，version是版本（遵守“大版本.次要版本.小版本”的格式）。
b） 添加平台
进入到刚刚创建的项目文件目录下，命令行输入：
cd test （退出当前目录输入: cd .. ）
cordova platform add android（添加安卓平台）
cordova platform add ios（这句添加苹果平台需要在mac上执行。如果该项目需要在苹果端上线，后面会讲到代码移植到mac本上打包ios包的步骤。再次先忽略）
没有报错的话就是添加成功了，此时打开项目文件夹里的platforms文件里面有android文件夹了。
执行命令 cordova platform add android
如果要移除该平台，命令是：cordova platform rm android
到这里我们就把准备工作都做好了，现在可以开始写js 和html代码了。
c）添加和删除项目需要的codova插件
# 添加插件 #
命令行输入：cordova plugin add cordova-plugin-camera (cordova plugin add <插件官方名称>)，如下则证明添加成功。
添加插件成功
如果报错则可以尝试：移除android平台，再重新添加低版本的android平台（命令行输入cordova platform add android@6 安装6.多版本的android，因为现在添加android平台系统默认添加最新的 7.多版本的，但是有些cordova插件可能还不能兼容。）
去cordova官网找插件：http://cordova.apache.org/
也可以去github上找插件：https://github.com/
# 删除插件 #
命令行输入：cordova plugin rm cordova-plugin-camera （使用rm和remove都可以）
删除插件成功
# 查看已经添加了的插件列表 #
命令行输入：cordova plugin list（查看当前安装了那些插件）
也可以直接打开项目文件夹下的plugins文件夹查看（android.json和fetch.json都应该存在）
plugins插件文件夹
d）编译调试程序
下面的不是每一句代码都需要运行，根据自己的需求进行选择。
cordova install android //将编译好的应用程序安装到模拟器上。
cordova emulate android //在模拟器上运行（前提是创建好AVD）
cordova serve //在浏览器运行
cordova build android //打包cordova项目到android平台。
cordova run android //通过USB直接安装到真机（该语句已经包括了build命令，如果你手机电脑连接好，并且打开了手机里的usb调试模式，就可以这样直接run）
最后出现BUILD SUCCESSFUL 则成功。
build打包成功
执行完后到上图中最后一行那个路径中去找我们的apk包，这个apk包就是我们打出来的app的debug模式也就是开发环境下的包，放到手机上就能运行了。但是正式上线到应用市场的包不能这样打，后面讲。第一次run/build时间会比较长。最后出现BUILD SUCCESSFUL 则说明成功。
到这里我们大致完成了android端的开发。
Ps：我们现在打开项目文件发现目录中多了个node_modules文件夹，这里面是我们项目所用到的依赖包，是系统根据package.json中的配置对应生成的。如果我们去下载别人的开发好的项目代码时，下载下来后第一件事就是执行npm install 来安装package.json中的配置和依赖，生成node_modules文件。然后再cordova platform add android添加平台。
下面说一下我们在www文件里写代码时可能需要用到的一些知识：
1. 使用less 写样式文件：（我用的编辑器是webstorm）
1. 命令行输入：npm install –g less
2. 找到C:\Users\用户名\AppData\Roaming\npm\lessc.cmd，打开webstorm > file > settings
在webstorm中配置less（1）
3.点击 “+”，在下拉菜单中选择less，然后把刚刚的那个路径填到下图中的红框中。ok完成。接下来我们在创建less文件时，就会自动生成一个css文件跟随。
在webstorm中配置less（2）
2. 移动端设备大小适配问题rem转px
在www/js中引入rem.js 或者flexible.js （网上有），但我用的自己写的一段代码，效果一样的，只是逻辑上不太一致。我的方法如下：
新建rem.js,引入到www下的index.html这个入口文件中，然后写入以下代码：
!function(n){
var e=n.document,t=e.documentElement,i=720,d=i/100,
o="orientationchange"inn?"orientationchange":"resize",
a=function(){
varn=t.clientWidth||320;n>720&&(n=720);
t.style.fontSize=n/d+"px"
};
e.addEventListener&& (n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);
这段代码的逻辑是：美工给的图一般是720px宽的，（如果你的美工给的不是720可以修改上面的代码中的720改成你的），在开发的过程中，执行cordova serve运行在chrome浏览器后，F12 > 手机模式 > 设备宽度设置成responsive 720宽，在此界面下进行开发调试，如果美工图上100px的元素，我们在写less/css时，该元素div的宽就写1rem，即1rem=100px。
===2 . 选用ionic框架做hybrid app===
刚刚讲了cordova 原生app的步骤，下面简单讲一下选用ionic框架的做法。命令行基本一致。
Ionic的一系列命令：（类似corodva原生app）
1.npm安装ionic：npm install –g cordova ionic
2.创建项目：ionic start myproject –type=ionic1（myproject是项目名，后面—type=ionic1是明确创建哪个版本用的的，不写的话默认是目前最新的3版本）
创建成功，项目文件目录如图：
刚创建的ionic项目目录
3. 类似上面讲到的一系列命令
cd myproject
ionic cordova platform add android
ionic serve // 浏览器调试
ionic cordova build android
ionic cordova emulate android // 模拟器运行ionic cordova run android // 连接上手机运行，等同于build+emulate
4.安装插件 命令行输入：ionic plugin add cordova-plugin-shake（插件名）
ionic结合cordova 调用一些原生的api 如摄像头等，需要引入ng-cordova，具体参考：这篇文章
项目上线
项目源代码写完后，那么该上线了。下面分别讲一下 上线到安卓各大应用市场。（360手机助手、应用宝等等） 和上线到苹果的app store的步骤！
android 端上线 ==> 以360手机助手为例。
1. 将应用打包 命令行输入：cordova build –release android
这次的打包不同于用上面讲到的用cordova build android 打出来的包，那个是debug的包，是调试版，是自动签名的。（这里解释一下“签名”：能在手机上运行的apk都是经过签名的，没有签名的apk是跑不起来的，debug包也是系统自动签的名，是用debugkeystore签过名的，但它不是正式的我们应用唯一的签名，所以我们需要给我们应用唯一的签名，所以我们在这步打包时打不签名的包，如上命令 加 –release，方便下一步签app专属的名）。
2. 生成签名文件 （首先找到jdk安装的位置（如我的D:\java\jdk1.8.0_131），命令行进入到jdk文件下的bin目录下，在命令行顺序输入如下几条命令，创建test.keystore）
（1）命令行输入：cd D:\java\jdk1.8.0_131\bin
（2）命令行输入：keytool -genkey -alias test.keystore -keyalg RSA -validity 40000 -keystore test.keystore （参数说明：-genkey 生成文件 -alias 别名 -keyalg 加密算法 -validity 有效期 -keystore 文件名 ）
（3）然后按照提示设置keystore密码以及你的信息，接下来不报错的话就代表已经生成了test.keystore文件，在jdk的bin目录下。
3. 到360移动开放平台http://dev.360.cn/ 上注册账号。
4. 签名，加固。
下载360加固助手，下载地址，里面有使用手册，按照提示操作，完成里面信息的填写。重要的：里面需要填写签名文件路径，那么就填写上面步骤2中最后生成的签名文件路径，这样我们就配置好了。接下来就是把步骤1生成的未被自动签名的release包放进来，上传、签名、加固。然后最后生成的apk包就是我们可以上传到360应用市场的包了。
5. 进入360开发平台 。
登录 > 管理中心 > 填写一系列的app信息和公司信息，填写完整点击提交审核，一个工作日内就得到结果了。一般审核都能通过，如果没通过会提示给你原因，按照他说的修改在提交就行，或者直接给他们的客服邮箱发邮件沟通即可。总之android应用市场很好通过，不像苹果app store那么严(shi)谨(er)。哈哈哈~
ios上线 。。
---------------------文章太长了，请看 （下）篇。--------------------
网友评论