一.App開發概述

• 1.Web App
  Web App開發，嚴格來說并不是一個App軟件，只是一個web型的微網站。
  優點:開發時間短，兼容性強，方便系統移植。
  缺點:必須有網絡的支持，用戶體驗度相對較差。
• 2.Native App
  Nactive App開發，就是一個原生的App軟件，其只要通過Java或Object-C來實現原生手機App軟件。
  優點:原生App,用戶體驗度非常好，可以調用手機的底層軟件。
  缺點:開發時間長，兼容性差，必須掌握Java或Object-C等編程語言。
• 3.HyBrid App(混合式App)
  介于Web app，Native App這兩者之間的App，開發時間短，成本低，可以調用手機的底層組件，方便移植，是目前以及未來App開發的流程趨勢。

二.開發前準備

1.進入APICloud官網，登錄賬號。進入開發控制臺
2.在開發控制臺中，點擊創建應用，選擇Native創建一個app。比如:

3.使用TortoiseSVN進行將APICloud中的代碼檢出到本地文件夾中。

在這里由于是需要權限訪問的，所以需要輸入用戶名和密碼。如下所示:

三.整合Sublime Text3開發工具

1.下載Sublime Text3以及針對Sublime Text3的APICloud的插件。針對Sublime Text3的APICloud的插件可以在APICloud官網的文檔中找到APP開發工具來下載
下載好之后如下所示:

3.整合APICloud插件到Sublime Text3插件庫

• 打開Sublime Text3插件庫方式如下:
  
  點擊瀏覽插件后就到了插件庫之中。
• 把APICloud的插件的四個文件夾復制粘貼到插件庫中
  4.使用真機同步安裝APP軟件
• 打開海馬玩模擬器
• 打開Sublime Text3
• 在項目上鼠標右鍵真機同步
  運行效果如下圖所示:
  

四.APP logo與引導頁設置

1.APICloud平臺
APICloud設計思想:云端一體
云:服務器(類似阿里云平臺)
端:手機APP端
2.APP端設置


上傳Icon實際上就是上傳APPLogo。

五.自定義loader

按照第四大步操作完成之后，會發現進行真機同步后，模擬器并沒有出現我們設置的Logo與引導頁。這是什么原因呢?
如果在控制臺設置了端設置，必須使用App loader，其設置才會生效。
目前只是在官方平臺進行了設置，但是在本地中并沒有進行設置。需要把服務器中已經設置好的功能打一個包放在本地App才會生效，把這一過程叫做App loader。
設置App loader
步驟一:

步驟二:編譯Android自定義loader

步驟三:自定義loader和loader的版本號,下載后如下圖所示:

步驟四:把load.apk放置于插件庫中

• 找到APICloud-loader
  
• 進入appLoader目錄，找到custom-loader(Android自定義loader庫）
  
• 創建App目錄，根據widget id(App編號)
  步驟一:找到wedget id
  
  步驟二:在custom-loader目錄下根據App編號創建一個文件夾，然后把我們下載的自定義loader放置于此目錄中，如下圖所示:
  
  步驟三:創建load.conf配置文件
  新建一個 ‘load.conf’ 文件（version - 自定義 Loader 版本號，packageName - 應用包名），格式如圖：
  
  版本號如圖:
  
  包名如圖:
  
  步驟四:使用sublime進行真機同步。進行真機同步的具體流程參看官網:真機調試

六.App結構

七.重點目錄與文件解析

css目錄:樣式文件目錄(默認只有api.css)。
html目錄:框架目錄(windows窗體,frame窗體)。
image目錄:圖片目錄。
script目錄:JS目錄(默認只有api.js)。
config.xml:核心配置文件。
index.html:App項目的核心入口文件。

八.App核心代碼分析

1.入口文件index.html分析
①App項目必備meta標簽

<!--響應式設計,最大縮放比例為1.0,> <!--最小縮放比例為1.0,用戶點擊無法進行縮放,縮放比例為1.0,起始寬度等于設備寬度> <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <!-禁止數字轉撥號連接，禁止作為郵件連接，禁止事件操作，禁止跳轉到地圖> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

②載入APICloud框架css樣式表

<!--框架api.css><link rel="stylesheet" type="text/css" href="./css/api.css" />

③載入APICloud框架js文件

<!--框架api.js> <script type="text/javascript" src="./script/api.js"></script>

什么是APICloud框架？
APICloud 前端框架，包括 api.js 和 api.css。 api.css 處理不同平臺瀏覽器的默認樣式。 api.js是一個 JavaScript 庫。是APICloud為混合移動開發定制的輕量JavaScript庫。具有小巧高效的特性。很容易學習和使用。 使用APICloud前端框架需引入api.js和api.css文件。api.js、api.css 在創建APICloud 項目時自動創建。

④項目html代碼分析

header為頭部，main是中間的版本信息,footer為尾部時間顯示。
2.分析核心JavaScript代碼
①頁面載入事件
在原生Js代碼中，我們都是通過window.onload進行頁面載入的,但是在App開發中，其實是通過apiready方法進行App頁面的載入的。

apiready = function(){}

②$api對象

var header = $api.byId('header'); 以上代碼相當于 var header=document.getElementById('header');

如何獲取$api的信息?
參看官網手冊APICloud前端框架

小提示:
Sublime Text3繼承了APICloud插件后，自帶代碼提示功能，如果想編寫$api獨享中的相關方法，可以使用快捷鍵。
快捷方式為:apijs-提示信息

③狀態欄沉浸式效果

$api.fixStatusBar(header);

④獲取位置以及寬高

var headerPos = $api.offset(header);

$api與api的區別

特別說明:兩者完全不同，$api對象是api.js框架中的命名空間。api對象是APICloud提供的api對象。
⑤打開frame窗體

api.openFrame({name: 'main',url: 'html/main.html',bounces: true,rect: {x: 0,y: headerPos.h,w: 'auto',h: mainPos.h}});

屬性說明:
name:窗體的名稱(關閉時需要使用此參數)
url:文件的地址
bounces:是否可以彈動
rect:x橫坐標，y縱坐標，w寬度，h高度。
⑥獲取時間信息

var year = $api.byId('year');year.innerHTML = new Date().getFullYear();

⑦分析html/main.html

總結

以上是生活随笔為你收集整理的Hybrid App基础知识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。