使用DCloud+Framework7制作移動APP應用
現在使用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