2015-03-06 14:22:20 yangshiman 阅读数 720
  • Cordova+React+OnsenUI+Redux新闻App开发实战教程

    Cordova+React+OnsenUI+Redux新闻App开发实战视频培训课程以真实的案例讲解Cordova开发的流程设计,React+Redux的架构理念设计新闻App的数据流管理,整体的技术栈包括混合应用技术架构、cordova平台实战(视频教程)、webpack的实战、redux+middleware数据流管理、onsenui的整合应用,针对ios + android平台程序混淆压缩编译并打包终的产品。

    1750 人正在学习 去看看 姜博

apache cordova 开发环境搭建

由于本人第一次写博客,会存在许多的书写问题,请大家多多谅解
        APP开发现在火得一塌糊涂,许多公司需要引进相关的技术人员,即android,IOS等开发人员,分别用各自的技术来现实相同的业务逻辑.PhoneGap cordova的出现让我眼前一亮,可以利用他来进行通用的开发,其实原理就是:手机浏览器对于html5的支持!PhoneGap cordova提供了调用本地操作的一些接口.PhoneGap cordova现已经归为apache组织;所以现在的名字为apache cordova.下面直入主题!
直入主题吧!
注意:本人执行以下操作使用的是jdk1.8;android sdk含有android-21;
  首先我们要确保jdk和android的环境变量配制正确
 
    第一步:安装ant  
           到官方主页http://ant.apache.org下载新版
           安装过程可参考http://www.cnblogs.com/yuzhongwusan/archive/2013/03/26/2982411.html
 配制ant的环境变量


查看是否安装成功

 

  第二步:安装node.js
           下载地址:http://nodejs.org/ 
           安装过程可参考http://www.jb51.net/article/33086.htm
         
查看是否安装成功

 第三步:安装cordova:npm install -g cordova

查看cordova版本确认是否安装成功
 
第四步:创建存放引用库模板的目录第五步:创建demo "cordova create HelloWork com.hell hellwork"
进入HelloWork目录第六步:下载模板 "cordova platform add android"第六步:编译模板:"cordova build"
 


第七步:向eclipse导入


运行:hellwork 工程,运行结果


这就是一个纯的html5 demo.但是此时不能更改www文件夹下的内容.

第八步:删除引用,结果如下



更改\assets\www\index.html文件再试一下

是改变了,但是确是乱码




开发时一定要注意编码为"utf-8",再次运行


OK 到此开发环境搭建完毕!


第九步:完善一下IDE

在我们用eclipse开发html时发现与记事本没有什么区别,那我们下载一个插件aptana,官网地址:http://www.aptana.com/



html 开发移动端是为我们带来了很大的方便,但是它的运行性能确比原生的速度差得多!



2018-10-17 19:29:50 qq_40963664 阅读数 439
  • Cordova+React+OnsenUI+Redux新闻App开发实战教程

    Cordova+React+OnsenUI+Redux新闻App开发实战视频培训课程以真实的案例讲解Cordova开发的流程设计,React+Redux的架构理念设计新闻App的数据流管理,整体的技术栈包括混合应用技术架构、cordova平台实战(视频教程)、webpack的实战、redux+middleware数据流管理、onsenui的整合应用,针对ios + android平台程序混淆压缩编译并打包终的产品。

    1750 人正在学习 去看看 姜博

简介

cordova可以帮我们将一个webApp打包成安卓apk和ios的App,本文详细描述了cordova的环境搭建以及打包vue项目的webapp成手机端的App的详细过程,打包的app分为debug版本的调试版以及能上线的release版本,其中都会做详细介绍,文章中会也会描述整个环节遇到的坑以及解决办法。

cordova环境搭建

安装node以及全局安装cordova,node安装自行百度,安装完node在命令行执行 sudo npm install -g cordova 然后创建cordova项目,命令行输入 cordova create hello com.example.hello HelloWorld hello指的是创建的文件夹名称,cordova项目的文件夹名称 com.example.hello指的是做的app的id HelloWorld是App的名字 现在cordova项目已经搭建完毕

