分类导航

HTML5 发布时间：2022-04-25 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了混合应用开发 Hello Html5 （一），大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

本文是混合应用开发入门教程，如果您不懂原生应用开发，那么请尝试混合模式的应用开发。本教程将使用Android、Html5和Cordova进行样例讲解。

一，创建开发环境并下载开发包：

关于Android开发环境搭建请自行上网查询，本教程不作讲解。

使用的相关开发包：

Android 4.4.2
Sencha Touch 2.4.x
Cordova 3.4.0

二，创建混合应用

1，创建Android Project如下图所示，默认点击下一步直至完成创建。

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

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,@L_632_11@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>