JavaScript使用DeviceOne開發(fā)實(shí)戰(zhàn)(一) 配置和起步
2015 年 9 月 底,DeviceOne Release發(fā)布。至此,DeviceOne 基本完成了對(duì)多端的支持。基于 DeviceOne 可以:
HTML5、Android、iOS、Windows 多端代碼一次編寫,各處復(fù)用;
實(shí)時(shí)簡(jiǎn)單部署。
本地化UI
在接下來的時(shí)間,我會(huì)通過一系列文章來介紹 DeviceOne。本文介紹環(huán)境配置以及如何建立一個(gè)簡(jiǎn)單的項(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)(一) 配置和起步的全部?jī)?nèi)容,希望大家喜歡。下篇文章給大家介紹JavaScript使用DeviceOne開發(fā)實(shí)戰(zhàn)(二) 生成調(diào)試安裝包,請(qǐng)各位朋友繼續(xù)關(guān)注,喜歡的朋友直接點(diǎn)擊了解詳情。
- DeviceOne 讓你一見鐘情的App快速開發(fā)平臺(tái)
- JavaScript使用DeviceOne開發(fā)實(shí)戰(zhàn)(四)仿優(yōu)酷視頻應(yīng)用
- JavaScript使用DeviceOne開發(fā)實(shí)戰(zhàn)(三)仿微信應(yīng)用
- JavaScript使用DeviceOne開發(fā)實(shí)戰(zhàn)(二) 生成調(diào)試安裝包
- 微信小程序 wx.uploadFile無法上傳解決辦法
- 微信小程序 input輸入框控件詳解及實(shí)例(多種示例)
- 微信小程序中使元素占滿整個(gè)屏幕高度實(shí)現(xiàn)方法
- 微信小程序 Windows2008 R2服務(wù)器配置TLS1.2方法
- 微信小程序 textarea 詳解及簡(jiǎn)單使用方法
- 使用DeviceOne實(shí)現(xiàn)微信小程序功能
相關(guān)文章
JS實(shí)現(xiàn)勻速運(yùn)動(dòng)的代碼實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)勻速運(yùn)動(dòng)的代碼實(shí)例,有需要的朋友可以參考一下2013-11-11微信小程序?qū)崿F(xiàn)人臉識(shí)別對(duì)比
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)人臉識(shí)別對(duì)比,此文主要通過小程序?qū)崿F(xiàn)對(duì)比人臉相似度,并返回相似度分值,可以基于分值判斷是否為同一人,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10JavaScript–Apple設(shè)備檢測(cè)示例代碼
JavaScript–Apple設(shè)備檢測(cè)示例代碼。需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-11-11JavaScript中使用typeof運(yùn)算符需要注意的幾個(gè)坑
這篇文章主要介紹了JavaScript中使用typeof運(yùn)算符需要注意的幾個(gè)坑,本文總結(jié)了4個(gè)使用typeof運(yùn)算符要注意的問題,需要的朋友可以參考下2014-11-11基于JavaScript實(shí)現(xiàn)繼承機(jī)制之構(gòu)造函數(shù)+原型鏈混合方式的使用詳解
本篇文章是對(duì)構(gòu)造函數(shù)與原型鏈混合方式的使用進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下2013-05-05JS正則匹配URL網(wǎng)址的方法(可匹配www,http開頭的一切網(wǎng)址)
這篇文章主要介紹了JS正則匹配URL網(wǎng)址的方法,可實(shí)現(xiàn)匹配www,http開頭的一切網(wǎng)址的功能,涉及JS正則匹配字符串、數(shù)字及特殊字符構(gòu)建URL的操作技巧,需要的朋友可以參考下2017-01-01js實(shí)現(xiàn)左側(cè)網(wǎng)頁tab滑動(dòng)門效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)左側(cè)網(wǎng)頁tab滑動(dòng)門效果代碼,涉及JavaScript頁面元素的遍歷及元素屬性動(dòng)態(tài)切換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09JS實(shí)現(xiàn)pasteHTML兼容ie,firefox,chrome的方法
這篇文章主要介紹了JS實(shí)現(xiàn)pasteHTML兼容ie,firefox,chrome的方法,涉及javascript針對(duì)頁面元素的動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06JavaScript使用readAsDataURL讀取圖像文件
這篇文章主要為大家詳細(xì)介紹了JavaScript使用readAsDataURL讀取圖像文件的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05