做為一個前端開發人員，有時候除去傳統的前端開發還需要進行其他開發，比如公眾號開發，小程式開發，APP 開發。

本場 Chat 將帶你從0開始，基於 APICloud 進行 APP 開發，你只需要會前端就可以。

本場 Chat 主要內容為下:

1. 什麼是APICloud？
2. 開發工具的瞭解；
3. 提供的前端框架；
4. 相關 API；
5. 控制檯；
6. 開始你的 APP 開發。

本場 Chat 將會用一個新的案例從0來帶領大家，用實際的開發案例來學習，知道開發過程的每一個步驟，讓大家真的能開發，而不是一知半解，最後 Chat 結束後大家都可以都擁有一個自己的 APP。

什麼是大前端

對於大前端這一詞語，沒有一個準確的說法，什麼叫做大前端。

不同的人對於大前端的定義也是不一樣的。對我而言，大前端就是區別與傳統的前端開發，具備更多的能力，具備很強的橫向技能。

在我看來，如今的一般前端發展都需要具備多種開發技能，除去傳統的 PC 端開發，Web 端開發，還有基於微信的公眾號開發、小程式開發，配合打包技術實現的混合 APP 開發，以及桌面應用開發，還有基於 node.js 進行後臺開發。當然不是說每個人都必須要掌握這些技能，而是說你應該掌握其中的某些技能，它能幫助你獲得更多的機會。

來源於壓力的成長

在我工作之前，我會的前端技能就是 HTML + CSS + JavaScript + jQuery。

我工作的第一個專案，協同開發，一個月，採用的技術是 Vue.js，於是我一邊看一邊寫 demo，然後轉身寫專案。一個月，兩個前端用 Vue.js 開發了一個 erp 系統，在這一個月中我已經學會了簡單的運用 Vue.js。

第二個專案，一個線上預約視訊拍攝的網站，一樣的一邊看教程，一邊完成專案，我不斷把新學的內容往專案中加。終於在經歷兩個專案之後我能夠說對 Vue.js 比較瞭解了，基本對於 Vue.js 不存在什麼大的技術問題了。

然而，我的第三個專案，就得到了一個微信小程式開發，所幸的是我已經回了 Vue.js，而小程式和 Vue.js 又十分的相似，很快的上手，在一個月的時間裡獨立開發出來了一個小程式。

接下來，又換手，變成了一個公眾號開發...

工作半年，五個專案，學會了 Vue.js 框架，angula.JS 框架，幾個 CSS 框架，小程式開發，公眾號開發。

第六專案，就是一個 APP 的開發。

剛開始我是拒絕的，我，一個前端工程師，我怎麼去開發 APP？還只有兩個月的週期？

然而領導是不會管這些的，面對這樣的情況，我一度想要辭職回家要飯。

然而，貧窮使我不得開心顏，貧窮也使我努力，於是我開始想辦法解決問題。

 

在某競價排名為網站搜尋關於前端開發 APP 的相關內容，在拋去第一屏的廣告之後，開始尋找有用內容。

在瞭解了原生開發、web 網頁加殼生成 APP、HTML5 開發、混合 APP 開發之後，對於目前的專案情況，決定使用混合 APP 開發。然而我還是不清楚該如何開發，所以還需要繼續學習瞭解。

在 CSDN 看見一篇部落格，講的就是前端開發 APP，分別講述了 DCloud 與 APICloud，關於這二者我都去學習並嘗試寫了 DEMO，但是很無奈，做為一個純粹的前端開發人員，有很多地方我確實不清楚，我需要更多的幫助。然而 DCloud 官方並沒有一個很好的社群，我有太多的疑惑不能得到解決，於是我就選擇了 APICloud，好在與 APICloud 有比較活躍的社群，也有官方的很多 Q 群，有問題你可以在社群詢問，也可以在群裡諮詢他人。

一、什麼是 APICloud

 

APICloud 是中國領先的“雲端一體”的移動應用雲服務提供商。 APICloud 為開發者從“雲”和“端”兩個方向提供 API，簡化移動應用開發技術，讓移動應用的開發週期從一個月縮短到7天。基於 APICloud 提供的“雲 API”和“端 API”，開發者甚至可以忘記繁雜的服務端編碼，也可以忘記複雜的 Objective-C和Java，更可以忘記那數不清的螢幕適配。

以上內容都是 APICloud 放在某競價網站的的官方介紹。

實際上它就是一個平臺，為你提供很多元件和 API，然後幫你把你的 html 檔案打包成為安卓和蘋果的安裝包。

二、開發 IDE

做開發 IDE 是必要的，官方有自己的開發 IDE，也支援其他 IDE，如果你不介意你可以試著用用官方的 IDE，或者在你原有的 IDE 中下載相關外掛使用。

• 官方的 IDE：APICloud Studio 2

此外他還提供了：

