JavaScript使用DeviceOne開發(fā)實戰(zhàn)(一) 配置和起步
2015 年 9 月 底,DeviceOne Release發(fā)布。至此,DeviceOne 基本完成了對多端的支持?;?DeviceOne 可以:
HTML5、Android、iOS、Windows 多端代碼一次編寫,各處復用;
實時簡單部署。
本地化UI
在接下來的時間,我會通過一系列文章來介紹 DeviceOne。本文介紹環(huán)境配置以及如何建立一個簡單的項目。(注:本篇文章 iOS 和 Android和Windows 開發(fā)都適用。)
目前使用 DeviceOne 開發(fā)可以在Windows 或者 Mac 系統(tǒng)進行。
下面介紹下DeviceOne環(huán)境搭建,不管是應用開發(fā)還是組件開發(fā),都需要搭建開發(fā)環(huán)境,只需要3分鐘就可以完成。
1. 硬件環(huán)境
PC電腦或MAC電腦一臺用于開發(fā)
移動設備一臺用于調(diào)試和測試,手機或pad都可以(android、ios、windowsphone都可以),Android還可以嘗試模擬器。
2. 軟件環(huán)境
操作系統(tǒng)(MAC或Windows都支持)
Windows: 7 以上操作系統(tǒng)。
MAC:10.9 以上
移動設備:
Android : 4.0以上操作系統(tǒng)
IOS : 7.0 以上操作系統(tǒng)
WinPhone :8.1 以上操作系統(tǒng)
JDK:1.7版本及以上
3. 網(wǎng)絡環(huán)境
外網(wǎng)環(huán)境:很多功能都需要有外網(wǎng)才能進行,App的開發(fā)和調(diào)試可以離線進行。
4. 注冊DeviceOne開發(fā)者賬戶
要想使用DeviceOne開發(fā)應用,首先需要在www.deviceone.net上注冊一個自己的開發(fā)者賬號,注冊的地址是 注冊
5. 下載設計器(IDE)
用戶需要下載和使用DeviceOne提供的設計器(IDE)來開發(fā)移動應用,設計器提供所見即所得的方式來構建UI,提供代碼編輯器來編寫標準的javascript或lua的邏輯腳本代碼,使用設計器提供的即時調(diào)試功能和真機移動設備互動調(diào)試應用,最后通過設計器提供的打包功能來發(fā)布最終應用。
設計器目前包含2個大的版本,一個是基于Eclipse RCP的版本,一個是自己開發(fā)的只支持Windows的版本。我們推薦大家使用基于Eclipse的版本。
下載地址是http://docs.deviceone.net/ 平臺—>下載中心
安裝設計器,直接找到剛才下載好的zip文件。解壓到您相應的位置。本設計器是免安裝綠色版,Windows的版本直接到解壓好的文件路徑下找到DoStudio.exe,雙擊打開。Mac版本解壓后直接雙擊dostuio.app就可以啟動。在啟動的過程中可能會碰到一些問題,可以參考新版設計安裝和啟動問題整理
開發(fā)環(huán)境搭建完成后,我們開始嘗試開發(fā)第一個DeviceOne移動應用,下面一步步介紹一下Hello DeviceOne應用的構建方法
1. 新建應用
首先打開設計器,點擊新建項目,新建項目需要聯(lián)網(wǎng),輸入用戶密碼驗證碼后登陸。但是創(chuàng)建完之后是支持離線開發(fā)和調(diào)試的。
在彈出的對話框中填寫新建項目的名稱并選擇編寫程序想要使用的前端腳本語言,目前可以選擇JavaScript和Lua兩種,還可以配置基本項目模板,包含空頁面模板,帶listview的模板等等,還可以配置屏幕分辨率,都配置好后點擊確定按鈕,會自動生成一個工程項目
我們可以看到設計器主頁面如下圖,我們可以在設計器里左側(cè)工程導航區(qū)樹上看到所有代碼,其中app.js是整個程序的入口,類似于其它開發(fā)語言的main函數(shù)。更多的文件結構介紹請參考“DeviceOne應用結構”文檔。設計器的詳細說明可以參考“設計器使用指南”文檔。
我們可以嘗試在“控件列表”里拖拽一個Label組件到index.ui文件對應的“視圖設計”,設置Label的背景顏色為綠色。視圖設計可以所見即所得的拖拽和設置一個界面元素的基本屬性和專有屬性。
我們再修改一下index.ui.js源代碼,把Hello World改成Hello DeviceOne。在js文件里可以修改應用運行的邏輯。
以上所述就是本文給大家介紹的JavaScript使用DeviceOne開發(fā)實戰(zhàn)(一) 配置和起步的全部內(nèi)容,希望大家喜歡。下篇文章給大家介紹JavaScript使用DeviceOne開發(fā)實戰(zhàn)(二) 生成調(diào)試安裝包,請各位朋友繼續(xù)關注,喜歡的朋友直接點擊了解詳情。
- DeviceOne 讓你一見鐘情的App快速開發(fā)平臺
- JavaScript使用DeviceOne開發(fā)實戰(zhàn)(四)仿優(yōu)酷視頻應用
- JavaScript使用DeviceOne開發(fā)實戰(zhàn)(三)仿微信應用
- JavaScript使用DeviceOne開發(fā)實戰(zhàn)(二) 生成調(diào)試安裝包
- 微信小程序 wx.uploadFile無法上傳解決辦法
- 微信小程序 input輸入框控件詳解及實例(多種示例)
- 微信小程序中使元素占滿整個屏幕高度實現(xiàn)方法
- 微信小程序 Windows2008 R2服務器配置TLS1.2方法
- 微信小程序 textarea 詳解及簡單使用方法
- 使用DeviceOne實現(xiàn)微信小程序功能
相關文章
JavaScript中使用typeof運算符需要注意的幾個坑
這篇文章主要介紹了JavaScript中使用typeof運算符需要注意的幾個坑,本文總結了4個使用typeof運算符要注意的問題,需要的朋友可以參考下2014-11-11基于JavaScript實現(xiàn)繼承機制之構造函數(shù)+原型鏈混合方式的使用詳解
本篇文章是對構造函數(shù)與原型鏈混合方式的使用進行了詳細的分析介紹。需要的朋友參考下2013-05-05JS正則匹配URL網(wǎng)址的方法(可匹配www,http開頭的一切網(wǎng)址)
這篇文章主要介紹了JS正則匹配URL網(wǎng)址的方法,可實現(xiàn)匹配www,http開頭的一切網(wǎng)址的功能,涉及JS正則匹配字符串、數(shù)字及特殊字符構建URL的操作技巧,需要的朋友可以參考下2017-01-01js實現(xiàn)左側(cè)網(wǎng)頁tab滑動門效果代碼
這篇文章主要介紹了js實現(xiàn)左側(cè)網(wǎng)頁tab滑動門效果代碼,涉及JavaScript頁面元素的遍歷及元素屬性動態(tài)切換的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09JS實現(xiàn)pasteHTML兼容ie,firefox,chrome的方法
這篇文章主要介紹了JS實現(xiàn)pasteHTML兼容ie,firefox,chrome的方法,涉及javascript針對頁面元素的動態(tài)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06JavaScript使用readAsDataURL讀取圖像文件
這篇文章主要為大家詳細介紹了JavaScript使用readAsDataURL讀取圖像文件的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05