天天看點

5分鐘開發一個簡單的基于HTML5的移動應用

首先寫一個config.xml

代碼如下:

<?xml version="1.0" encoding="UTF-8"?>

<widget xmlns = "http://www.w3.org/ns/widgets"

        xmlns:gap = "http://phonegap.com/ns/1.0"

        id = "org.xl.test"

        versionCode = "10"

        version = "1.1.0">

    <name>悠遊旅遊</name>

    <description>

        悠遊旅遊網

    </description>

    <author href="http://www.uu-club.com/" email="[email protected]">

        uuclub

    </author>

    <icon src="icon.png" />

 <icon src="icon.png" gap:platform="android" gap:density="ldpi" />

    <icon src="icon.png" gap:platform="android" gap:density="mdpi" />

    <icon src="icon.png" gap:platform="android" gap:density="hdpi" />

    <icon src="icon.png" gap:platform="android" gap:density="xhdpi" />

    <icon src="icon.png" gap:platform="blackberry" />

    <icon src="icon.png" gap:platform="blackberry" gap:state="hover"/>

    <icon src="icon.png" gap:platform="webos" />

    <icon src="icon.png" gap:platform="winphone" />

    <icon src="icon.png" gap:platform="winphone" gap:role="background" />

</widget>

你如果想用閃屏的話,請參照如下代碼(加入上面的配置檔案中):

<gap:splash src="files/splash/ldpi.png" gap:platform="android" gap:density="ldpi"/>

<gap:splash src="files/splash/mdpi.png" gap:platform="android" gap:density="mdpi"/>

<gap:splash src="files/splash/hdpi.png" gap:platform="android" gap:density="hdpi"/>

<gap:splash src="files/splash/xhdpi.png" gap:platform="android" gap:density="xhdpi"/>

<gap:splash src="files/splash/320_480.png" gap:platform="ios" width="320" height="480"/>

<gap:splash src="files/splash/640_960.png" gap:platform="ios" width="640" height="960"/>

<gap:splash src="files/splash/768_1024.png" gap:platform="ios" width="768" height="1024"/>

<gap:splash src="files/splash/1024_768.png" gap:platform="ios" width="1024" height="768"/>

然後寫一個index.html,就像下面這樣:

<!DOCTYPE html>

<html>

  <head>

    <title>uu-club</title>

  </head>

  <body style="margin:0px;padding:0px">

  <iframe style="border:0;" width="100%" height="100%" src="http://tang5.41.3i60.cn/m/"></iframe>

  </body>

</html>

然後把這兩個檔案和icon.png檔案放在同一個目錄下

然後把這三個檔案壓縮成zip檔案(注意是這三個檔案,不是這三個檔案所在的目錄)

這個zip檔案叫什麼名字無所謂!

如下圖所示:

然後到phonegap網站,注冊一個使用者,使用他們的雲編譯功能

在這裡上傳你的壓縮包

你看到了,他可以編譯成各種不同的移動平台的應用,點安卓的小圖示,就能下載下傳啦!

如果IOS的,你還要有開發者ID才性能。

繼續閱讀