使用DCloud+Framework7制作移动APP应用

jopen 8年前

现在使用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的空模板移动应用

使用DCloud+Framework7制作移动APP应用

2、下载Framwork7,解压,将dist文件夹拷贝到项目中,并重命名为Framework7,然后我们的项目文件大概为这样:

使用DCloud+Framework7制作移动APP应用

注:一下操作流程大多数是对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应用程序进行调试(或者点击编辑器上面的运行调试,或者使用真机调试都可以,这里不一 一 讲解),效果如下:

使用DCloud+Framework7制作移动APP应用

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步一样运行一下,点击“关于我”就可以得出如下效果:

使用DCloud+Framework7制作移动APP应用

6、一个演示APP基础制作就完成了,可是现在还不是APP,想要弄到安卓(或者IOS)上面运行,就需要进行打包

PS:真机测试就像使用APP样,如果只是简单学习,可以真机演示

下面进行打包:

①、点击HBuilder编辑器上面的  运行--》打包APP,根据你的机型进行打包

使用DCloud+Framework7制作移动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