一点贡献：非原生App开发的基本步骤（移动端：ionic、cordova，后端：CoreThink） - 开源中国社区
当前访客身份：游客 [
当前位置：
非原生App开发的基本步骤（以安卓端为例）
主要使用：
移动端：ionic、cordova
后端：CoreThink
注：长期在osc灌水，第一次发帖，希望能真的给开源中国做一点贡献。下面的流程是我司一位美女研发顺手整理过的一份概要流程，希望多少对大家有些用处，如果有不合理或者错误的地方欢迎通过官网反馈给我们：，QQ：。这个流程可以非常快地同时产出iOS&Android两端非原生APP。
1.安装node.js
3.安装ionic & cordova：
命令行输入：npm install –g cordova ionic
注：-g表示全局安装，也可以进入指定的目录安装，但这里推荐全局安装，安装后的目录为C:/users/Administrator/AppData/Roaming/npm/node_modules
4.安装Java JDK
5.安装Apache Ant
6.安装Android SDK（从这里开始后面基本以android为例，ios类似）
7.设置环境变量：
①打开计算机-&系统属性-&高级系统设置-&环境变量
②在系统变量中新建ANDROID_HOME变量，变量值为sdk所在目录
③新建CLASSPATH变量，变量值为.;%JAVA_HOME%\lib\dt.%JAVA_HOME%\lib\tools.
④新建JAVA_HOME变量，变量值为jdk所在目录
⑤编辑系统变量中的path变量，不要删原来的变量值，在原值后面添加 ;%JAVA_HOME%\%JAVA_HOME%\jre\%ANDROID_HOME%\%ANDROID_HOME%\build-%ANDROID_HOME%\platform-tools
注：这里是添加了jdk\bin、jdk\jre\bin、sdk\tools 、sdk\build-tools、sdk\platform-tools的路径，互相以英文分号隔开
8.创建项目：
命令行cd进入任何你喜欢的目录，ionic start&AnyNameYouLike&blank，如果一切顺利，就会在你指定的目录新建一个你喜欢的名字的文件夹，并在里面初始化一个ionic项目。
9.添加平台
进入刚才新建的项目的目录，命令行输入ionic platform add android
二、在项目目录中有一个www的文件夹，里面的文件有html，js，css等，可随意编写，在platform中的www文件最好不要动它。
三、测试项目
1.进入项目目录，ionic build android编译项目
2.测试项目的方法：
桌面浏览器测试法：ionic serve
模拟器测试法：这个比较烦，而且运行慢，略
手机浏览测试法：自己看吧，略
手机测试法：连上数据线，打开开发者选项，执行ionic run android
四、编写项目
英文太多，翻译不出来
五、发布app，前面的准备就是为了这一步了
1.执行cordova plugin rm cordova-plugin-console，这一步是Before we deploy, we should take care to adjust plugins needed during development that should not be in production 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
六、基本步骤到此结束，可能会出现各种报错的情况，只能具体问题具体分析了，
参考网址：
共有0个评论
更多开发者职位上
有什么技术问题吗？
CoreThi...的其它问题
类似的话题当时测试的时候看到android和ios上有那么大差别，特别崩溃啊...
还好看到了这篇文章，文章原文是Ionicchina中文网上的：
ionicframework中android和ios在默认样式上有一些不同的地方，官方文档中都有说明，但是经常会想不起。
1.tab位置，$ionicConfigProvider, tabs.position(value)
Android 默认是顶部(top)，Ios是底部 (bottom)
2.标题android默认靠左边，ios默认居中
navBar.alignTitle(value)
Which side of the navBar to align the title. Default center.
3.tabs的样式，在ios上为standard，Android上为striped样式
$ionicConfigProvider.tabs.style('standard');
阅读(...) 评论()您所在的位置： &
通过Ionic构建一个简单的混合式(Hybrid)跨平台移动应用
通过Ionic构建一个简单的混合式(Hybrid)跨平台移动应用
自从混合式移动开发火起来之后，一部分Web工程师开始转战移动开发。混合式移动开发技术让Web工程师可以开发出各个平台的移动应用，而且不需要 学习各个平台的原生编程语言。现在已经有很多诸如PhoneGap和Titanium这些混合式开发平台来帮助我们进行混合式编程，今天我们要介绍一是一个相比之下更新的混合式移动开发平台Ionic。
自从混合式移动开发火起来之后，一部分Web工程师开始转战移动开发。混合式移动开发技术让Web工程师可以开发出各个平台的移动应用，而且不需要 学习各个平台的原生编程语言。现在已经有很多诸如PhoneGap和Titanium这些混合式开发平台来帮助我们进行混合式编程，今天我们要介绍一是一个相比之下更新的混合式移动开发平台。
Ionic是一个高级HTML5混合式移动应用开发框架，同时也是一个开源的前端框架。Ionic应用是基于的, 所以Cordova相关的工具也都可以构建到应用中去，Lonic注重的是视觉效果和用户体验，所以使用了&来构建很各种酷的效果。
想要开始Ionic开发，你需要先安装&。
然后根据你的开发环境来安装相应的&&或&&平台，在这篇文章中，我们会创建一个Android应用。
接下来你要安装一个 Cordova 和 Ionic的命令行工具，操作如下：
npm&install&-g&cordova&ionic&
安装完成之后，你可以尝试开始创建一个工程：
ionic&start&myIonicApp&tabs&
进入项目目录，添加ionic平台，创建应用，在虚拟机中运行，成为高富帅&&
cd&myIonicApp&ionic&platform&add&android&ionic&build&android&ionic&emulate&android&
下面就是样例应用的效果：
我们已经有一个不错的开始了，现在我们来创建一个ToDo列表的应用，我们从空白模板开始：
ionic&start&myToDoList&blank&
如果你进入到项目目录，你会看到AngularJS文件，这是我们添加相关代码的地方。
创建和展示列表
首先，你需要在应用中添加一个list，我们直接用&&，添加ion-list到www/index.html：
&Scuba&Diving&Climb&Mount&Everest&&
之后我们看一看添加ion-list之后我们的html文件是什么样的：
&!DOCTYPE&html&&&&&&charset=&utf-8&&&name=&viewport&&content=&initial-scale=1,&maximum-scale=1,&user-scalable=no,&width=device-width&&&&&&href=&lib/ionic/css/ionic.css&&rel=&stylesheet&&&href=&css/style.css&&rel=&stylesheet&&&&&!--&IF&using&Sass&(run&gulp&sass&first),&then&uncomment&below&and&remove&the&CSS&includes&above&&href=&css/ionic.app.css&&rel=&stylesheet&&--&&&&&src=&lib/ionic/js/ionic.bundle.js&&&&&&src=&cordova.js&&&&&&src=&js/app.js&&&&&&ng-app=&starter&&&&&&class=&bar-stable&&&class=&title&My&ToDo&List&&&&Scuba&Diving&Climb&Mount&Everest&&&&&&&&
然后我们可以在 www/js/中创建一个controllers.js文件，来定义一个新的cntroller，我们暂且叫它ToDoListCtrl。这是controllers.js文件的内容：
angular.module('starter.controllers',&[])&&.controller('ToDoListCtrl',&function&($scope)&{&&});&&
在上面的代码中，我们定义了一个叫starter的module和一个叫作calledToDoListCtrl的Controler。
然后我们就要把这个module加到我们的应用中了。打开www/js/app.js&，然后把module添加进去：
angular.module('starter',&['ionic',&'starter.controllers'])&.run(function&($ionicPlatform)&{&$ionicPlatform.ready(function&()&{&if&(window.StatusBar)&{&StatusBar.styleDefault();&}&});&})&
我们继续，定义一个$scope来携带ToDo list的条目，ToDoListCtrl中声明一个新的$scope变量，如下：
.controller('ToDoListCtrl',&function&($scope)&{&&&$scope.toDoListItems&=&[{&task:&'Scuba&Diving',&status:&'not&done'&},&{&task:&'Climb&Everest',&status:&'not&done'&}]&});&
把controllers.js添加到index.html中：
&ng-controller=&ToDoListCtrl&&&ng-repeat=&item&in&toDoListItems&&{{item.task}}&&&
在上面的代码中，我们添加了bar-positive来给应用加颜色。你可以有同样添加很多不同的header。这里有详细的文档：&。
我们现在需要在index.html中添加一个button来触发事件：
&id=&modal.html&&type=&text/ng-template&&&class=&modal&&&&&class=&bar&bar-header&bar-calm&&&class=&button&&ng-click=&closeModal()&back&&class=&title&Add&Item&&&&&ng-submit=&AddItem(data)&&&class=&list&&&class=&list&list-inset&&&class=&item&item-input&&&type=&text&&placeholder=&ToDo&Item&&ng-model=&data.newItem&&&&&class=&button&button-block&button-positive&&type=&submit&&Add&Item&&&&&&&&
现在确认一下，在上面的操作中，我们在modal中添加了一个header，一个input box和一个button。
我们同样有需要一个回退的Button在header中，它用来触发 closeModal() 功能。
现在我们开始绑定&ionic modal 到我们的 controller中，我们通过如下的方法把 $ionicModal 注入到controller中：
angular.module('starter.controllers',&[])&.controller('ToDoListCtrl',&function&($scope,&$ionicModal)&{&//&array&list&which&will&contain&the&items&added&$scope.toDoListItems&=&[];&//init&the&modal&$ionicModal.fromTemplateUrl('modal.html',&{&scope:&$scope,&animation:&'slide-in-up'&}).then(function&(modal)&{&$scope.modal&=&&});&//&function&to&open&the&modal&$scope.openModal&=&function&()&{&$scope.modal.show();&};&//&function&to&close&the&modal&$scope.closeModal&=&function&()&{&$scope.modal.hide();&};&//Cleanup&the&modal&when&we're&done&with&it!&$scope.$on('$destroy',&function&()&{&$scope.modal.remove();&});&//function&to&add&items&to&the&existing&list&$scope.AddItem&=&function&(data)&{&$scope.toDoListItems.push({&task:&data.newItem,&status:&'not&done'&});&data.newItem&=&'';&$scope.closeModal();&};&&&});&
我们在上面的代码中使用了 .fromTemlateUrl 来加载html的内容，然后在初始化的时候通过两个选项定义了$scope和animation的类型。&
当然我们也定义了打开、关闭moda和添加条目到数组的方法。
好了，万事俱备，虚拟机走起，看起来还不错吧。
在这篇文章中，我们了解了使用Ionic的一个大概流程。你可以在看到详细的代码。如果想深入学习，还是应该多了解一下&。
参考：大家有兴趣的话，可以阅读这套AngularJS的基础开发教程：
via 【编辑推荐】【责任编辑： TEL：（010）】
关于&&&&的更多文章
本系列视频教程由正益无线与51CTO共同推出，目的是让大家对跨平
既然强大的Android Studio来了，有什么理由不去用呢？
讲师： 55人学习过讲师： 49人学习过讲师： 37人学习过
OpenGL ES 和 OpenGL 一样，是 khronos 所维护、定义
一款《Flappy Bird》捧红了越南开发者阮哈东，引来无
手机游戏开发可以很简单，如Flappy Bird，一个人一杯
本书是针对全国计算机技术与软件专业技术资格（水平）考试而编写的，书中详尽分析与解答了2006年上半年的程序员级、软件设计师级
Windows Phone专家
Android开发专家
51CTO旗下网站ionic（17）
使ionic应用更加贴近原生
欢迎大家到查看，并关注我学习Ionic 1和Ionic 2的历程，共同学习，共同进步。
本文乃翻译而来，并加入个人理解，如有理解错误指出，请大家指出，大家也可移步。
近来，由于设备性能的提高以及混合开发技术的优化，原生开发和混合开发之间的界限越来越不明显了。
一些混合开发技术中甚至可以使用“原生切换动画”、“原生滚动”等效果，如ionic。很多情况下，已经分不清原生app和混合app的区别了，特别是很多原生app使用WebViews。
混合开发技术仍在飞速的发展中，现在是加入其中的极好时机。本文将讲述4中方法提升ionic应用的性能，使其更加贴近原生。
1.原生切换动画
这实在可以被作为一个变革。感谢，让我们能够在混合应用使用原生的切换动画。
当然，ionic内置的切换动画已经很优秀了，但是却不太稳定。而原生的切换动画在任何时刻都表现地相当不错，纵享丝滑。
为了在ionic应用中使用，可以使用。可以根据其说明文档使用，这里提供基本使用方法：
$ npm install ionic-native-transitions --save
$ cordova plugin add /Telerik-Verified-Plugins/NativePageTransitions
下一步，添加ionic-native-transitions作为依赖模块：
angular.module('yourApp', ['ionic','ionic-native-transitions'])
然后，在触发切换的控件上添加directive：native-transitions，如：
class="button" native-transitions ui-sref="facts"&Next&
可以使用native-transitions-options为动画设置属性，如需要点击返回按钮时添加向右的切换动画，则可以使用如下方式：
native-transitions native-transitions-options="{type: 'slide', direction:'right'}" class="button-icon"&
class="icon ion-arrow-left-c"&&
可以用下面的方法为动画设置默认的属性，下面的参数值是我实验后认为对于ionic应用比较适合的设定：
.config(function($ionicNativeTransitionsProvider){
$ionicNativeTransitionsProvider.setOptions({
"duration"
"androiddelay"
默认的duration为400，稍慢，这里我改为300以适应ionic内置动画。低版本android动画效果不是很理想，所以应该为其添加延时，所以我将androiddelay设置为100，大家可以自行测试，因为我手头只有有限的android设备，测试样本较小。如果不想让工具栏随着页面切换，可以使用fixedPixelsTop属性，我一般使用其默认值0。
除了上面的滑动效果，还包括很多其他动画效果，如“抽屉效果”、“翻转效果”等切换动画效果，具体可参照。我想随着不断地优化，ionic内置的动画都可以使用原生动画替代。
2.原生滚动
ionic1.2之前版本：
默认使用javascript的滚动效果，不是很理想，特别是对于android设备来说，如果还存在大量图片，情况将更加糟糕。
为了解决此问题，可以使用原生滚动，可以用下面的方式在全局启用原生滚动：
.config(function($ionicConfigProvider) {
$ionicConfigProvider.scrolling.jsScrolling(false);
如果仅是想在个别页面使用原生滚动，可以在页面的ion-content标签中添加overflow-scroll='true'。
ionic1.2及以后版本：
默认采用原生滚动，即不用像之前版本那样进行配置，如果想要使用javascript滚动，可以使用下面的方式在全局启用javascript滚动：
.config(function($ionicConfigProvider) {
$ionicConfigProvider.scrolling.jsScrolling(true);
如果仅是想在个别页面使用javascript滚动，可以在页面的ion-content标签中添加overflow-scroll='false'。
ionic提供了默认的缓存机制，不过可能并不能满足需要。
考虑以下场景：用户使用app阅读一篇文章（文章内容通过网络请求而来），然会退出了此app，稍后可能想要再次阅读同一篇文章，这时没有理由再次进行HTTP请求获取文章内容（如果文章内容没有变化的话）。因此，我们可以将文章内容存储在本地，当用户再次观看时，文章就可以极快的呈现出来了。
可能大家第一想法是使用localStorage存储，但是localStorage不能处理大量的数据，因为其容量很有限。关于localStorage可以查看我另一篇。此时便出场了,angular-cache使得存取大量数据变得很容易。
我们可以使用bower或者npm安装Angular-cache：
$ bower install --save angular-cache
$ npm install --save angular-cache
然后，添加angular-cache作为依赖模块：
angular.module('myApp', ['angular-cache'])
然后就可以使用如下的方式使用了：
.controller('Posts', function (CacheFactory) {
if (!CacheFactory.get('postCache')) {
CacheFactory.createCache('postCache');
var postCache = CacheFactory.get('postCache');
postCache.put(id, data);
postCache.remove(id);
$scope.post = postCache.get(id);
这里我们仅仅是当用户加载时检测本地是否已经缓存了post，如果是则不必进行额外的HTTP请求。
当然，我们可以通过类似“下拉刷新”的方法进行HTTP请求从而跳过缓存或者更新缓存。
更过可参照。
4.Crosswalk WebView
Crosswalk WebView大家都很熟悉了，特别是在低版本android中，Crosswalk WebView提供了比原生WebView更好的性能。
而Crosswalk WebView目前来看唯一的缺点就是增大了app的体积（差不多20M），如果不用考虑app体积问题，则值得一用。
$ cordova plugin add cordova-plugin-crosswalk-webview
我在使用Crosswalk 1.3.1时还需要在config.xml中做如下设置：
name="CrosswalkAnimatable" value="true" /&
Phonegap中也可使用Crosswalk WebView，在config.xml中如下设置：
name="org.crosswalk.engine" version="1.3.0" /&
5.延伸阅读
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：12717次
排名：千里之外
译文：13篇
(1)(2)(1)(1)(12)(1)(2)