移动端智能机操作系统一般分为三种，安卓，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框架。
<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，实在是不可多得开发方式了。