使用DCloud+Framework7製做移動APP應用

時間 2019-12-04

標籤使用 dcloud+framework7 dcloud framework 製做移動 app 應用欄目無線简体版

原文原文鏈接

如今使用Html+Css+Js製做移動應用是愈來愈火，因此在此記錄下我我的使用DCloud+Framework7進行移動APP開發過程，方便之後查閱。
javascript

1、準備：css

環境：Win7 64位html

開發工具：HBuilder（下載地址：http://www.dcloud.io/ ） html5

設計到的原型工具：java

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

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

2、進行開發：web

一、打開HBuilder，建議一個HelloWorld的空模板移動應用
ajax

二、下載Framwork7，解壓，將dist文件夾拷貝到項目中，並重命名爲Framework7，而後咱們的項目文件大概爲這樣：app

注：一下操做流程大多數是對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等