现在使用Html+Css+Js制作移动应用是越来越火，所以在此记录下我个人使用DCloud+Framework7进行移动APP开发过程，方便以后查阅。
一、准备：
环境：Win7 64位
开发工具：HBuilder（下载地址：http://www.dcloud.io/? ）
设计到的原型工具：
DCloud（地址：http://www.html5plus.org/doc/zh_cn/accelerometer.html? ?）
Framework7（中文地址：http://framework7.taobao.org? ?????英文地址：http://www.idangero.us/framework7? ）
二、进行开发：
1、打开HBuilder，建议一个HelloWorld的空模板移动应用
2、下载Framwork7，解压，将dist文件夹拷贝到项目中，并重命名为Framework7，然后我们的项目文件大概为这样：
注：一下操作流程大多数是对Framework7的使用，可以参考（http://framework7.taobao.org/get-started）
3、修改你的index.html文件，编写你的主文件，代码如下：（这段代码来自于Framework7的基本IOS样式，进行了简单文字修改）
<!DOCTYPE?html> <html> ??<head> ????<!--?Required?meta?tags--> ????<meta?charset="utf-8"> ????<meta?name="viewport"?content="width=device-width,?initial-scale=1,?maximum-scale=1,?minimum-scale=1,?user-scalable=no,?minimal-ui"> ????<meta?name="apple-mobile-web-app-capable"?content="yes"> ????<meta?name="apple-mobile-web-app-status-bar-style"?content="black"> ????<!--?Your?app?title?--> ????<title>Hello?World</title> ????<!--?Path?to?Framework7?Library?CSS,?iOS?Theme?--> ????<link?rel="stylesheet"?href="Framework7/css/framework7.ios.min.css"> ????<!--?Path?to?Framework7?color?related?styles,?iOS?Theme?--> ????<link?rel="stylesheet"?href="Framework7/css/framework7.ios.colors.min.css"> ????<!--?Path?to?your?custom?app?styles--> ????<link?rel="stylesheet"?href="css/my-app.css"> ??</head> ??<body> ????<!--?Status?bar?overlay?for?full?screen?mode?(PhoneGap)?--> ????<div?class="statusbar-overlay"></div> ????<!--?Views?--> ????<div?class="views"> ??????<!--?Your?main?view,?should?have?"view-main"?class?--> ??????<div?class="view?view-main"> ????????<!--?Top?Navbar--> ????????<div?class="navbar"> ??????????<div?class="navbar-inner"> ????????????<!--?We?need?cool?sliding?animation?on?title?element,?so?we?have?additional?"sliding"?class?--> ????????????<div?class="center?sliding">Hello?World</div> ??????????</div> ????????</div> ????????<!--?Pages?container,?because?we?use?fixed-through?navbar?and?toolbar,?it?has?additional?appropriate?classes--> ????????<div?class="pages?navbar-through?toolbar-through"> ??????????<!--?Page,?"data-page"?contains?page?name?--> ??????????<div?data-page="index"?class="page"> ????????????<!--?Scrollable?page?content?--> ????????????<div?class="page-content"> ??????????????<p>这是首页，你可以在打开的时候就看到我了</p> ??????????????<!--?Link?to?another?page?--> ??????????????<a?href="about.html">关于我</a> ????????????</div> ??????????</div> ????????</div> ????????<!--?Bottom?Toolbar--> ????????<div?class="toolbar"> ??????????<div?class="toolbar-inner"> ????????????<!--?Toolbar?links?--> ????????????<a?href="#"?class="link">链接1</a> ????????????<a?href="#"?class="link">链接2</a> ??????????</div> ????????</div> ??????</div> ????</div> ????<!--?Path?to?Framework7?Library?JS--> ????<script?type="text/javascript"?src="Framework7/js/framework7.min.js"></script> ????<!--?Path?to?your?app?js--> ????<script?type="text/javascript"?src="js/my-app.js"></script> ??</body> </html>
你也需要添加必须要的css/my-app.css和js/my-app.js文件
4、在index.html上右键–》运行–》web应用程序进行调试（或者点击编辑器上面的运行调试，或者使用真机调试都可以，这里不一 一 讲解），效果如下：
5、大概有个效果样子了，现在我们来添加一个新页面功能：关于我
①编辑js/my-app.js文件
//?初始化APP
var?myApp?=?new?Framework7();
//?If?we?need?to?use?custom?DOM?library,?let's?save?it?to?$$?variable:
var?$$?=?Framework7.$;
//?Add?view
var?mainView?=?myApp.addView('.view-main',?{
??//?Because?we?want?to?use?dynamic?navbar,?we?need?to?enable?it?for?this?view:
??dynamicNavbar:?true
});
②、在根目录添加一个about.html的页面
<!--?We?don't?need?full?layout?in?this?file?because?this?page?will?be?parsed?with?Ajax.?It?is?just?enough?to?put?here?.navbar?and?.page--> <!--?Top?Navbar--> <div?class="navbar"> ??<div?class="navbar-inner"> ????<div?class="left"> ??????<a?href="#"?class="back?link"> ????????<i?class="icon?icon-back-blue"></i> ????????<span>返回</span> ??????</a> ????</div> ????<div?class="center?sliding">关于我</div> ????<div?class="right"> ??????<a?href="#"?class="link?icon-only?open-panel"><i?class="icon?icon-bars-blue"></i></a> ????</div> ??</div> </div> <div?class="pages"> ??<div?data-page="about"?class="page"> ????<div?class="page-content"> ??????<div?class="content-block"> ????????<p>关于我</p> ????????<p>这是Hello?World项目的一个关于我的页面，你是通过首页的关于我链接打开的。</p> ????????<p>这个项目是一个基础演示项目，使用DCloud+Framework7进行开发。</p> ??????</div> ????</div> ??</div> </div>
③、给我们的about页面添加一个必要的ajax引导，编辑my-app.js，增加如下内容：
$$(document).on('pageInit',?'.page[data-page="about"]',?function(e)?{
????//这里你可以做很多事情
});
④、修改我们的index.html文件，在需要点击打开关于我们的页面添加链接：
<div?class="page-content"> ??????????????<p>这是首页，你可以在打开的时候就看到我了</p> ??????????????<!--?Link?to?another?page?--> ??????????????<a?href="about.html">关于我</a> ????????????</div>
⑤、像第4步一样运行一下，点击“关于我”就可以得出如下效果：
6、一个演示APP基础制作就完成了，可是现在还不是APP，想要弄到安卓（或者IOS）上面运行，就需要进行打包
PS：真机测试就像使用APP样，如果只是简单学习，可以真机演示
下面进行打包：
①、点击HBuilder编辑器上面的 ?运行–》打包APP，根据你的机型进行打包
②、打包完成后会生成一个APP，将APP拷贝到你的手机中进行安装即可
7、这样，一个简单的APP就制作完成了
三、附件
1、演示代码没有进行GIT托管，请通过http://pan.baidu.com/s/1ukwV0下载
2、如果要进行更加丰富的APP开发，你需要学习Framework7和Dcloud的Html5+，官方网站都有丰富的文档，认真阅读，开发一个普通APP不是问题。
3、Framework的替代产品：mui、jquery mobile、其他UI框架等
4、DCloud的替代产品：APICloud，PhoneGap，AppCan等
5、APP演示：
电影APP：http://topmovie.bmob.cn/
四、写在最后
不知道未来的Html+Js会是什么样子，希望会更好。
如果文章中有任何BUG或者问题可以提出交流，非常谢谢！
来自：http://my.oschina.net/kenblog/blog/516201
0