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

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

實(shí)時(shí)簡單部署。

本地化UI

在接下來的時(shí)間，我會(huì)通過一系列文章來介紹 DeviceOne。本文介紹環(huán)境配置以及如何建立一個(gè)簡單的項(xiàng)目。（注：本篇文章 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電腦一臺(tái)用于開發(fā)
移動(dòng)設(shè)備一臺(tái)用于調(diào)試和測(cè)試,手機(jī)或pad都可以（android、ios、windowsphone都可以），Android還可以嘗試模擬器。

2. 軟件環(huán)境

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

移動(dòng)設(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. 注冊(cè)DeviceOne開發(fā)者賬戶

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

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

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

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

下載地址是http://docs.deviceone.net/ 平臺(tái)—>下載中心

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

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

1. 新建應(yīng)用

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

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

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

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

我們?cè)傩薷囊幌耰ndex.ui.js源代碼，把Hello World改成Hello DeviceOne。在js文件里可以修改應(yīng)用運(yùn)行的邏輯。

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

最新評(píng)論