转使用DCloud+Framework7制做移动APP应用

时间 2019-11-18

标签使用 dcloud+framework7 dcloud framework 制做移动 app 应用栏目无线繁體版

原文原文链接

如今使用Html+Css+Js制做移动应用是愈来愈火，因此在此记录下我我的使用DCloud+Framework7进行移动APP开发过程，方便之后查阅。javascript

1、准备：php

环境：Win7 64位css

开发工具：HBuilder（下载地址：http://www.dcloud.io/ ） html

设计到的原型工具：html5

DCloud（地址：http://www.html5plus.org/doc/zh_cn/accelerometer.html ） java

Framework7（中文地址：http://framework7.taobao.org 英文地址：http://www.idangero.us/framework7 ）jquery

2、进行开发：ios

一、打开HBuilder，建议一个HelloWorld的空模板移动应用web

二、下载Framwork7，解压，将dist文件夹拷贝到项目中，并重命名为Framework7，而后咱们的项目文件大概为这样：ajax

注：一下操做流程大多数是对Framework7的使用，能够参考（http://framework7.taobao.org/get-started）

三、修改你的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文件

四、在index.html上右键--》运行--》web应用程序进行调试（或者点击编辑器上面的运行调试，或者使用真机调试均可以，这里不一一讲解），效果以下：

五、大概有个效果样子了，如今咱们来添加一个新页面功能：关于我

①编辑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步同样运行一下，点击“关于我”就能够得出以下效果：

六、一个演示APP基础制做就完成了，但是如今还不是APP，想要弄到安卓（或者IOS）上面运行，就须要进行打包

PS：真机测试就像使用APP样，若是只是简单学习，能够真机演示

下面进行打包：

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

②、打包完成后会生成一个APP，将APP拷贝到你的手机中进行安装便可

七、这样，一个简单的APP就制做完成了

3、附件

一、演示代码没有进行GIT托管，请经过http://pan.baidu.com/s/1ukwV0下载

二、若是要进行更加丰富的APP开发，你须要学习Framework7和Dcloud的Html5+，官方网站都有丰富的文档，认真阅读，开发一个普通APP不是问题。

三、Framework的替代产品：mui、jquery mobile、其余UI框架等

四、DCloud的替代产品：APICloud，PhoneGap，AppCan等

五、APP演示：

电影APP：http://topmovie.bmob.cn/

4、写在最后

不知道将来的Html+Js会是什么样子，但愿会更好。

若是文章中有任何BUG或者问题能够提出交流，很是谢谢！

转 使用DCloud+Framework7制做移动APP应用

转使用DCloud+Framework7制做移动APP应用