混合應用開發 Hello Html5 （一）

時間 2019-11-10

標籤混合應用開發 hello html5 html 欄目 HTML5 简体版

原文原文鏈接

本文是混合應用開發入門教程，若是您不懂原生應用開發，那麼請嘗試混合模式的應用開發。本教程將使用Android、Html5和Cordova進行樣例講解。 html

一，建立開發環境並下載開發包： html5

關於Android開發環境搭建請自行上網查詢，本教程不做講解。 java

使用的相關開發包： android

Android 4.4.2 git
Sencha Touch 2.4.x web
Cordova 3.4.0 apache

二，建立混合應用 app

1，建立Android Project以下圖所示，默認點擊下一步直至完成建立。框架

2，在項目中加入cordova-3.4.0.jar。 ide

3，在res文件夾下建立名爲xml文件夾，接着在xml文件夾下建立名爲config.xml文件，config.xml文件內容以下：

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns     = "http://www.w3.org/ns/widgets"
        id        = "io.cordova.helloCordova"
        version   = "2.0.0">
    <name>Hello Cordova</name>

    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>

    <author href="http://cordova.io" email="dev@cordova.apache.org">
        Apache Cordova Team
    </author>

    <access origin="*"/>

    <!-- <content src="http://mysite.com/myapp.html" /> for external pages -->
    <content src="index.html" />

    <preference name="loglevel" value="DEBUG" />
    <!--
      <preference name="splashscreen" value="resourceName" />
      <preference name="backgroundColor" value="0xFFF" />
      <preference name="loadUrlTimeoutValue" value="20000" />
      <preference name="InAppBrowserStorageEnabled" value="true" />
      <preference name="disallowOverscroll" value="true" />
    -->
    <!-- This is required for native Android hooks -->
    <feature name="App">
        <param name="android-package" value="org.apache.cordova.App" />
    </feature>
</widget>

4,修改MainActivity.java文件，代碼以下：

package code.android.hybrid;

import org.apache.cordova.Config;
import org.apache.cordova.CordovaActivity;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
/**
 * 
 * @author 蔡治平
 * @since 2015-08-12
 *
 */
public class MainActivity extends CordovaActivity {

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		super.init();
		// Load your application
		super.loadUrl(Config.getStartUrl());
	}

}

5，在assets文件夾下建立名爲www的文件夾，建立名爲index.html文件。index.html文件內容以下：

<!DOCTYPE html>
<html>
  <head>
    <title>DEMO</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" >
    <meta name="apple-mobile-web-app-capable" content="yes" >
    <meta name="apple-touch-fullscreen" content="yes" >
  </head>
  <body>
	<h1>Hello Html5!!!</h1>
  </body>
</html>

6，運行該項目，進行測試。到此一個混合應用就建立完畢。若是你熟悉Jquery mobile或者Sencha touth等html5框架，你能夠豐富一下界面。效果圖以下。

三，豐富UI界面

這裏不講述Sencha touch如何使用，有時間會單獨出Sencha touch教程。

四，手機運行效果

五，源碼及安裝包地址：https://git.oschina.net/czpae86/Hybrid-Apps.git