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上线 。。

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,471评论 25 707
  • Ionic环境配置及android打包环境搭建步骤: 1、安装node.js 这是为了使用npm来安装ant,co...
    丶温瞳阅读 2,283评论 0 4
  • 01 游戏是现实世界的隐喻,潜藏着我们不曾在意的生活真相。 厌恶游戏,认为玩游戏浪费时间的人,听到这样的话,自然嗤...
    2H青年阅读 810评论 6 13
  • 嗯,我才不考研,读那么多年书还不够么→_→我以后去国家电网,又清闲,而且兴趣爱好一个都不要放弃。 →_→啊,我要考...
    暴躁空想家阅读 224评论 2 0
  • 由于网上看到一篇有关口腔溃疡引起的病变报道,傻缺的用手指在嘴里面摸了圈,居然在舌头根部摸到一个突起,顿时感觉整个人...
    梦幻之我阅读 283评论 0 0