• Sublime APICloud Plugins：Sublime APICloud Plugins 是 APICloud 為開發者提供的一套開源的 Sublime Text 擴充套件外掛
• Eclipse APICloud Plugins(Studio 1)Eclipse APICloud Plugins：基於 Eclipse 和 Aptana Studio3 進行擴充套件
• WebStorm APICloud PluginsWebStorm APICloud Plugins 是 APICloud 為開發者提供的一套開源的 WebStorm 擴充套件外掛
• Atom APICloud PluginsAtom APICloud Plugins 是 APICloud 為開發者提供的一套開源的基於 nodejs 的 Atom 擴充套件外掛
• APICloud CLIAPICloud CLI 是 APICloud 為開發者提供的一套開源的基於 nodejs 的命令列關於 IDE 介紹點我瞭解更多

而我日常開發使用的是官方提供的 IDE

樣式和內容跟其他開發 IDE 沒有什麼過大的區別。

APP開發之旅

step1：註冊帳號你需要在APICloud官網註冊一個開發帳號。https://www.apicloud.com/

step2：登入登入之後你會到達控制檯，如果沒有，請在右上角前往。

step3：建立應用需要在你的控制檯建立一個應用，建立按鈕位於控制檯的左上角。

然後選擇Native App，輸入應用名稱和說明。

然後就建立好了你的第一個應用。

step4：同步專案程式碼

當你建立好專案之後，雲端會自動生成相關的檔案以及程式碼，你需要將程式碼從雲端下載下來，然後進行開發工作。

在控制檯左邊有你新建的應用，點選就會進入應用的頁面。

在右邊是一些選單選項，我們前端開發涉及的就是第一個端開發裡面的內容：

1. 端設定：在這裡設定 APP 的圖示，啟動動畫，橫屏豎屏等
2. 證書管理：這裡上傳或者更新 APP 的相關證書，安卓端與 IOS 端的，需要你自己去申請
3. 程式碼管理：在這裡檢視你的程式碼操作記錄，檢視你程式碼所在雲端的地址與管理密碼或者設定 GIT
4. 模組管理：裡面有很多官方提供的模組，如果你要在你的 APP 中使用就需要在這裡進行管理
5. 雲編譯：對你已經提交到雲端的程式碼進行打包生成安裝包

 

SVN:    GIT： 

根據你使用的不同工具進行不同的操作，而我是用的是 SVN，在本地安裝好 SVN 之後直接同步到本地就可以了。

小提示：輸入地址後，SVN 會讓輸入帳號與密碼，這時候你填寫的帳號就是你在平臺註冊的號碼，郵箱，一定填郵箱，我之前填手機，然後一直給我報錯，然後密碼輸入點選獲取分支密碼彈出來的那一串。

然後你在通過 IDE 開啟這個資料夾就可以進行開發了。

關於APICloud 開發 APP 的概念：

我們前端在使用 APICloud 進行開發的時候，依然是寫 HTML 結構，CSS 樣式，JS 邏輯。關於樣式以及 JS 邏輯，和大家平時的寫法都沒有什麼區別。在 HTML 結構這塊，我們日常開發，一個 HTML 就是一個頁面，但是在 APICloud 中，頁面所展示的，並不是以 HTML 檔案為展示單位。在這裡要給大家講述關於 APICloud 的頁面佈局的五大元件。

五大元件：

1. widget：APP 的最外層，我們的內容都裝在 widget 中。
2. layout：頁面佈局，也就是我們在 APP 中看見的一個一個的頁面，由 window 和 frame 組成。
3. window：一個獨立的頁面，我們的實際頁面都是由一個一個的 window 來組成，每一個 window 都是全屏的。
4. frame：frame 也是一個獨立的頁面，但是它存在與 window 中，你可以給他指定他的高和寬，還可以指定它位於 window 的哪個位置。
5. UIModule：UI 模組，用於實現某些特定的頁面效果，既可以全屏，也可以佔據部分螢幕。

我們在使用前端開發的時候，頁面跳轉都是通過標籤或者路由進行，但是我們在APICloud中進行開發，頁面之間的切換我們所採用的方法另一種方法。

下面就讓我們來開始我們的開發工作，在開發中學習與理解。

通過之前的操作，我們已經建立好我們的專案，通過 IDE 開啟，我們就開始進行我們的程式設計工作了。

通過 IDE 開啟我們的專案檔案，右邊能看見很多資料夾和兩個檔案。

有的檔案是系統的，有的是使用者根據自己的需求新建的。這和一般的前端專案結構沒有什麼大的區別，各個資料夾用於存放相對應的檔案，從名稱就能看出來他們的作用。

config.xml：每一個 Widget 包必須有一個名為 config.xml （大小寫敏感）的配置檔案，它位於 Widget 包的根目錄下。該配置檔案包含了關於該 Widget 的重要資訊，如：名稱、作者資訊、描述、雲端ID、偏好設定、許可權配置、模組概覽等等，並且該配置檔案也是整個 Widget 的入口。

index.html：

我們的首頁檔案，當 APP 執行之後就會首先開啟我們的 index.html

開啟 index.html 它會有一個簡單的案例給你參考。

在這裡給大家講下關於 APICloud 的 API：

