一个App完成入门篇(一)-从Hello world开始
程序員學(xué)習(xí)新技術(shù)都是通過Hello World開始的,我們也不例外。第一課我們簡單了解利用do平臺開發(fā)App的基本流程,能了解到的知識點是:
開發(fā)環(huán)境搭建
創(chuàng)建開發(fā)者賬號
新建項目
拖拽一個組件
修改js代碼
手機查看效果
開發(fā)環(huán)境搭建
do平臺的開發(fā)的基本開發(fā)工作都是圍繞DeviceOne提供的IDE(DevinceOne Stduio),我們通常簡稱為設(shè)計器。
設(shè)計器是基于Eclipse核心的RCP,熟悉Eclipse的的開發(fā)人員應(yīng)該很熟悉基本的操作。設(shè)計器是跨平臺的,可以在Windows,Mac下運行。以后可以支持更多,比如Linux。基本的運行條件是需要Java Development Kit(JDK7)及以上版本。
下載頁面是這里
支持操作系統(tǒng) 設(shè)計器下載 JDK版本 大小
Windows 32位 32位Windows版本 32位JDK7及以上版本For Windows 140M左右
Windows 64位 64位Windows版本 64位JDK7及以上版本For Windows 147M左右
MAC 64位 MAC版本設(shè)計器 64位JDK7及以上版本For Mac 144M左右
創(chuàng)建開發(fā)者賬號
do平臺提供的開發(fā)者服務(wù)有一些服務(wù)項目需要在線,創(chuàng)建一個開發(fā)者賬號是必須要的。注冊沒什么特殊,簡單略過。申請地址是這里
新建項目
下載設(shè)計器后,啟動的界面類似常規(guī)的Eclipse界面,do平臺基本的開發(fā)工作都是圍繞著設(shè)計器,基本上所有的工作步驟都在設(shè)計器上操作:
首先需要新建一個項目,點擊File-New-DeviceOne Project或者直接在Script Explorer窗口的右鍵New-DeviceOne Project:
新建項目需要聯(lián)網(wǎng),輸入用戶密碼驗證碼后登陸。但是創(chuàng)建完之后是支持離線開發(fā)和調(diào)試的。
拖拽一個組件
新建完成后,會自動生成一些文件。
雙擊打開index.ui,我們可以看到一個可視化的設(shè)計區(qū)域和右邊的UI備選區(qū),我們從右邊找到do_Label拖拽到設(shè)計區(qū)
接著選中這個組件,然后在Properties窗口把它的bgColor改成00FF00FF(前6位表示顏色,后2位表示透明值),我們可以馬上看到Label的背景變成了綠色效果
修改js代碼
我們再來雙擊打開index.ui.js,我們可以看到JavaScript的編輯器,修改一行代碼,把Hello World改成Hello DeviceOne。在js文件里可以修改應(yīng)用運行的邏輯。表示點擊這個按鈕,alert出一個信息
手機查看效果
我們最后來手機上看看運行的效果。
首先我們需要安裝一個調(diào)試用的App,打開這里掃描里面二維碼安裝一個doDebugger的App,Android,iOS手機都可以,windows和winphone版本不支持二維碼掃描安裝,這一課暫時不提。安裝完如下圖。這里提一下,這個調(diào)試App是可以定制的,這里暫時不詳細解釋。
然后我們回到設(shè)計器中的Service右鍵點擊Create按鈕,如果彈出一個選擇窗口,請選擇剛創(chuàng)建好的test項目。創(chuàng)建后,記錄下顯示的ip地址和port號。請確保state是Running
繼續(xù)我們回到手機,打開doDebugger這個app,在服務(wù)地址處輸入剛才我們記錄下的地址和端口。請確保手機和電腦在同一網(wǎng)段。然后點擊更新,把代碼從電腦上同步到手機上。如果更新提示失敗,請參考這里.
最后我們點擊進入,就可以看到我們在設(shè)計器上設(shè)計的效果,點擊按鈕,會彈出Hello DeviceOne
這一課我們就到這里,是不是覺得很簡單了。就這樣,我們在設(shè)計器上可以繼續(xù)修改代碼,修改UI,然后再次點擊更新按鈕和進入按鈕就可以實時的看到開發(fā)的效果。一直到這個App完成所有你需要達到的功能。
《新程序員》:云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作,文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的一个App完成入门篇(一)-从Hello world开始的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Fragment生命周期详解
- 下一篇: 新增的querySelector、que