Android开发&HTML5+App
2016-03-14 15:43
465 查看
移动端智能机操作系统一般分为三种,安卓,ios,wp;wp一般使用类c语言开发,ios使用object-c,android使用java;当然这并非绝对,这只是以官方给出的接口做参考。安卓拥有着大部分的忠实用户,因为其价格比较低廉,又因为其开源,所以学习起来会很方便。
webapp真正兴起也不过数年时间,前期还因为画面流畅度差,被藐视为“性功能缺失”,但随着html5的推广以及移动端硬件质量提升,这种几乎被世人忘记的开发方式终于重见天日。
其实在早期,最流行的webapp开发方式为:cordova+ionic,如果不了解cordova和ionic可以看这里:cordova和ionic
简单的说,cordova用于和真正的底层交互,负责调用原生借口或模仿原生效果,ionic则是一个移动端开发的框架,js部分是angularjs,然后借助css将各种输入框等封装成和原生UI一样的效果。不明白angularjs的可以看这里angularjs基础
angularjs框架的核心为数据绑定,目的是打造一个单页面的应用。所有需要改变的部分都用div包起来,等需要时相互替换,这样页面就需要重新加载刷新,避免出现留白或卡顿。
这种开发方式很火,对于html5来说,在什么平台都可以运行,因此cordova+ionic开发模式只需要改很少的部分,便可以在不同移动终端使用;这主要因为浏览器底层在解析js时,采用了谷歌v8引擎,v8为了达到更快的效果,底层都是c++,我们在js中进行的操作都是借助v8实现的,node.js也是如此;哦对了,必须说一下,这种app开发模式需要先构建nodejs环境,具体的流程可以看这里webapp开发
cordova+ionic开发方法可以节省大量的原生开发人员,至于前端工作者……这个真的不是很稀缺。这种开发模式也可以叫做混合开发,因为基本的项目结构跟原生类似,不过只是将页面放入asserts文件夹,然后加载到了内置浏览器中,因此在此之外还可以新加原生的activity,着实妙哉。不过有一点:AMD处理器的电脑会遇到一些问题……
不过真要开发一些项目,当然还是原生的好的多,尤其对于安卓来说,谷歌公司近年刚发布的android studio功能实在是强大,开发速度比之前强了不知多少,尤其各种工具,图形化,以及优化的虚拟机,让开发工作变得简单直接,以性能来说,还是原生的强,无论性能还是画质。
很正常的,有了原生+html开发的方式,当然纯html开发自然的就会产生:5+ App开发Native.js,安卓原生接口有多少:四十万。
把四十万原生封装然后提供js借口来调用,因此几乎所有原生可以完成的工作都可以借用js来完成,所有的原生功能都可以借助plus完成,尤其是这种开发方式刚刚起步,当然主要由于cordova开发大盛。不过我认为将来native.js更是开发主流,毕竟有一些优势是cordova无法取代的:第一,有专门的开发工具HBuilder,强大的代码补全机制可以让你懒下来。第二,不需要nodejs等环境配置,不需要下载庞大的sdk等工具,只需上传就可以在网上完成打包功能。第三,项目目录,想想一个只有css,html,js,resource三个文件夹的项目,该是多么简练,即便工作交接也可以很快入手。
更让人兴奋的是,官方给出了MUI框架,一个比ionic效果更炫的前端架构,让你只需要引入几个资源文件,就可以做到前端工作者话费很大精力才可以完成的工作MUI框架,链接中会详细讲解mui的使用,HBuider中也会有demo,图形和源码相结合,可以学的更快,值得一提的是,mui框架性能特别好,手机基本不会有卡的现象出现,当然游戏软件除外。
基本app开发方式就这三种(有些对性能要求高的软件会直接调用底层c等等),其他也没有好说,只要框架会使用,一般的开发就不成问题。
angularjs作为项目级框架,其优点还是很明显的。而mui作为一个纯粹的移动端框架,更是不需要任何依赖,因此,这两个框架就有结合在一起的可能。
angularjs框架并不注重效果,若非美工人员,单纯使用angularjs开发的界面不会好看到哪去,我主要是看重了它的数据绑定和路由选择功能,数据绑定很容易理解,路由选择就不好处理的,有兴趣可以看这个angularjs的路由服务
若数据方面有angularjs控制,效果方面由mui来管理(事实上mui框架也封装了jquery和native.js的一些功能,使用起来会更方便),原生交互则交给plus,开发app就更简单了,甚至可以免去mui的预加载等功能。
好了,看一个例子。
首先,在index.html页面中将所有需要的文件引入,并放置需模块加载的位置,同时初始化mui框架。
可以看到,在中间时有mui.toast(),这就是mui框架封装的toast方法,plus.runtime.quit()借助plus来实现退出程序;刚开始的meta标签是不可以省略的,否则手机上画面会有变形;最后的div ui-view=”“表示这里动态加载div模块。注意该页面中加入了mui框架中的mheader,可以显示导航栏
然后定义angularjs的应用文件app.js,其中规定了路由以及控制器,可以在里面初始化数据。
简单的注册工作已经完成,下面只需要将想要显示的page中的内容定义一下就好。
page1.html
page2.html
page3.html
以及控制page之间相互切换的pageTab
ui-sref表示点击该元素再次进行路由切换,ui-view表示page显示的位置,并且可以看到pageTab中加入很多mui框架类来改变显示的效果。
直接连接调试,第一个画面效果图:
![](http://img.blog.csdn.net/20160314144913933)
这是在HBuilder中直接显示的效果,(代码中多余部分不影响实际效果)。
可以看到出现了一个顶部导航烂,下面直接将pageTab.html加载了出来,并且将pageTab页面中/page1.html也加载了,然后可以点击三个按钮来回切换内容。
再给出一个在真机上点击page2的效果图:
![](http://img.blog.csdn.net/20160314145639319)
点击返回键还可以看到toast提示框,但因为这只是实验,所以mui.back封装的比较差,退出时画面会有变化。
如此简单方便又可以做出美观的app,实在是不可多得开发方式了。
webapp真正兴起也不过数年时间,前期还因为画面流畅度差,被藐视为“性功能缺失”,但随着html5的推广以及移动端硬件质量提升,这种几乎被世人忘记的开发方式终于重见天日。
其实在早期,最流行的webapp开发方式为:cordova+ionic,如果不了解cordova和ionic可以看这里:cordova和ionic
简单的说,cordova用于和真正的底层交互,负责调用原生借口或模仿原生效果,ionic则是一个移动端开发的框架,js部分是angularjs,然后借助css将各种输入框等封装成和原生UI一样的效果。不明白angularjs的可以看这里angularjs基础
angularjs框架的核心为数据绑定,目的是打造一个单页面的应用。所有需要改变的部分都用div包起来,等需要时相互替换,这样页面就需要重新加载刷新,避免出现留白或卡顿。
这种开发方式很火,对于html5来说,在什么平台都可以运行,因此cordova+ionic开发模式只需要改很少的部分,便可以在不同移动终端使用;这主要因为浏览器底层在解析js时,采用了谷歌v8引擎,v8为了达到更快的效果,底层都是c++,我们在js中进行的操作都是借助v8实现的,node.js也是如此;哦对了,必须说一下,这种app开发模式需要先构建nodejs环境,具体的流程可以看这里webapp开发
cordova+ionic开发方法可以节省大量的原生开发人员,至于前端工作者……这个真的不是很稀缺。这种开发模式也可以叫做混合开发,因为基本的项目结构跟原生类似,不过只是将页面放入asserts文件夹,然后加载到了内置浏览器中,因此在此之外还可以新加原生的activity,着实妙哉。不过有一点:AMD处理器的电脑会遇到一些问题……
不过真要开发一些项目,当然还是原生的好的多,尤其对于安卓来说,谷歌公司近年刚发布的android studio功能实在是强大,开发速度比之前强了不知多少,尤其各种工具,图形化,以及优化的虚拟机,让开发工作变得简单直接,以性能来说,还是原生的强,无论性能还是画质。
很正常的,有了原生+html开发的方式,当然纯html开发自然的就会产生:5+ App开发Native.js,安卓原生接口有多少:四十万。
把四十万原生封装然后提供js借口来调用,因此几乎所有原生可以完成的工作都可以借用js来完成,所有的原生功能都可以借助plus完成,尤其是这种开发方式刚刚起步,当然主要由于cordova开发大盛。不过我认为将来native.js更是开发主流,毕竟有一些优势是cordova无法取代的:第一,有专门的开发工具HBuilder,强大的代码补全机制可以让你懒下来。第二,不需要nodejs等环境配置,不需要下载庞大的sdk等工具,只需上传就可以在网上完成打包功能。第三,项目目录,想想一个只有css,html,js,resource三个文件夹的项目,该是多么简练,即便工作交接也可以很快入手。
更让人兴奋的是,官方给出了MUI框架,一个比ionic效果更炫的前端架构,让你只需要引入几个资源文件,就可以做到前端工作者话费很大精力才可以完成的工作MUI框架,链接中会详细讲解mui的使用,HBuider中也会有demo,图形和源码相结合,可以学的更快,值得一提的是,mui框架性能特别好,手机基本不会有卡的现象出现,当然游戏软件除外。
基本app开发方式就这三种(有些对性能要求高的软件会直接调用底层c等等),其他也没有好说,只要框架会使用,一般的开发就不成问题。
angularjs作为项目级框架,其优点还是很明显的。而mui作为一个纯粹的移动端框架,更是不需要任何依赖,因此,这两个框架就有结合在一起的可能。
angularjs框架并不注重效果,若非美工人员,单纯使用angularjs开发的界面不会好看到哪去,我主要是看重了它的数据绑定和路由选择功能,数据绑定很容易理解,路由选择就不好处理的,有兴趣可以看这个angularjs的路由服务
若数据方面有angularjs控制,效果方面由mui来管理(事实上mui框架也封装了jquery和native.js的一些功能,使用起来会更方便),原生交互则交给plus,开发app就更简单了,甚至可以免去mui的预加载等功能。
好了,看一个例子。
首先,在index.html页面中将所有需要的文件引入,并放置需模块加载的位置,同时初始化mui框架。
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>index.html</title> <!-- 描述:加载mui框架及样式 --> <link rel="stylesheet" href="css/mui.min.css" /> <link href="css/mui.css" rel="stylesheet"/> <script src="js/mui.js"></script> <script src="js/mui.min.js"></script> <!-- 描述:加载angularjs框架 --> <script src="js/angular.min.js"></script> <script src="js/angular-ui-router.min.js"></script> <!-- 描述:加载总模块app.js --> <script src="app.js"></script> <!-- 描述:初始化mui框架,定义各种 操作 --> <script> mui.init(); mui.plusReady(function(){ var isExit=false; mui.back=function(){ if(isExit){ mui.toast("程序已退出"); plus.runtime.quit(); }else{ isExit=true; mui.toast("再按一次退出程序"); setTimeout(function(){isExit=false},1000); } }; }); </script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">mui-angularjs</h1> </header> <div class="mui-content"> <div ui-view=""></div> </div> </body> </html>
可以看到,在中间时有mui.toast(),这就是mui框架封装的toast方法,plus.runtime.quit()借助plus来实现退出程序;刚开始的meta标签是不可以省略的,否则手机上画面会有变形;最后的div ui-view=”“表示这里动态加载div模块。注意该页面中加入了mui框架中的mheader,可以显示导航栏
然后定义angularjs的应用文件app.js,其中规定了路由以及控制器,可以在里面初始化数据。
//这里将ui.router作为依赖模块引入,因为下面将使用到路由功能 var myApp=angular.module("myApp",['ui.router']); myApp.controller("myCtrl",function($scope,$location){ //这里就定义了一个jump方法,因此只要在myCtrl作用域中,都可以使用该方法。 $scope.jump=function(){ //将页面定位到相对位置pageTab $location.url("pageTab"); } }); myApp.config(function($stateProvider,$urlRouterProvider){ //当页面路由为空时转到pageTab/page1 $urlRouterProvider.when("","pageTab/page1"); //当路由选择时没有对应的路径时也转到pageTab $urlRouterProvider.otherwise("pageTab"); $stateProvider .state("pageTab",{ //对应之前的$location.url("pageTab");进行路由选择 url:"/pageTab", //该路由将加载的页面 templateUrl:"pageTab.html" }) .state("pageTab.page1",{ url:"/page1", templateUrl:"page1.html" }) .state("pageTab.page2",{ url:"/page2", templateUrl:"page2.html" }) .state("pageTab.page3",{ url:"/page3", templateUrl:"page3.html" }); });
简单的注册工作已经完成,下面只需要将想要显示的page中的内容定义一下就好。
page1.html
<div> <div> <h1>Page1 content goes here</h1> </div> </div>
page2.html
<div> <div> <h2>Page2 content goes here</h2> </div> </div>
page3.html
<div> <div> <h3>Page3 content goes here</h3> </div> </div>
以及控制page之间相互切换的pageTab
<div> <div class="mui-button-row mui-card"> <span style="width:100px" ui-sref=".page1"> <button class="mui-btn-green" >Page1</button> </span> <span style="width:100px" ui-sref=".page2"> <button class="mui-btn-green" >Page2</button> </span> <span style="width:100px" ui-sref=".page3"> <button class="mui-btn-green">Page3</button> </span> </div> <div class="mui-content-padded mui-card"> <div ui-view=""></div> </div> </div>
ui-sref表示点击该元素再次进行路由切换,ui-view表示page显示的位置,并且可以看到pageTab中加入很多mui框架类来改变显示的效果。
直接连接调试,第一个画面效果图:
这是在HBuilder中直接显示的效果,(代码中多余部分不影响实际效果)。
可以看到出现了一个顶部导航烂,下面直接将pageTab.html加载了出来,并且将pageTab页面中/page1.html也加载了,然后可以点击三个按钮来回切换内容。
再给出一个在真机上点击page2的效果图:
点击返回键还可以看到toast提示框,但因为这只是实验,所以mui.back封装的比较差,退出时画面会有变化。
如此简单方便又可以做出美观的app,实在是不可多得开发方式了。
相关文章推荐
- 在Mac中配置Android的环境变量
- Android Studio使用butterknife注解框架插件Android Butterknife Zelezny
- Android屏幕适配全攻略(最权威的官方适配指导)
- Android之zxing二维码生成与识别
- 最受欢迎的5个Android ORM框架
- Android 编译使用CCACHE
- Android 应用自动更新
- android中.classpath和.project作用
- Android静态工具类ToastUtil因为传入content不当导致Activity内存泄露
- android设置EditText不弹出软键盘
- 加载优化之缓存Lru,滑动停止的时候开始加载,滑动的时候不加载
- java Android之Activity之间简单的信息传递
- Android多媒体开发笔记-- AwesomePlayer基本框架及播放流程
- Android动态部署二:APK安装及AndroidManifest.xml解析流程分析
- Android 一次性退出所有Activity
- Android开发艺术探索--Activity、Context
- Android support design库的bug
- android——仿微拍贷滑动圆形菜单
- android studio 签名,打包,混淆,多渠道打包
- Android Gson使用入门及GsonFormat插件的使用