一個(gè)App完成入門篇（一）-從Hello world開(kāi)始

susheng 發(fā)布于2019-08-14 15:31 / 2907人閱讀

摘要：程序員學(xué)習(xí)新技術(shù)都是通過(guò)開(kāi)始的，我們也不例外。基本的運(yùn)行條件是需要及以上版本。但是創(chuàng)建完之后是支持離線開(kāi)發(fā)和調(diào)試的。拖拽一個(gè)組件新建完成后，會(huì)自動(dòng)生成一些文件。請(qǐng)確保手機(jī)和電腦在同一網(wǎng)段。一直到這個(gè)完成所有你需要達(dá)到的功能。

程序員學(xué)習(xí)新技術(shù)都是通過(guò)Hello World開(kāi)始的，我們也不例外。第一課我們簡(jiǎn)單了解利用do平臺(tái)開(kāi)發(fā)App的基本流程，能了解到的知識(shí)點(diǎn)是：

開(kāi)發(fā)環(huán)境搭建
創(chuàng)建開(kāi)發(fā)者賬號(hào)
新建項(xiàng)目
拖拽一個(gè)組件
修改js代碼
手機(jī)查看效果

開(kāi)發(fā)環(huán)境搭建

do平臺(tái)的開(kāi)發(fā)的基本開(kāi)發(fā)工作都是圍繞DeviceOne提供的IDE（DevinceOne Stduio），我們通常簡(jiǎn)稱為設(shè)計(jì)器。

設(shè)計(jì)器是基于Eclipse核心的RCP,熟悉Eclipse的的開(kāi)發(fā)人員應(yīng)該很熟悉基本的操作。設(shè)計(jì)器是跨平臺(tái)的，可以在Windows，Mac下運(yùn)行。以后可以支持更多，比如Linux。基本的運(yùn)行條件是需要Java Development Kit(JDK7)及以上版本。

下載頁(yè)面是這里

支持操作系統(tǒng) 設(shè)計(jì)器下載 JDK版本大小
Windows 32位 32位Windows版本 32位JDK7及以上版本For Windows 140M左右
Windows 64位 64位Windows版本 64位JDK7及以上版本For Windows 147M左右
MAC 64位 MAC版本設(shè)計(jì)器 64位JDK7及以上版本For Mac 144M左右

創(chuàng)建開(kāi)發(fā)者賬號(hào)
do平臺(tái)提供的開(kāi)發(fā)者服務(wù)有一些服務(wù)項(xiàng)目需要在線，創(chuàng)建一個(gè)開(kāi)發(fā)者賬號(hào)是必須要的。注冊(cè)沒(méi)什么特殊，簡(jiǎn)單略過(guò)。申請(qǐng)地址是這里

新建項(xiàng)目

下載設(shè)計(jì)器后，啟動(dòng)的界面類似常規(guī)的Eclipse界面，do平臺(tái)基本的開(kāi)發(fā)工作都是圍繞著設(shè)計(jì)器，基本上所有的工作步驟都在設(shè)計(jì)器上操作：

首先需要新建一個(gè)項(xiàng)目，點(diǎn)擊File-New-DeviceOne Project或者直接在Script Explorer窗口的右鍵New-DeviceOne Project：

新建項(xiàng)目需要聯(lián)網(wǎng)，輸入用戶密碼驗(yàn)證碼后登陸。但是創(chuàng)建完之后是支持離線開(kāi)發(fā)和調(diào)試的。

拖拽一個(gè)組件
新建完成后，會(huì)自動(dòng)生成一些文件。

雙擊打開(kāi)index.ui，我們可以看到一個(gè)可視化的設(shè)計(jì)區(qū)域和右邊的UI備選區(qū)，我們從右邊找到do_Label拖拽到設(shè)計(jì)區(qū)
接著選中這個(gè)組件，然后在Properties窗口把它的bgColor改成00FF00FF（前6位表示顏色，后2位表示透明值),我們可以馬上看到Label的背景變成了綠色效果

修改js代碼
我們?cè)賮?lái)雙擊打開(kāi)index.ui.js，我們可以看到JavaScript的編輯器，修改一行代碼，把Hello World改成Hello DeviceOne。在js文件里可以修改應(yīng)用運(yùn)行的邏輯。表示點(diǎn)擊這個(gè)按鈕，alert出一個(gè)信息

手機(jī)查看效果
我們最后來(lái)手機(jī)上看看運(yùn)行的效果。

首先我們需要安裝一個(gè)調(diào)試用的App，打開(kāi)這里掃描里面二維碼安裝一個(gè)doDebugger的App，Android，iOS手機(jī)都可以，windows和winphone版本不支持二維碼掃描安裝，這一課暫時(shí)不提。安裝完如下圖。這里提一下，這個(gè)調(diào)試App是可以定制的，這里暫時(shí)不詳細(xì)解釋。

然后我們回到設(shè)計(jì)器中的Service右鍵點(diǎn)擊Create按鈕，如果彈出一個(gè)選擇窗口，請(qǐng)選擇剛創(chuàng)建好的test項(xiàng)目。創(chuàng)建后，記錄下顯示的ip地址和port號(hào)。請(qǐng)確保state是Running

繼續(xù)我們回到手機(jī)，打開(kāi)doDebugger這個(gè)app，在服務(wù)地址處輸入剛才我們記錄下的地址和端口。請(qǐng)確保手機(jī)和電腦在同一網(wǎng)段。然后點(diǎn)擊更新,把代碼從電腦上同步到手機(jī)上。如果更新提示失敗，請(qǐng)參考這里.

最后我們點(diǎn)擊進(jìn)入，就可以看到我們?cè)谠O(shè)計(jì)器上設(shè)計(jì)的效果，點(diǎn)擊按鈕，會(huì)彈出Hello DeviceOne

這一課我們就到這里，是不是覺(jué)得很簡(jiǎn)單了。就這樣，我們?cè)谠O(shè)計(jì)器上可以繼續(xù)修改代碼，修改UI，然后再次點(diǎn)擊更新按鈕和進(jìn)入按鈕就可以實(shí)時(shí)的看到開(kāi)發(fā)的效果。一直到這個(gè)App完成所有你需要達(dá)到的功能。