首頁 > 開發者 > 手機程式開發

html5 app 簡單一實例

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：html5   html5 app   html5 asserts   

一、編寫一個HTML5 App

下載最新版本的PhoneGap並解壓，我們將使用其中的Android目錄。：https://github.com/phonegap/phonegap/zipball/1.0.0

  • 啟動Eclipse，然後在菜單“File”下選擇“New > Android Project”。
    • 在項目根目錄下，建立兩個新目錄:
      • /libs
      • /assets/www
    • 複製phonegap.js（從PhoneGap解壓縮後的Android目錄中，將解壓縮後的帶版本號碼的js檔案名稱修改為phonegap.js）到/assets/www。
    • 複製phonegap.jar（從PhoneGap解壓縮後的Android目錄中，將解壓縮後的帶版本號碼的jar檔案名稱修改為phonegap.jar）到/libs。
    • 複製xml整個目錄（從PhoneGap解壓縮後的Android目錄中，包括一個plugins.xml）到/res。【v1.0 rc2以上】
    • 對Eclipse的src檔案夾中的主要Java檔案進行少量調整：（如）
      • 將class的繼承由Activity改為DroidGap
      • 將setContentView()替換為super.loadUrl(“file:///android_asset/www/index.html”);
      • 添加import com.phonegap.*;
      • 移除import android.app.Activity;
  • 在這裡你可能會遇到Eclipse找不到phonegap.jar的錯誤。在這種情況下，按右鍵/libs檔案夾找到Build Paths/ > Configure Build Paths。然後在Libraries標籤頁中添加phonegap.jar到項目中。如果Eclipse不是很穩定，你需要點擊F5重新整理一次項目。
  • 按右鍵AndroidManifest.xml並選擇Open With > Text Editor。
  • 將下面的使用權限設定拷貝到versionName之後（這個可以根據APP的具體情況而定）:
    <supports-screens        android:anyDensity="true"        android:largeScreens="true"        android:normalScreens="true"        android:resizeable="true"        android:smallScreens="true" />    <uses-permission android:name="android.permission.CAMERA" />    <uses-permission android:name="android.permission.VIBRATE" />    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />    <uses-permission android:name="android.permission.READ_PHONE_STATE" />    <uses-permission android:name="android.permission.INTERNET" />    <uses-permission android:name="android.permission.RECEIVE_SMS" />    <uses-permission android:name="android.permission.RECORD_AUDIO" />    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />    <uses-permission android:name="android.permission.READ_CONTACTS" />    <uses-permission android:name="android.permission.WRITE_CONTACTS" />    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
      在AndroidManifest的activity標籤中添加 android:configChanges="orientation|keyboardHidden"。    
  • 在 “/assets/www”目錄中建立檔案“index.html”，並粘貼如下代碼：
  • <!DOCTYPE HTML><html><head><title>小地盤</title><script type="text/javascript" charset="utf-8" src="phonegap.js"></script></head><body><h1>你好， 小地盤。</h1></body></html>
  • 最後部署運行程式。


二、測試

MainActivity.java

package com.example.html5test;import android.os.Bundle;import com.phonegap.DroidGap;public class MainActivity extends DroidGap {String url = "file:///android_assets/www/index.html";public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);super.loadUrl(url);}}

測試結果：

修改MainActivity.java

package com.example.html5test;import android.app.Activity;import android.os.Bundle;import android.webkit.WebSettings;import android.webkit.WebView;public class MainActivity extends Activity {WebView mWebView;String url = "file:///android_assets/www/index.html";public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.fragment_main);WebView mWebView = (WebView) this.findViewById(R.id.webid);mWebView.loadUrl(url);WebSettings webSettings = mWebView.getSettings();webSettings.setJavaScriptEnabled(true);}}

修改fragment_main.xml 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context="com.example.html5test.MainActivity$PlaceholderFragment" >    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/hello_world" />    <WebView        android:id="@+id/webid"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="100dp" /></RelativeLayout>

測試結果：

三、引用參考

      http://awebird.com/blog/art/122

      http://awebird.com/blog/art/190

      http://www.csdn.net/article/a/2015-04-21/15823933

      http://blog.csdn.net/kuangshazi515/article/details/7725624

      http://www.cnblogs.com/charley_yang/archive/2011/02/28/1967559.html


     具體問題列出來了，還沒有解決，大牛們一起討論幫忙解決。

html5 app 簡單一實例

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More