安卓环境配置

打包安卓app需要配置java的环境变量和Android Stuido,Android Studio集成了安卓开发的SDK什么的,下载完就可以了,java和android Studio下载完成之后还要下载Gradle(一个构建工具)JAVA传送门 Android Studio Gradle其中下载gradle有一个坑,gradle支持mac的两个包管理工具下载,Homebrew和MacPorts,这两个安装一个就可以了,我选的是MacPorts,但是在安装的时候卡住,网上也又很多安装的时候卡住的问题,网上试了很多方法都不可以,最后我是命令行强制重启了mac,然后在重新安装之后才安好了,homebrew我没试,建议用homebrew下载; 友情提示:网络最好能翻墙

ios环境配置

首先需要去App Store下载Xcode, 下载完成后在命令行执行 xcode-select --install 然后执行 sudo npm install -g ios-sim sudo npm install -g ios-deploy 最后还要安装CocoaPods,执行 sudo gem install cocoapods 下载完成后ios环境应该就可以了;

vue项目改动

vue项目要在index.html里引入cordova.js图片描述 修改config中的index.js里的文件 修改build中

assetsSubDirectory: 'static',
assetsPublicPath: '/',

assetsSubDirectory: '',
assetsPublicPath: '',

然后运行项目看看能不能起来,如果起得来就

npm run build

打包vue项目,将打包好的dist目录里的文件全部拷贝到cordova项目中www文件夹,将www文件夹的内容全部替换 然后命令行

cd hello

进入文件夹

 cordova platform add ios --save
 cordova platform add android --save

分别对应ios和android 此时可以执行

cordova requirements

查看环境是否安装完全,如果又报错,按照提醒下载就行了 打包安卓debug版本

cordova build android

打包成功会显示打包的apk路径,apk名字叫app-debug.apk可以安装在安卓手机上运行 ios打包完成需要在xcode里运行,然后在模拟器看效果

安卓release版本打包

Android app 的打包流程大致分为 build , sign , align 三部分。 sign是为 APK 签名。不管是哪一种 APK 都必须经过数字签名后才能安装到设备上,签名需要对应(keystore),大部分情况下APK都采用的自签名证书,就是自己生成证书然后给应用签名。

align是压缩和优化的步骤,优化后会减少 app 运行时的内存开销。

首先,我们生成一个 release APK 。这点在 cordova build 命令后加一个 --release 参数局可以。如果成功,你可以在 release 目录下看到一个 android-release-unsigned.apk 文件。

cordova build android --release

Sign

我们需要先生成一个数字签名文件(keystore)。这个文件只需要生成一次。以后每次 sign 都用它。

keytool -genkey -v -keystore release-key.keystore -alias cordova-demo -keyalg RSA -keysize 2048 -validity 10000

Keytool 是用于管理密钥和证书的工具,使用户和管理员能管理自己的公 / 私钥对以及相关的证书。 -genkey:用于生成公 / 私密钥对 -v:详细输出 -keystore:秘钥库名称 -alias:要处理的条目的别名 -keyalg:秘钥算法名称 -keysize:秘钥长度 -validity:有效天数 执行后会要求设置 keystore 的密码和 key 的密码,要记得!完成后会在根目录有一个release-key.keystore的文件 然后对我们的android-release-unsigned.apk文件进行签名 首先我们要把要签名的android-release-unsigned.apk移动到和release-key.keystore同一个目录下

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore release-key.keystore android-release-unsigned.apk cordova-demo

这个命令中需要传入证书名 release-key.keystore ,要签名的 APK android-release-unsigned.apk ,和别名 cordova-demo 。签名过程中需要先后输入 keystore 和 key 的密码。命令运行完后,这个 APK 就已经改变了。注意这个过程没有生成新文件。

-verbose: 签名/验证时输出详细信息 -sigalg:签名算法的名称 -digestalg:摘要算法的名称 -keystore:秘钥库位置

最后我们要用 zipalign 压缩和优化 APK 找到zipalign.exe的所在目录,一般在资源/Android/SDK/build-tools/20.7.03/ 在这个文件夹下打开终端,将签名完的apk移到这里,然后执行,不移动apk需要填写正确路径

