让网页装进Android手机(将html+css+js打包成Android应用)(简单的)

原创 2015年11月20日 21:52:14

       今晚尝试了一下,将自己简单写的网页(html+css+js)打包成Android应用装进手机。(当然如果网页做得好的话,采用响应式布局,即可在手机上完美展示)

首先创建一个Android项目,在布局文件中加入WebView组件:

activity_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"
    tools:context="com.example.upwebviewtest.MainActivity" >

    <WebView 
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>
很简单的一个布局文件。

可以在Android配置文件中加入如下权限:

<uses-permission android:name="android.permission.INTERNET"/>
将你所写的网页文件拷贝到Android项目中的assets文件夹,如下:


注意:网页的编码格式需与Android项目的编码一致,否则将出现乱码。

再在Android项目的MainActivity.java的onCreate方法中加入:

WebView webview = (WebView) findViewById(R.id.webView1);
		WebSettings wv_setttig = webview.getSettings();
		wv_setttig.setJavaScriptEnabled(true);
		// wv_setttig.setRenderPriority(RenderPriority.HIGH);

		String url = "file:///android_asset/Nav.html";
		webview.loadUrl(url);
注意:html文件中如果引用了css或js文件夹中的文件,需要做类似如下的修改:

<link rel="stylesheet" type="text/css" href="file:///android_asset/css/mycss.css">
<script type="text/javascript" src="file:///android_asset/js/myjs.js"></script>

MainActivity.java

package com.example.webviewtest;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends ActionBarActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		this.getSupportActionBar().hide();
		
		WebView webview = (WebView) findViewById(R.id.webView1);
		WebSettings wv_setttig = webview.getSettings();
		wv_setttig.setJavaScriptEnabled(true);
		// wv_setttig.setRenderPriority(RenderPriority.HIGH);

		String url = "file:///android_asset/Nav.html";
		webview.loadUrl(url);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		// Handle action bar item clicks here. The action bar will
		// automatically handle clicks on the Home/Up button, so long
		// as you specify a parent activity in AndroidManifest.xml.
		int id = item.getItemId();
		if (id == R.id.action_settings) {
			return true;
		}
		return super.onOptionsItemSelected(item);
	}
}

运行Android项目就可以看到网页变成App装进手机啦。


版权声明:本文为博主原创文章,未经博主允许不得转载。

将html文件打包成apk

html打包为apk

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

html5 如何打包成apk,将H5封装成android应用APK文件的几种方法

使用html5+JavaScript开发移动Web App。将其简单封装成APK文件!
  • qqxinxi
  • qqxinxi
  • 2017年05月08日 06:19
  • 4423

html5 如何打包成app(apk)

4、这里介绍两种打包方式:     4.1、PhoneGap  Build Service 打包。     4.2、android SDK +eclispe  打包。 1、需要下载安装MyEc...

把HTML5绚丽的加载效果转换为Android实现

HTML5与CSS3做出来的特效让我很着迷,平时做Android开发,用惯了一些常用的加载进度框,今天看了HTML5的实现方式,于是想自己动手实现一下Android同样的效果,首先我先把HTML5的代...

【转】将HTML5封装成android应用APK 文件若干方法

最近要将手机版的网站封装到apk中,找到了这篇文章,参考下:    作为下一代的网页语言,HTML5拥有很多让人期待已久的新特性。HTML5的优势之一在于能够实现跨平台游戏编码移植,现在已经有很多...

自适应手机屏幕的一段JS代码

今天,在调网页界面的时候,遇到了一个问题,同样的样式,在一个页面上显示效果挺好,另一个无论是字体还是样式布局,都会显得相对的小。经过查找,发现是一段JS代码在“捣鬼”。附上代码: function r...

前端开发APP,从HBuilder开始~

内容简介 介绍目前前端人员开发app的几种方法,具体介绍hbuilder开发app,一扇赞新的大门~ 无所不能的js 最开始js仅仅局限于网页上一些效果,操作网页内容等, 但是node...
  • uikoo9
  • uikoo9
  • 2015年02月03日 16:23
  • 172684

使用HBuilder编辑器将html5页面打包成APP

使用HBuilder编辑器将html5页面打包成APP (ios+安卓) 1.首先先安装HBuilder编辑器。 下载链接:http://www.dcloud.io/ 2.HBuil...

AndroidStudio将html5打包成apk

我想将html5的动画效果打包成手机app,以方便传播。而在android开发的组件中就直接由webview可以访问网页,另外在android工程中,assets文件夹下的内容是不会在被编译的,因此可...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:让网页装进Android手机(将html+css+js打包成Android应用)(简单的)
举报原因:
原因补充:

(最多只允许输入30个字)