api 物件是您入門 APICloud 必須瞭解和熟練掌握的一個基礎物件。api 物件提供了構建應用程式所需要的一些基本的方法 [Method]，如視窗操作、相簿和網路資料訪問等；以及一些常見的屬性 [Attrbute]，如螢幕寬度（screenWidth），系統型別（systemType）等；還有一些常用事件 [Event]，如電量低（batterylow）事件、應用進入後臺（pause）事件。api 物件不需要 require 引用，可以直接在 js 中使用。

它為開發者提供了基礎操作，比如之前提到的頁面間的切換等，以及很多屬性事件。 它是每一個頁面都需要引入的。

我們會在每個頁面都通過 script 引入 api.js，而 apiready 則是和 window.onload 差不多的意思，也就是我們的 api.js 已經載入完成。

如果我們要進行某些處理需要設計呼叫 api，那一定記得需要在 apiready 之後執行。

接下來我們就可以開發我們的首頁了，會前端的這塊都不需要在額外多的說，在這裡，就為大家演示關於 window 和 frame 這二者的區別使用。我們要實現頁面切換，往往都是通過 api.openWin和api.closeWin 來執行，也就是開啟一個頁面，關閉一個頁面。如果我們要在當前頁面的某個位置開啟一個視窗，也就是之前提到的 frame，也是同樣的通過 api.openFrame和api.closeFrame 來實現。

      api.openWin({            name: 'page1',            url: './page1.html',            pageParam: {                name: 'test'            }        });

一旦執行了程式碼，它就會根據url來進行頁面跳轉，然後給跳轉的頁面一個名字。如果是關閉的話，只需要執行下面這段程式碼就 OK 了。

    api.closeWin({        name: 'page2'    });

我們只需要告訴它需要關閉的頁面的名稱就可以了   

這裡簡單的對這個進行介紹，大家可以前往官網文件對 API 進行學習。

事實上，你只需要知道 api.openWin 和 api.closeWin 都已經可以開發出一個 APP 了，當然，這是不推薦的做法。

官方提供的 API 有很多，大家都可以根據需要進行查閱，或者在開發前都看一遍。

如何邊開發邊測試

當我們進行開發的時候都會邊開發，邊看效果，而在 APICloud 中，我們通常會藉助自定義 loader 來進行測試。

在我們的控制檯，選單欄有一個叫做模組，之前給大家講述過，模組庫中有很多功能模組能提供給大家使用，有收費的也有免費的。大家可以在模組庫進行檢視，有需要的就新增到 APP中。

在模組選單中，最右邊有一個自定義 loader

你點選編譯，然後再將編譯成功的安裝包安裝到你的手機上，安裝好之後，會有一個白色的小圓點，點選之後會讓你設定 IP 以及埠號

 

  IP 和埠號，你在開發 IDE 選中專案，右鍵，有一個檢視 WIFI 真機同步埠 IP，讓後將對應的值設定在手機上，這樣你每次儲存之後手機端就會自動更新，你就能夠看到你的效果。

小提示：

1. 編譯的時候都需要把程式碼上傳到雲端之後再編譯
2. 自定義 loader 的有效期是七天，超過七天就需要重新編譯
3. 當你在模組庫中添加了新的模組，你需要重新編譯後才能在專案中使用

開發完成如何釋出

當你的專案已經開發完成了，這時候需要釋出出去，我們應該如何操作呢？

在控制檯，雲編譯選單：

在這裡我們可以進行編譯，當然，如果你是正式版，你還需要具備證書。在沒有證書的情況下，只能編譯測試版。如果不清楚如何獲得證書，頁面上有對應的引導，去教你如何獲取證書。

總結

師傅領進門，修行靠個人。

文章沒有對於純粹的技術做過多的講解，只是對如何使用 APICloud 進行 APP 開發的方式以及流程進行講解。如果你從第一部跟著我走，那麼到現在，你已經有了一個 APP，即使這個 APP 只有一個頁面，一個 DEMO。

APP 中內容取決與開發著自己，如果你只需要能有一個 APP，這完全已經能夠滿足了。如果你需要開發一個讓自己滿意的 APP，那肯定，你還需要對 APICloud 官方提供的內容進行一些學習。但是對於開發者而言，這些學習都是非常簡單的。也可以需要什麼學習什麼。都是獨立的。

最後給大家附上對應的教程連結：

推薦新手系列教程，十分簡單，講得通俗易懂，也有實際案例。整個教程幾個小時就完了。

有任何問題都可以前往文件中心查詢，包括之前提到的內容。這裡主要推薦兩個API 物件和前端框架（類似 JQ）掌握這二者基本的開發都可以完成了。

社群

如果有問題，文件無法解決，那麼社群無疑是很好的選擇，在這裡提出你的問題，會有很多人來回答你的問題的。當然你也可以加入官方的 QQ 群，在群裡詢問。有問題還可以@差不多先生，我是社群版主之一。

最後希望大家能夠快速上手，完成你的 APP。

一場場看太麻煩？訂閱GitChat體驗卡，暢享300場chat文章！更有CSDN下載、CSDN學院等超划算會員權益！點選檢視