./zipalign -v 4 android-release-unsigned.apk cordova-demo.apk

这一步会生成最终的 APK,我们把它命名为 cordova-demo.apk 。它就是可以直接上传到应用商店的版本。

2014-05-11 15:12:03 jsntghf 阅读数 20
  • Cordova+React+OnsenUI+Redux新闻App开发实战教程

    Cordova+React+OnsenUI+Redux新闻App开发实战视频培训课程以真实的案例讲解Cordova开发的流程设计,React+Redux的架构理念设计新闻App的数据流管理,整体的技术栈包括混合应用技术架构、cordova平台实战(视频教程)、webpack的实战、redux+middleware数据流管理、onsenui的整合应用,针对ios + android平台程序混淆压缩编译并打包终的产品。

    1750 人正在学习 去看看 姜博

本文使用的环境是Mac OSX 10.9、Node 0.10.28、Cordova 3.4.1

 

1、安装Node.js

参考:Node.js的安装

安装成功后,就可以使用node和npm命令了。

 

2、安装Cordova

$ sudo npm install -g cordova

 

3、配置Cordova环境变量

$ vim .bash_profile
export PATH=/usr/local/lib/node_modules/cordova/bin:$PATH
$ source .bash_profile

 

4、查看Cordova版本信息

$ cordova -v
3.4.1-0.1.0

 

如果需要更新Cordova版本,执行以下命令:

$ sudo npm update cordova -g

  

至此,Cordova环境已经搭建完成。

 

接下来,创建一个基于Cordova的应用程序。

 

1、新建一个目录,并进入该目录

$ mkdir CordovaApp
$ cd CordovaApp

 

2、创建一个Cordova工程

$ cordova create hello com.eric.hello HelloWorld

 

3、进入工程目录

$ cd hello

 

4、添加平台支持

$ cordova platform add ios
$ cordova platform add android

 

如果没有安装并配置android SDK,执行此命令会报Error: The command "android" failed的错误,安装好android SDK,并正确配置环境变量后再执行即可。

$ vim .bash_profile
export PATH=/Library/adt-bundle-mac-x86_64-20140321/sdk/platform-tools:$PATH
export PATH=/Library/adt-bundle-mac-x86_64-20140321/sdk/tools:$PATH
$ source .bash_profile

 

如果没有安装并配置ant,执行此命令会报Error: The command "ant" failed的错误,去Ant官网下载并解压到/usr/local目录下,并正确配置环境变量后再执行即可。

$ vim .bash_profile
export PATH=/usr/local/apache-ant-1.9.4/bin:$PATH
$ source .bash_profile

 

5、检查当前设置的平台

$ cordova platforms ls

 

6、编译应用程序

$ cordova build

 

7、在模拟器中运行应用程序

$ cordova emulate android
$ cordova emulate ios

 

如果没有安装ios-sim,执行此命令会报Error: ios-sim was not found,执行以下命令安装ios-sim后再执行即可。

$ sudo npm install -g ios-sim

 

2015-05-21 09:56:12 yuxiang88679 阅读数 714
  • Cordova+React+OnsenUI+Redux新闻App开发实战教程

    Cordova+React+OnsenUI+Redux新闻App开发实战视频培训课程以真实的案例讲解Cordova开发的流程设计,React+Redux的架构理念设计新闻App的数据流管理,整体的技术栈包括混合应用技术架构、cordova平台实战(视频教程)、webpack的实战、redux+middleware数据流管理、onsenui的整合应用,针对ios + android平台程序混淆压缩编译并打包终的产品。

    1750 人正在学习 去看看 姜博

在Html5如火如荼发展的今天,使用Html5移动开发框架开发出跨平台的App是目前最节约成本的开发方式,不需要针对每一套移动系统(Android/IOS)做原生开发。而最早致力于Html5移动的开发框架莫过于PhoneGap,但是之后被捐献给Apache更名为Cordova。
我是使用cordova命令创建好项目之后使用Eclipse(adt-bundle-windows-x86-20140321)去导入项目,进行开发和打包的。Mac下IOS开发我也使用相同的方式,用XCode打开项目进行进一步开发。欢迎读者告知更好的方法,或者交流使用心得。

