‘壹’ 如何配置android studio环境实现ionic的编译,运行与打包
1.配置android studio 环境;
1.1配置java环境
下载jdk,jre(jre好像是跟jdk一起的,jdk1.8.0_101,jre1.8.0_101)
参考文档:如何配置jdk,jre的参考文档
配置的环境变量:PATH(jre/bin以及bin目录),ClASSPATH(lib以及lib/tools.jar目录),JAVA_HOME(jdk的安装目录)
测试配置java变量是否成功的方法是:在dos命令行输入:java -v,以及javac
1.2配置ant环境(同样需要配置环境变量)
下载地址:ant下载地址
配置环境变量:系统变量PATH(ant的bin目录环境);
测试ant安装是否成功:在dos命令行输入ant -v 如果显示ant版本说明安装成功。
1.3下载Android studio(目前安装的是2.2版本的android studio;)
下载地址:android studio 下载地址
配置环境变量:系统变量:ANDEOID_HOME(SDK 目录),PATH(SDK的tools以及platform-tools目录);
测试android studio是否安装成功:dos命令行输入android -h,输出option相关信息表示成功!
备注:Path:配置包或者二进制文件夹的路径;
ClassPath:配置的是类的路径;
‘贰’ 非原生App开发的基本步骤(以安卓端为例)
主要使用:
移动端:ionic、cordova
后端:CoreThink
一、安装
1.安装node.js
2.安装git
3.安装ionic & cordova:
命令行输入:npminstall –g cordova ionic
注:-g表示全局安装,也可以进入指定的目录安装,但这里推荐全局安装,安装后的目录为C:/users/Administrator/AppData/Roaming/npm/node_moles
4.安装Java JDK
5.安装Apache Ant
6.安装Android SDK(从这里开始后面基本以android为例,ios类似)
7.设置环境变量:
①打开计算机->系统属性->高级系统设置->环境变量
②在系统变量中新建ANDROID_HOME变量,变量值为sdk所在目录,如图
③新建CLASSPATH变量,变量值为.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
④新建JAVA_HOME变量,变量值为jdk所在目录
⑤编辑系统变量中的path变量,不要删原来的变量值,在原值后面添加;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;%ANDROID_HOME%\tools;%ANDROID_HOME%\build-tools;%ANDROID_HOME%\platform-tools
注:这里是添加了jdk\bin、jdk\jre\bin、sdk\tools、sdk\build-tools、sdk\platform-tools的路径,互相以英文分号隔开
8.创建项目:
命令行cd进入任何你喜欢的目录,ionic startAnyNameYouLikeblank,如果一切顺利,就会在你指定的目录新建一个你喜欢的名字的文件夹,并在里面初始化一个ionic项目。
9.添加平台
进入刚才新建的项目的目录,命令行输入ionic platform add android
二、在项目目录中有一个www的文件夹,里面的文件有html,js,css等,可随意编写,在platform中的www文件最好不要动它。
三、测试项目
1.进入项目目录,ionic build android编译项目
2.测试项目的方法:
桌面浏览器测试法:ionic serve
模拟器测试法:这个比较烦,而且运行慢,破机子卡到爆,一直没成功,所以略
手机浏览测试法: http://ionicframework.com/docs/guide/testing.html 自己看吧,略
手机测试法:连上数据线,打开开发者选项,执行ionic run android
四、编写项目
http://ionicframework.com/docs/guide/building.html 英文太多,翻译不出来
五、发布app,前面的准备就是为了这一步了
1.执行cordova plugin rm cordova-plugin-console,这一步是Before we deploy, we should take care to adjust plugins needed ring development that should not be in proction mode.
2.执行cordova build --release android,在platforms/android/build/outputs/apk,中会出现***-release-unsigned.apk,最前面取决于取了什么名字
3.使用keytool打包私有密钥:执行keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
4.给没有签名的apk签名:执行jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name
5.最后一步,执行zipalign -v 4 HelloWorld-release-unsigned.apk HelloWorld.apk
六、基本步骤到此结束,可能会出现各种报错的情况,只能具体问题具体分析了,
参考网址:
http://ionicframework.com/docs/guide/preface.html
https://cordova.apache.org/docs/en/latest/guide/cli/index.html#link-3
http://developer.android.com/sdk/installing/adding-packages.html
https://developer.apple.com/ios/download/
‘叁’ 怎么编译ionic demo的例子
没有。 ionic是一个用来开发混合手机应用的,开源的,免费的代码库。可以优化html、css和js的性能,构建高效的应用程序,而且还可以用于构建Sass和AngularJS的优化。ionic会是一个可以信赖的框架。
‘肆’ 如何开发Ionic插件
1. Cordova Plugin基础
1.1. 目录结构层次
IONIC下的插件都是遵循CORDOVA插件([BIBAPACHECORDOVA])规范,同时提供与CORDOVA类似的PLUGIN子命令来管理插件(IONIC PLUGIN XXX)。
下面是插件管理命令中的添加、删除及列举等基本使用方法:
$ ionic plugin list
cordova-plugin-camera 1.2.0 "Camera"
cordova-plugin-console 1.0.1 "Console"
cordova-plugin-device 1.0.1 "Device"
cordova-plugin-splashscreen 2.1.0 "Splashscreen"
cordova-plugin-statusbar 1.0.1 "StatusBar"
cordova-plugin-whitelist 1.0.0 "Whitelist"
ionic-plugin-keyboard 1.0.7 "Keyboard"
plugin-mydemo 1.0.0 "MyDemo"
添加(add)一个插件的时候,若指定的是本地的路径,则是将本地路径下的目录文件到plugins/下。若是插件名,则会自动连接到网上下载对应的插件。
由于插件是遵循Cordova插件规范,所以每个插件的代码目录层次结构都是高度类似的。每一个插件都是plugins/的一个子目录,Figure-1描述了插件共同的基本目录结构框架。
Figure 1. 插件的目录结构
从图中可以看出,插件框架中将不同平台的实现代码都放在各自不同的目录下(android/ios),通过ionic统一生成各自对应平台的应用程序。
为了方便管理plugins/下多个插件,通常在plugins/下会有一个总的管理文件,比如编译android平台的时候,会有一个android.json文件,里面放着当前插件的简单信息。
当用户使用ionic plugin add/remove命令来添加、删除插件的时候,android.json也会自动的把相应插件定义条目添加或者删除掉。
1.2. 插件工作原理分析
上一节我们已经清楚了一个插件的代码目录结构,那么一个插件是如何正确地在IONIC框架下运行的呢? 前台的HTML/JS代码又是如何与后面具体平台做数据交互的呢?
这个就需要对插件的工作原理及各个模块之间的流程关系有一个基本的了解[1]
为了让插件能够访问具体平台系统的代码,Cordova提供了对应的标准封装API来完成,下面的图简单地示意了Android平台情况下的封装过程:
Figure 2. 插件封装调用图
当用户ionic
build
android进行第一次编译的时候,会自动将插件下的Java文件到platform/android/目录下面,同时将JS也到platform/android/目录下,最终使用Android的编译工具(aapt/aidl/dx/apkbuilder等)生成.APK应用程序。
这里需要注意的是,插件中的Java文件默认下只会在第一次编译的时候自动放到platform/android/,之后即使用户修改了插件目录下面的Java文件,编译的时候仍然是使用platform/android/下的Java文件。
解决的方法可以是在编写自己插件调试的时候,在platform/android/下建立一个symbol link, 指向插件中的Java文件。
这样可以保证修改的Java文件会参加编译。
1.3. 数据的交互
从\REF{SECIONICPLUGINFLOW}节我们已经清楚JS和ANDROID平台之间分别通过JS的CORDOVA.EXEC()和JAVA的CORDOVAPLUGIN.EXECUTE()函数来对接。
这两个接口的参数对应关系如下所示:
由于JS发送到Java的数据已经作为函数的参数传入, 所以函数中的回调参数,主要是帮助Java侧反馈数据给JS侧所用。
Cordova使用了org.apache.cordova.PluginResult来完成,当中的PluginResult.Staus代表JS调用插件成功与否的状态。
通常代码中判断状态值是否为PluginResult.Staus.OK,来确认调用结果成果或者失败
2. 制作插件
实际工作中,我们往往需要自己编写满足自己项目需求的插件。这里将逐步介绍编写插件的步骤和注意事项。
2.1. PLUGMAN
也许IONIC的框架编写者觉得JS开发人员只要会怎么调用和删除插件就足够了。
所以默认下,ionic的plugin子命令,只是给JS开发者来add/remove编写好的插件。它并没有, 也不提供start/create等类似的生成插件代码框架的功能选项。
若我们需要自己编写自己的插件,则可以使用额外的一个叫做plugman的工具[2], 该工具可直接通过npm来安装。
安装成功后,就可以使用plugman命令来自动生成插件代码框架,避免手工建立和输入代码文件的工作:
$ sudo npm install -g plugman
$ plugman create --name plugin-myspeech --plugin_version 0.1 --plugin_id org.foo
$ cd plugin-myspeech
$ plugman platform add --platform_name android
上述命令将会生成一个plugin-myspeech的目录,同时会自动生成plugin.xml、src以及www目录。
当使用platform add添加完android支持后,对应的Android Java代码框架也会自动生成。
同理,plugman platform add --platform_name ios添加iOS支持后,和iOS相关的代码框架也自动生成。
2.2. 编写插件
这里介绍一个自己写的ANDROID平台下的简单PLUGIN,演示前台到后面具体平台实现的流程。
插件本身逻辑非常简单: 得到JS请求后,把当前手机的Android系统的版本信息,并发送回前端。
通过plugman命令生成基本插件代码框架:
$ plugman create --name MyDemo --plugin_version 0.1 --plugin_id org.ioniconline
$ cd MyDemo
$ plugman platform add --platform_name android
自动生成的代码框架中,定义了coolMethod方法,我们可以在Java代码中处理该请求
public class MyDemo extends CordovaPlugin {
public boolean execute() {
if (action.equals("coolMethod")) {
Log.e("MyDemo", "process the req");
String str = android.os.Build.VERSION.RELEASE;
PluginResult r = new PluginResult(PluginResult.Status.OK, str);
r.setKeepCallback(true);
callbackContext.sendPluginResult(r);
return true;
}
return false;
}
}
至此,一个插件的功能已经完成。
接下来我们在自己的ionic应用中添加该插件。用户可以指定自己刚刚编写的控件文件目录位置。该示例插件已经存放在github上,所以可以从github上直接添加:
$ ionic plugin add https://github.com/yangsongx/MyDemo
这样会在当前应用的plugins目录下生成org.ioniconline目录,里面放的就是前面编写的插件代码。
在需要调用Android接口的地方加上JS代码:
function getVersion() {
cordova.plugins.MyDemo.coolMethod('useless',
function(okData) {
alert(okData);
},
function(failData) {
alert(failData);
});
}
成功情况下,会弹出包含Android系统版本号数据的对话框。比如在我华为P7上返回的是4.4.2
Figure-\ref{figIOnicMyDemo}演示了整个代码在各个模块间的调用关系。完整的MyDemo的插件代码可以从github[3]上得到。
Figure 3. MyDemo插件逻辑流程
每个Plugin需要输出(export)的接口都需要使用mole.exports的命令来完成。
var myApis = {};
myApis.foo1 = function(a,b) {
cordova.exec(...);
};
myApis.foo2 = function(a,b,c) {
cordova.exec(...);
};
MODULE.EXPORTS = MYAPIS;
2.3. 注意事项
不要直接修改Plugin中的Java代码,这个代码不参与编译。
原因: 第一次编译目标应用时,ionic会将Plugin中的Java代码到platform/下编译。但下次再进行编译的时候不会在rJava代码,所以参加编译的实际上只是platform/下的Java代码。
plugin中的js可以直接修改,而且每次重新编译都参加编译。
原因: ionic下的JS是在Cordova上封装了一层,所以每次编译,需要将ionic下的JS转换成Cordova JS才能正确工作
使用exec()中的service参数必需和插件plugin.xml中的featur定义的一致,否则会有class not found错误
报method not found异常, 插件中的js脚本未正确地使用mole.exports声明
Further Reading
‘伍’ 如何配置android studio环境实现ionic的编译,运行与打包
1.1配置Java环境
下载jdk,jre(jre好像是跟jdk一起的,jdk1.8.0_101,jre1.8.0_101)
参考文档:如何配置jdk,jre的参考文档
配置的环境变量:PATH(jre/bin以及bin目录),ClASSPATH(lib以及lib/tools.jar目录),JAVA_HOME(jdk的安装目录)
测试配置java变量是否成功的方法是:在dos命令行输入:java -v,以及javac
1.2配置ant环境(同样需要配置环境变量)
下载地址:ant下载地址
配置环境变量:系统变量PATH(ant的bin目录环境);
测试ant安装是否成功:在dos命令行输入ant -v 如果显示ant版本说明安装成功。
1.3下载Android studio(目前安装的是2.2版本的android studio;)
下载地址:android studio 下载地址
‘陆’ 如何搭建Ionic环境以及打包成安卓apk
1.Ionic是什么?Ionic的生态系统基于Angular和Cordova,前者是web应用框架,后者是构建和打包原生应用的工具。Ionic是将HTML,CSS,JS,Angular,Cordova等技术进行整合,成为一个非常强大的移动端应用开发平台。
2.如何搭建环境?
如果你现在要使用Ionic来架构应用,你应用要有以下几个步骤。
1>安装node.js。可以访问[nodejs官网]()下载对应平台的安装包。如果你已经安装了node,请把它升级为最新版本。安装完成后,可以在OS X的终端后者windows的命令提示符中运行下面的代码来验证是否安装成功。
$ node -v1
如果出现版本号说明安装成功。(忽略$符号,以下同理)
2>安装Ionic和Cordova。使用一条命令就能安装Ionic和Cordova。执行之前请确保你已经安装了git:
$ npm install -g cordova ionic1
这条命令需要一点时间,请耐心等待。安装完成后,运行下面的命令来确认已经安装成功:
$ cordova -v
$ ionic -v 12
同样,这里出现版本号说明安装成功。注意:这里需要配置node的环境变量,如果你不清楚环境变量如何配置,网络一下啦!
3.是时候创建一个应用了。
Ionic提供了一个简单的start命令,几秒就可以创建一个新项目,在你想要创建项目的文件夹下运行如下代码就可以轻松创建:
$ ionic start demo
$ cd demo12
程序可能会问你是否创建一个Ionic账户,暂时可以无视它。ok创建成功后,你可以在你的文件下面看到demo文件夹,进入文件夹,你可以看到一串目录。这是Ionic的默认模板。
重点介绍以下www目录,这里进去我们可以看到css,js,lib,image,index,template等文件或者文件夹,这里前端人士应该很熟悉啦,这里就是你这个应用所有的前端代码,在这里面编写你的代码吧!
Ionic有个很牛叉的地方,当你输入如下代码后,你可以在浏览器中预览应用,当你在编写代码的时候,只需要保存,页面就好自动刷新,而不需要你手动刷新页面,这个angular又更进一步啦!很神奇有木有...
$ ionic serve1
执行的时候会提醒你选择地址,多数情况下选择localhost即可。程序会自动打开电脑中的默认浏览器并访问8100端口。你也可以直接在浏览器中输入localhost:8100。这里建议使用Chrome或者Safari。IOS的WebView使用的是Safari,Android使用的是Android浏览器(跟Chrome的相似度极高)。所以很明显看到用这两个浏览器模拟的好处,嘿嘿!
4.如何编译并发布应用?当你已经顺利完成你的应用代码部分的时候,你现在所需要的就是将你的应用打包并且发布了。
第一步:创建一个独一无二的图标。图标的设计无非有以下几点:简单,让人印象深刻,不受尺寸限制,颜色不要太复杂。创建好你的图标之后,请以png/psd/AI格式保存在resource/android/icon.png和resource/android/icon.png。然后使用如下命令,就可以生成不同尺寸的图标:
$ ionic resources -icon1
第二步:创建启动页面图片。启动画面的源文件至少需要2208px×2208px,创建完成后,保存为
resource/android/splash.png和resource/android/splash.png。
然后使用如下命令就可以生成不同尺寸的启动画面图片:
$ ionic resources --splash1
第三步:编译Android应用(这里以安卓应用为例)。
1>配置应用的签名。使用如下命令来配置你的签名(keystore):
$ keytool -genkey -v -keystore know_your_brew.keystore -alias know_your_brew -keyalg RSA -keysize 2048 -validity 100001
注意:请使用你应用的名字来替代know_your_brew.这个命令可以生成一个新文件,在本示例中为know_your_brew.keystore。
在应用的整个生命周期中将重复使用同一个keystore,请保存好它。
2>使用Cordova编译应用。使用build命令编译一个应用的发布版本:
$ cordova build --release android1
这个命令会生成一个新的apk文件。此时还未签名。
3>签名应用文件。现在我们要用之前创建的keystore文件来签名生成的未签名版本的应用。使用如下命令来签名:
$ jarsigner -verbose -sigalg SHALwithRSA -digestalg SHAL -keystore know_your_brew.keystore unsigned_name.apk know_your_brew1
注意:这里请使用keystore生成文件名来替换know_your_brew示例名称,同时用真实的应用文件名替换掉unsigned_name.apk。
这个过程需要一点时间,期间会提示输入keystore的密码。命令会修改apk文件并对其进行签名。
‘柒’ 如何在Windows下使用ionic打包与开发IOS程序
1、安装VMware和Mac OS
参考网上教程
2、ionic开发ios程序
3、安装Xcode
为什么要安装Xcode呢?
ionic开发Android程序都不需要安装eclipse等IDE,只要一个能写SSS,JS
,HTML的IDE就行(Hbuilder,WebStrom,Sublime Text), 开发完成之后不就执行个ionic platform
add android,ionic build android,然后就能生成一个.apk文件,给手机上一安装O了。
ionic开发ios程序就得安装Xcode
IDE,这是因为蛋疼的ios程序无法直接使用命令生成,使用命令只能生成.project文件,然后再使用Xcode
IDE将.project文件转成.ipa文件,更让人蛋疼的是这个ipa文件居然也不能被直接安装到爱疯上,只能先上传到APP
Store,人家审核通过之后,我们再从APP
Store上下载。(看到这你可能快疯了,但是没法啊,谁让人家NB呢。好了废话少说了,乖乖安装Xcode吧)
4、安装ionic开发环境
(这个和在windows上安装android开发环境类似)
5、安装Nodejs
网络下载,傻瓜式安装,注意:你现在是Mac本,所以需要下载Nodejs for mac的,别下错了
6、安装cordova,ionic
sudo npm install -g cordova
sudo npm install -g ionic
或者合成一句统一安装
sudo npm install -g cordova ionic
7、创建项目
ionic start firstIonicProjectForIos [tabs][blank][sidememu]
8、浏览器中运行项目(调试项目)
cd firstIonicProjectForIosionic serve(自动在afai浏览器中打开)
9、模拟器中运行项目
因为apple开发的证书限制我们在没有申请购买apple账号的情况下,使用虚拟机来部署我们的应用,在部署之前需要使用npm安装一个ios-sim插件用来调用模拟器的,执行命令:
sudo npm install -g ios-sim
然后执行
ionic platform add ios (添加ios平台)ionic build ios
开始编译项目,编译完成之后用Xcode打开开发目录下platform->ios->myIonic.xcodeproj的项目文件,Xcode中选择要运行的虚拟机版本并执行快捷键cmd+R运行虚拟机,虚拟机打开后会自动运行你应用。
当然你也可以使用命令:
ionic emulate ios(在ios模拟器中打开)/ionic run ios(我的报错了)
PS: 为什么不用run ios 命令直接启动虚拟机呢,因为我的环境下执行run会报错,虚拟机会打开但是无法运行程序,找了半天解决解决方案没有结果,索性直接用Xcode了,效果是一样的
10、打包项目
能使用Ionic来开发app的很可能对Ios和android的app打包发布流程不是很熟悉,我这里简单说明下:
ionic build android命令执行完成之后会在项目目录/platforms/android/build/outputs/apk目录下面生成.apk文件。
但是ionic build ios命令执行完成之后不会生成.ipa文件,只会在项目目录/platform/os目录下生成.xcodeproj文件,这个文件需要借助Xcode才能将其打包成.ipa文件。
因此接下来的任务就成了使用Xcode打包.xcodeproj成为.ipa的事情了。
‘捌’ 如何搭建Ionic环境以及打包成安卓apk
1.Ionic是什么?Ionic的生态系统基于Angular和Cordova,前者是web应用框架,后者是构建和打包原生应用的工具。Ionic是将HTML,CSS,JS,Angular,Cordova等技术进行整合,成为一个非常强大的移动端应用开发平台。2.如何搭建环境?如果你现在要使用Ionic来架构应用,你应用要有以下几个步骤。1>安装node.js。可以访问[nodejs官网](splash.png。然后使用如下命令就可以生成不同尺寸的启动画面图片:$ionicresources--splash1第三步:编译Android应用(这里以安卓应用为例)。1>配置应用的签名。使用如下命令来配置你的签名(keystore):$keytool-genkey-v-keystoreknow_your_brew.keystore-aliasknow_your_brew-keyalgRSA-keysize2048-validity100001注意:请使用你应用的名字来替代know_your_brew.这个命令可以生成一个新文件,在本示例中为know_your_brew.keystore。在应用的整个生命周期中将重复使用同一个keystore,请保存好它。2>使用Cordova编译应用。使用build命令编译一个应用的发布版本:$cordovabuild--releaseandroid1这个命令会生成一个新的apk文件。此时还未签名。3>签名应用文件。现在我们要用之前创建的keystore文件来签名生成的未签名版本的应用。使用如下命令来签名:$jarsigner-verbose-sigalgSHALwithRSA-digestalgSHAL-keystoreknow_your_brew.keystoreunsigned_name.apkknow_your_brew1注意:这里请使用keystore生成文件名来替换know_your_brew示例名称,同时用真实的应用文件名替换掉unsigned_name.apk。这个过程需要一点时间,期间会提示输入keystore的密码。命令会修改apk文件并对其进行签名。