Rexsee Hello World - 基於Rexsee項目中心的在線開發入門

時間 2019-11-08

標籤 rexsee hello world 基於項目中心在線開發入門简体版

原文原文鏈接

概覽javascript

做爲開源的Android應用開發平臺，Rexsee提供了接近2000個擴展API，不只簡化了Android原生開發，更支持Web開發者基於標準化Web開發模式，使用HTML、CSS和Javascript快速實現移動應用。php

Rexsee社區目前已提供了所有的擴展API說明與詳細源碼。css

http://www.rexsee.com/html

社區於年初推出在線開發服務，支持開發者在「項目中心」裏在線建立並開發應用。同時更強化了應用的源碼分享。java

本文將細緻講述如何基於Rexsee項目中心，在線實現咱們的第一個Hello World程序。瀏覽器

在Rexsee項目中心建立新項目

登陸Rexsee社區，並進入項目中心（http://www.rexsee.com/project/index.php ），點擊左側頭部的「建立新項目」便可開始我們的Hello World應用建立。安全

1. 應用信息填寫網絡

a) 應用包名：程序的包名，英文字母開頭，能夠包含字母、數字和下劃線。框架

b) 版本信息：應用的版本說明，使用數字和「.」，例如1.5。運維

c) 應用名稱：顯示在手機應用程序列表和手機桌面上的名稱，支持英文或中文。

d) 應用圖標：顯示在手機應用程序列表和手機桌面上的圖標，72x72的png圖片。

2. 選擇擴展組件

3. 基本設置與權限選擇

Rexsee提供了大量的原生功能實現，你能夠結合具體應用的功能在建立時進行勾選。

4. 分享

做爲Rexsee項目中心最爲重要的功能之一，社區鼓勵開發者以開放的形式共享應用，更多的訪問者不只能夠直接下載應用，更能從源碼層面得以瞭解和學習。

系統默認爲分享狀態，即其餘開發者能夠在項目中心查看您的應用。

代碼編寫與調試

項目建立成功後便可進入到開發頁面。在這裏咱們能夠查看到應用的相關屬性以及文件組成。

點擊「編輯」index.html頁面，開始我們的Hello World。

1. Hello World代碼編寫

在index.html頁面中輸入以下代碼

<html>
<head>
<title>Rexsee Hello World</tiltle>
<script type=text/javascript>
//Rexsee代碼從這裏開始
window.onRexseeReady=function(){
  rexseeDialog.toast('系統加載完畢！');//出現後隨即消失效果
}
</script> 
</head>
<body></body>
</html>

代碼說明：

l Rexsee提供的是JS API，能夠在html中加入<script type=text/javascript></script>標籤；也能夠在外部文件中添加JS代碼，而後經過<script type=text/javascript src="你的外部javascript地址">引用；

l 本段代碼中用到了window.onRexseeReady=function（），當系統加載完畢後將會執行{}中的JS語句；

l rexseeDialog.toast()，這行代碼執行時會彈出一個隨即消失的對話框；

l 更多詳細的JS對象和事件說明請在Rexsee社區的「手冊與源碼」中獲取，或者下載Rexsee開發手冊：http://www.rexsee.com/CN/helpReference.php

n 手機在線版手冊：http://www.rexsee.com/rexsee/rexseeReference.apk

n 手機本地版手冊：http://www.rexsee.com/rexsee/rexseeLocalReference.apk

2. 調試

a) 利用Rexsee開發版進行調試

Rexsee開發版是一個專門用於調試Rexsee應用的軟件，在社區的快速入門中已經有所介紹。開發者能夠訪問以下連接，免費下載Rexsee開發版，並安裝在測試用的Android手機，或者模擬器上。

l Rexsee開發版：http://www.rexsee.com/rexsee/rexseeDeveloper-release.apk

l Rexsee模擬器（有點大）：http://www.rexsee.com/rexsee/RexseeEmulator.rar

在開發版的「首頁地址」中輸入程序連接地址，即剛剛建立的index.html頁面地址，就能夠看到程序效果。

b) 直接生成apk應用程序

固然，這只是一個簡單的應用示例，你大可直接編譯生成apk應用程序，安裝並試用便可。（關於如何在線編譯生成apk將在下一章節進行說明。）

3. 進一步嘗試

接下來，咱們讓這段代碼變得複雜一些。

a) 代碼修改和提交

進入個人項目，並點擊「編輯」進入index.html頁面的修改中，將JS代碼調整爲以下內容：

……
//Rexsee代碼從這裏開始
rexseeTitleBar.setStyle('visibility:hidden;');//隱藏系統的標題欄
rexseeStatusBar.setStyle('visibility:hidden;');//隱藏系統的狀態欄
var normalStyle = "";
 normalStyle+="border-width:0;";      //邊框寬度爲零
 normalStyle+="color:#FFFFFF;";       //色彩爲白色
 normalStyle+="background-color:#ffffff+#3399ff/0;";//從白色過渡到藍色
 normalStyle+="font-size:24;";        //字體大小爲24
if (!rexseeMenu.exists('head')){       //設置頭部標籤欄菜單
  rexseeMenu.create('head');		
  rexseeMenu.addItem('head','rexsee:','label:Rexsee Hello World;'+normalStyle);
  }
if (!rexseeTabBars.exists('head')){
  rexseeTabBars.create('head');
  rexseeTabBars.setStyle('head','bar-position:top;padding:0px;');
}                                      //設置頭部標籤欄
if (!rexseeMenu.exists('footer')){     //設置底部按鈕欄菜單
  rexseeMenu.create('footer');
  rexseeMenu.addItem('footer','rexsee:','label:上一頁;');
  rexseeMenu.addItem('footer','rexsee:','label:下一頁;');
  rexseeMenu.addItem('footer','rexsee:','label:退出;');
  }
  if (!rexseeButtonBars.exists('footer')){  //設置底部標籤欄
  rexseeButtonBars.create('footer');
  rexseeButtonBars.setStyle('footer','bar-position:bottom;padding:5px;');
  }
……

代碼說明：

本段代碼新增了標題欄以及菜單佈局，通常有以下幾個步驟完成：

1) 隱藏系統的標題欄：rexseeTitleBar.setStyle('visibility:hidden;');

2) 判斷某個標題欄是否存在，標題欄建立以後在整個應用中會一直存在，因此在建立的時候須要判斷，是否已經存在過此標題欄，防止重複建立：

if (!rexseeMenu.exists('head')) //設置頭部標籤欄菜單

3) 建立一個標籤欄，做爲標籤欄菜單：rexseeMenu.create('head');

4) 向標籤欄菜單中添加標籤：

rexseeMenu.addItem('head','rexsee:','label:Rexsee Hello World;'+normalStyle);

按以下圖片示意中，點擊「提交」便可更新頁面代碼。

和以前介紹的調試方法一致，打開開發版，無需從新載入首頁地址，直接刷新便可打開調整後的應用。