cordova app 从环境配置到安卓苹果双端上线 全过程(上)

开篇简言

我是一名前端工程师,刚刚完成了一个基于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上线 。。

---------------------文章太长了,请看 (下)篇。--------------------

推荐阅读更多精彩内容