? ?首先打開Eclipse，點(diǎn)擊File > New > Worklight Project（如果沒有 Worklight Project，請選擇 File > New > Other > Worklight Project），這樣就打開新建項(xiàng)目的界面了，如圖：

項(xiàng)目命名為FirstProject,其他的都是默認(rèn)，點(diǎn)擊Next,接下來填寫應(yīng)用程序的名字以及選擇要加載的JavaScript庫。如圖：

項(xiàng)目的名字填寫HelloWorld，下面的JavaScript庫的選擇我們就先不選擇，以后手動的添加。然后點(diǎn)擊Finish，就完成了第一個(gè)Project的創(chuàng)建，同時(shí)第一個(gè)應(yīng)用程序HelloWorld也創(chuàng)建完成了。如圖Eclipse中項(xiàng)目的結(jié)構(gòu)：

這些都是Worklight自動生成的文件結(jié)構(gòu)。其中apps下的common文件夾是放置創(chuàng)建應(yīng)用程序所需的所有文件的地方，其中包括 HTML、JavaScript和 CSS 文件。到這里項(xiàng)目和應(yīng)用程序就創(chuàng)建完成了。

? ?接下來是服務(wù)器的啟動，如果想測試你的應(yīng)用程序就必須有一個(gè)Worklight服務(wù)器，這里會有一個(gè)本地的服務(wù)器，我們可以測試創(chuàng)建的應(yīng)用程序。

右鍵單擊項(xiàng)目中的common文件夾 > Run As > Build All and Deploy 如圖：

然后可以看到控制臺打印出成功信息。

現(xiàn)在就可以打開瀏覽器訪問本地服務(wù)器的控制臺了。訪問地址：http://localhost:10080/FirstProject/console/

如圖：

這里我們就可以看到我們的應(yīng)用程序HellWorld了。

? ?接下來我們開發(fā)我的們HelloWorld程序：

首先選擇JavaScript庫，剛才我們創(chuàng)建項(xiàng)目的時(shí)候跳過了這一步，現(xiàn)在手動選擇。這里我們使用的是JQuery mobile。也可以選擇使用 Dojo mobile 或 Sencha Touch 這樣的庫。此外，您還可以使用純 JavaScript 進(jìn)行開發(fā)，重頭開始創(chuàng)建您的應(yīng)用程序。

需要下載的東西有JQuery和JQuery Mobile，我使用的JQuery是jquery-1.7.2.min.js JQuery Mobile是

jquery.mobile-1.3.2。

下載好之后，將以下文件放到common/js文件夾下

jquery-1.7.2.min.js

jquery.mobile-1.3.2.min.js

將以下文件和文件夾放到common/css文件夾下

jquery.mobile-1.3.2.css

jquery.mobile.structure-1.3.2.min.css

jquery.mobile-1.3.2/p_w_picpaths

文件添加完成后開始在HelloWorld.html文件中引用JQuery庫

如圖：

接下來添加模板代碼，也就是JQueryMobile官方提供的文檔代碼

<div data-role="page"><div data-role="header"><h1>Page Title</h1></div><!-- /header --><div data-role="content"><p>Page content goes here.</p></div><!-- /content --><div data-role="footer"><h4>Page Footer</h4></div><!-- /footer --> </div><!-- /page -->

這是一個(gè)簡單的頁面示例，放到body中，如圖：

這樣一個(gè)簡單的應(yīng)用程序就完成了。接下來就是將部署到模擬器上或者真實(shí)的手機(jī)上。

搭建特定設(shè)備的環(huán)境：

右鍵單擊FirstProject > new > Worklight Environment

我選擇的是android，點(diǎn)擊finish之后會有HelloWorld目錄下面會出現(xiàn)android目錄。

這個(gè)就是你的android應(yīng)用程序。（官方說明：Worklight 是使用名為 common 的文件夾中的通用源文件（HTML、CSS 和 JavaScript）以及各自目錄中的特定于平臺的文件（android 適用于 Android 文件，iphone 適用于 iPhone 文件，以此類推）來構(gòu)造的。例如，由于 iOS 和 Android 構(gòu)建將使用 JQuery，所以文件 jquery.js 位于 common/jquery.js 中。如果您擁有一些特定于 iOS 的代碼，則 JavaScript 代碼將位于 ios-plugin.js 中，并將放入 iphone/js/iso-plugin.js 中而非 commonjs/iso-plugin.js 中。Worklight 將確保同步每個(gè)特定設(shè)備環(huán)境中的通用文件。）

在準(zhǔn)備好部署源代碼后，只需右鍵單擊 Android 應(yīng)用程序并選擇 在準(zhǔn)備好部署源代碼后，只需右鍵單擊 Android 應(yīng)用程序并選擇 Run as... > Build All and Deploy

接下來，請右鍵單擊該項(xiàng)目并選擇 Run as.. > Android Application

然后就是在虛擬機(jī)上測試你的應(yīng)用了。

今天就到這里了。

轉(zhuǎn)載于:https://blog.51cto.com/dachengxi/1286362

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的Worklight学习-第一个Worlight项目的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。