2015 年 9 月 底，DeviceOne Release發(fā)布。至此，DeviceOne 基本完成了對多端的支持?；?DeviceOne 可以：

HTML5、Android、iOS、Windows 多端代碼一次編寫，各處復(fù)用；

實時簡單部署。

本地化UI

在接下來的時間，我會通過一系列文章來介紹 DeviceOne。本文介紹環(huán)境配置以及如何建立一個簡單的項目。（注：本篇文章 iOS 和 Android和Windows 開發(fā)都適用。）

目前使用 DeviceOne 開發(fā)可以在Windows 或者 Mac 系統(tǒng)進(jìn)行。

下面介紹下DeviceOne環(huán)境搭建，不管是應(yīng)用開發(fā)還是組件開發(fā)，都需要搭建開發(fā)環(huán)境，只需要3分鐘就可以完成。

1. 硬件環(huán)境

PC電腦或MAC電腦一臺用于開發(fā)
移動設(shè)備一臺用于調(diào)試和測試,手機(jī)或pad都可以（android、ios、windowsphone都可以），Android還可以嘗試模擬器。

2. 軟件環(huán)境

操作系統(tǒng)(MAC或Windows都支持)
Windows： 7 以上操作系統(tǒng)。
MAC：10.9 以上

移動設(shè)備：

Android ： 4.0以上操作系統(tǒng)
IOS ： 7.0 以上操作系統(tǒng)
WinPhone ：8.1 以上操作系統(tǒng)

JDK：1.7版本及以上

3. 網(wǎng)絡(luò)環(huán)境

外網(wǎng)環(huán)境：很多功能都需要有外網(wǎng)才能進(jìn)行，App的開發(fā)和調(diào)試可以離線進(jìn)行。

4. 注冊DeviceOne開發(fā)者賬戶

要想使用DeviceOne開發(fā)應(yīng)用，首先需要在www.deviceone.net上注冊一個自己的開發(fā)者賬號，注冊的地址是 注冊

5. 下載設(shè)計器(IDE)

用戶需要下載和使用DeviceOne提供的設(shè)計器（IDE）來開發(fā)移動應(yīng)用，設(shè)計器提供所見即所得的方式來構(gòu)建UI，提供代碼編輯器來編寫標(biāo)準(zhǔn)的javascript或lua的邏輯腳本代碼，使用設(shè)計器提供的即時調(diào)試功能和真機(jī)移動設(shè)備互動調(diào)試應(yīng)用，最后通過設(shè)計器提供的打包功能來發(fā)布最終應(yīng)用。

設(shè)計器目前包含2個大的版本，一個是基于Eclipse RCP的版本，一個是自己開發(fā)的只支持Windows的版本。我們推薦大家使用基于Eclipse的版本。

下載地址是http://docs.deviceone.net/ 平臺—>下載中心

安裝設(shè)計器，直接找到剛才下載好的zip文件。解壓到您相應(yīng)的位置。本設(shè)計器是免安裝綠色版，Windows的版本直接到解壓好的文件路徑下找到DoStudio.exe，雙擊打開。Mac版本解壓后直接雙擊dostuio.app就可以啟動。在啟動的過程中可能會碰到一些問題，可以參考新版設(shè)計安裝和啟動問題整理

開發(fā)環(huán)境搭建完成后，我們開始嘗試開發(fā)第一個DeviceOne移動應(yīng)用，下面一步步介紹一下Hello DeviceOne應(yīng)用的構(gòu)建方法

1. 新建應(yīng)用

首先打開設(shè)計器，點擊新建項目，新建項目需要聯(lián)網(wǎng)，輸入用戶密碼驗證碼后登陸。但是創(chuàng)建完之后是支持離線開發(fā)和調(diào)試的。

在彈出的對話框中填寫新建項目的名稱并選擇編寫程序想要使用的前端腳本語言，目前可以選擇JavaScript和Lua兩種，還可以配置基本項目模板，包含空頁面模板，帶listview的模板等等，還可以配置屏幕分辨率，都配置好后點擊確定按鈕，會自動生成一個工程項目

我們可以看到設(shè)計器主頁面如下圖，我們可以在設(shè)計器里左側(cè)工程導(dǎo)航區(qū)樹上看到所有代碼，其中app.js是整個程序的入口，類似于其它開發(fā)語言的main函數(shù)。更多的文件結(jié)構(gòu)介紹請參考“DeviceOne應(yīng)用結(jié)構(gòu)”文檔。設(shè)計器的詳細(xì)說明可以參考“設(shè)計器使用指南”文檔。

我們可以嘗試在“控件列表”里拖拽一個Label組件到index.ui文件對應(yīng)的“視圖設(shè)計”，設(shè)置Label的背景顏色為綠色。視圖設(shè)計可以所見即所得的拖拽和設(shè)置一個界面元素的基本屬性和專有屬性。

我們再修改一下index.ui.js源代碼，把Hello World改成Hello DeviceOne。在js文件里可以修改應(yīng)用運(yùn)行的邏輯。

以上所述就是本文給大家介紹的JavaScript使用DeviceOne開發(fā)實戰(zhàn)（一) 配置和起步的全部內(nèi)容，希望大家喜歡。下篇文章給大家介紹JavaScript使用DeviceOne開發(fā)實戰(zhàn)（二） 生成調(diào)試安裝包，請各位朋友繼續(xù)關(guān)注，喜歡的朋友直接點擊了解詳情。

最新評論