在Windows下开发Android的Cordova环境搭建

在Windows下开发Android的Cordova环境搭建需要注意一下几点:
  1. 下载cordova-android-xxx.tgz
    下载到tgz包以后解压出来是一个名为package的目录。后面讲解怎么使用。其实从这一步可以看出我没有使用CLI(Command-Line Interface)命令行方式搭建环境,有兴趣可以参照官方文档自己尝试。
    http://cordova.apache.org/docs/en/5.0.0/guide_cli_index.md.html

  2. JDK安装并配置环境变量
    这一点大多数java开发者都已经配置过,需要注意的是 Cordova5.0 Document建议使用JDK7及以上版本)

  3. ADT安装并配置环境变量(非Android Studio)
    Android开发人员肯定都是安装过ADT的,但是需要注意的是需要将%AndroidHome%/adt-bundle/sdk/platform-tools;和%AndroidHome%/adt-bundle/sdk/tools这两个目录添加到环境变量Path上,以便在使用Cordova命令在cmd上创建项目时使用。

  4. Ant安装并配置环境变量
    其实ADT的Eclipse下已经有了Ant的插件,我的目录是D:\Program Files\adt-bundle-windows-x86-20140321\eclipse\plugins\org.apache.ant_1.8.4.v201303080030\bin 把这个目录添加到环境变量Path中即可,如果没有的可以自行下载添加bin目录。这个也是以便在使用Cordova命令在cmd上创建项目时使用。

这样环境搭好之后,打开CMD,cd到1步骤里提到的packge目录下的bin目录。使用create.bat %path%\hello com.example.hello HelloWorld 命令即可在%path%路径下创建出hello工程目录。然后用Eclipse导入即可。
这样导进去是会报错的,因为没有对应版本的cordova.jar,在此提醒一下自从2.3.0版本后,cordova项目就没有直接提供jar包下载了,只在官网上提供了源码地址http://cordova.apache.org/#download。需要自行编译项目,才可以获取到jar包。怎么自行打包这个写在下一篇博客里面。

在Mac开发IOS的Cordova环境搭建

在mac下不像Windows那么复杂只需要下载对应包即可
1. 下载cordova-ios-xxx.tgz

解压出来之后在终端cd到packge目录下的bin 使用$create hello com.example.hello “HelloWorld”命令即可在当前路径下创建出hello工程目录,当然你可以更改这个路径 最后一个参数HelloWorld是APP的名称 在此不建议使用中文字符,否则Xcode打开会报错,至少我遇到是这样子的。可以在XCode打开之后更改。

好了 这样子基本上就把环境搭建的事情说完了,欢迎交流!

2015-01-26 17:01:09 pengGeiii 阅读数 776
  • Cordova+React+OnsenUI+Redux新闻App开发实战教程

    Cordova+React+OnsenUI+Redux新闻App开发实战视频培训课程以真实的案例讲解Cordova开发的流程设计,React+Redux的架构理念设计新闻App的数据流管理,整体的技术栈包括混合应用技术架构、cordova平台实战(视频教程)、webpack的实战、redux+middleware数据流管理、onsenui的整合应用,针对ios + android平台程序混淆压缩编译并打包终的产品。

    1750 人正在学习 去看看 姜博

1.在cordova官网下载对应的Mac Os版本

2.运行终端窗口

3.输入命令sudo

4.解压下载cordova里面的cordovca-ios文件

5.将解压的文件放在自定义的目录

4.使用命令 cordova-ios所在的目录下的/bin/create创建项目的路径 包名 项目名称

比如我下载的cordova-ios放在当前用户的根目录下

则使用创建项目命令(./cordova-ios/bin/create ./Work/xxx com.xxx.xxx xxx)

打开xCode 导入项目即可运行

没有更多推荐了,返回首页