【APP開發】一個App完成入門篇-從Hello world開始
2016/03/16

【APP開發】一個App完成入門篇-從Hello world開始

【APP開發】一個App完成入門篇-從Hello world開始

程式設計師學習新技術都是通過Hello World開始的,我們也不例外。第一課我們簡單瞭解利用do平臺開發App的基本流程,能瞭解到的知識點是:

  • 開發環境搭建
  • 建立開發者賬號
  • 新建專案
  • 拖拽一個元件
  • 修改js程式碼
  • 手機檢視效果

1. 開發環境搭建

do平臺的開發的基本開發工作都是圍繞DeviceOne提供的IDE(DevinceOne Stduio),我們通常簡稱為設計器

設計器是基於Eclipse核心的RCP,熟悉Eclipse的的開發人員應該很熟悉基本的操作。設計器是跨平臺的,可以在Windows,Mac下執行。以後可以支援更多,比如Linux。基本的執行條件是需要Java Development Kit(JDK7)及以上版本。

下載頁面是這裏

一個App完成入門篇-從Hello world開始

支援作業系統 設計器下載 JDK版本 大小
Windows 32位 32位Windows版本 32位JDK7及以上版本For Windows 140M左右
Windows 64位 64位Windows版本 64位JDK7及以上版本For Windows 147M左右
MAC 64位 MAC版本設計器 64位JDK7及以上版本For Mac 144M左右

注:設計器執行碰到啟動的問題基本上和Java環境相關,可以參考設計器執行常用問題說明

2. 建立開發者賬號

do平臺提供的開發者服務有一些服務專案需要線上,建立一個開發者賬號是必須要的。註冊沒什麼特殊,簡單略過。申請地址是這裏

3. 新建專案

下載設計器後,啟動的介面類似常規的Eclipse介面,do平臺基本的開發工作都是圍繞著設計器,基本上所有的工作步驟都在設計器上操作:

首先需要新建一個專案,點選FileNewDeviceOne Project或者直接在Script Explorer視窗的右鍵NewDeviceOne Project

新建專案需要聯網,輸入使用者密碼驗證碼後登陸。但是建立完之後是支援離線開發和除錯的。

一個App完成入門篇-從Hello world開始

4. 拖拽一個元件

新建完成後,會自動生成一些檔案。

雙擊開啟index.ui,我們可以看到一個視覺化的設計區域和右邊的UI備選區,我們從右邊找到do_Label拖拽到設計區

接著選中這個元件,然後在Properties視窗把它的bgColor改成00FF00FF(前6位表示顏色,後2位表示透明值),我們可以馬上看到Label的背景變成了綠色效果

一個App完成入門篇-從Hello world開始

5. 修改js程式碼

我們再來雙擊開啟index.ui.js,我們可以看到JavaScript的編輯器,修改一行程式碼,把Hello World改成Hello DeviceOne。在js檔案裡可以修改應用執行的邏輯。表示點選這個按鈕,alert出一個資訊

一個App完成入門篇-從Hello world開始

6. 手機檢視效果

我們最後來手機上看看執行的效果。

首先我們需要安裝一個除錯用的App,開啟這裏掃描裏面二維碼安裝一個doDebuggerApp,Android,iOS手機都可以,windows和winphone版本不支援二維碼掃描安裝,這一課暫時不提。安裝完如下圖。這裏提一下,這個除錯App是可以定製的,這裏暫時不詳細解釋。

一個App完成入門篇-從Hello world開始

然後我們回到設計器中的Service右鍵點選Create按鈕,如果彈出一個選擇視窗,請選擇剛建立好的test專案。建立後,記錄下顯示的ip地址和port號。請確保stateRunning

一個App完成入門篇-從Hello world開始一個App完成入門篇-從Hello world開始

繼續我們回到手機,開啟doDebugger這個app,在服務地址處輸入剛纔我們記錄下的地址和埠。請確保手機和電腦在同一網段。然後點選更新,把程式碼從電腦上同步到手機上。如果更新提示失敗,請參考這裏.

一個App完成入門篇-從Hello world開始

最後我們點選進入,就可以看到我們在設計器上設計的效果,點選按鈕,會彈出Hello DeviceOne

一個App完成入門篇-從Hello world開始

這一課我們就到這裏,是不是覺得很簡單了。就這樣,我們在設計器上可以繼續修改程式碼,修改UI,然後再次點選更新按鈕和進入按鈕就可以實時的看到開發的效果。一直到這個App完成所有你需要達到的功能。

本文來自網際網路