Android使用WebView打包网页成app

原生app的开发成本和网页相比相对较高,所以越来越多的app使用网页来作为界面,甚至完全将一个网站封装成app,可以提高开发速度,还能基本实现跨平台。

下面以Android为例,在ubuntu-14.04.4-desktop-amd64环境实现一个简单的WebView封装网站成app的过程。

环境准备

开发环境需要Java SDK(官网下载),Android SDK(官网下载)。

Java SDK安装

wget http://download.oracle.com/otn-pub/java/jdk/8u91-b14/jdk-8u91-linux-x64.tar.gztar -x -f jdk-8u91-linux-x64.tar.gz

然后配置PATH路径及JAVA_HOME

vi ~/.bashrc

在最后添加

export JAVA_HOME=JDK解压目录
export CLASSPATH=.:$CLASSPATH:$JAVA_HOME/lib
export PATH=$PATH:$JAVA_HOME/bin

保存退出vi,刷新配置

source ~/.bashrc

Android SDK安装

ps:安装过程中可能需要梯子,请自备。

wget https://dl.google.com/android/android-sdk_r24.4.1-linux.tgz
tar -x -f android-sdk_r24.4.1-linux.tgz
cd android-sdk-linux/tools

先看一下有哪些sdk版本可以安装

./android list sdk

然后安装需要的sdk版本

./android update sdk --no-ui --filter 用逗号分隔需要安装的序号

项目建立及代码编写

在任意地方新建一个目录,保存这个项目,然后新建一个src目录,用于存放源文件。因为Java有包的概念,所以进入src目录后,根据包名的层次,依次建立相应目录,然后新建Java源程序文件,比如:

 1 package test.android;
 2
 3 import android.app.Activity;
 4 import android.os.Bundle;
 5 // import android.app.AlertDialog;
 6 import android.view.Window;
 7 // import android.view.WindowManager;
 8 import android.view.KeyEvent;
 9 import android.webkit.WebView;
10 import android.webkit.WebViewClient;
11 //import android.webkit.WebChromeClient;
12 // import android.webkit.JsResult;
13 // import android.content.DialogInterface;
14 // import android.content.DialogInterface.OnClickListener;
15
16 public class Main extends Activity {
17   public static final String LOAD_URL = "http://www.baidu.com/";
18
19   private WebView webView = null;
20
21   public void onCreate(Bundle savedInstanceState) {
22     super.onCreate(savedInstanceState);
23
24     //this.requestWindowFeature(Window.FEATURE_NO_TITLE);
25     //this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
26
27     webView = new WebView(this);
28     this.setContentView(webView);
29     webView.setWebViewClient(new WebViewClient() {
30       public void onPageFinished(WebView view, String url) {
31         //webView.evaluateJavascript("test();", null);
32       }
33     });
34     /*
35     webView.setWebChromeClient(new WebChromeClient() {
36       public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
37
38         new AlertDialog.Builder(_this)
39         .setMessage(message)
40         .setPositiveButton("OK", new DialogInterface.OnClickListener() {
41           public void onClick(DialogInterface dialog, int which) {}
42         }).show();
43
44         return true;
45       }
46     });
47     */
48     webView.getSettings().setJavaScriptEnabled(true);
49     webView.addJavascriptInterface(this, "native");
50     webView.loadUrl(LOAD_URL);
51   }
52
53   // overwrite back button
54   public boolean onKeyDown(int keyCode, KeyEvent event) {
55     if (KeyEvent.KEYCODE_BACK == keyCode && webView.canGoBack()) {
56       webView.goBack();
57       return true;
58     }
59
60     return super.onKeyDown(keyCode, event);
61   }
62
63 }

将文件保存为Main.java

回到项目根目录,新建另一个文件,保存为AndroidManifest.xml,内容如下:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <manifest  xmlns:android="http://schemas.android.com/apk/res/android" package="test.android">
 3   <application android:icon="@drawable/icon"
 4                android:label="@string/app_name">
 5     <activity android:name=".Main">
 6       <intent-filter>
 7         <action android:name="android.intent.action.MAIN" />
 8         <category android:name="android.intent.category.LAUNCHER" />
 9       </intent-filter>
10     </activity>
11   </application>
12 </manifest>

在项目根目录新建res目录,在res内新建drawable和values目录。

在values内新建xml文件strings.xml,内容如下:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <string name="app_name">资源测试</string>
  <string name="web_url">http://www.baidu.com</string>
</resources>

然后将需要的程序图标拷入drawable目录,文件名为icon.png

编译

先切换到项目目录。

首先要编译资源,在项目根目录创建gen目录,保存生成的R.java资源编号,在控制台输入以下命令:

/opt/android-sdk-linux/build-tools/24.0.0/aapt package -f -m -J gen -S res -I /opt/android-sdk-linux/platforms/android-24/android.jar -M AndroidManifest.xml

编译java源文件时,加入R.java源文件:

javac -encoding utf-8 -source 1.6 -target 1.6 -bootclasspath /opt/android-sdk-linux/platforms/android-24/android.jar -d bin/classes src/test/android/Main.java gen/test/android/R.java
时间: 2024-12-05 00:24:45

Android使用WebView打包网页成app的相关文章

Android中WebView获取网页中标题 ,内容, 图片的方法

如题,在Android中WebView获取网页中标题 ,内容, 图片的方法 首先是获取标题,在new WebChromeClient(){}中重写onReceivedTitle()方法 @Override public void onReceivedTitle(WebView view, String title) { super.onReceivedTitle(view, title); // loge.e("__页面标题__"+title); } 获取内容,是参考的这边的 http

Android使用WebView显示网页(图片缩放)

上周写了一篇关于webview的博文:Android使用WebView显示网页(图片大小的处理及内容的自适应) 后来通过自己想的第三种办法实现了图片的适配,方法是设置html的img标签属性,把图片的宽度设置为设备屏幕的宽度,涉及的知识点就是,获取设备宽度值.java代码 添加/修改 html标签属性. 1. 获取设备屏幕信息: /** * 获取设备的屏幕信息 * @param activity * @return */ public static DeviceInfo getDevicesPi

Android使用WebView显示网页

在Android开发过程中,会遇到需要显示网页的需求,或者需要用webview控件来达到某个效果.我这段时间在做CSDN博客的客户端,使用webview来显示博文内容,一是因为解析博文内容再适配比较麻烦,并且效果很不理想,后来想到直接用webview来显示,将博文原汁原味的呈现出来. webview使用起来比较容易,但是想要达到比较理想的效果还需要很多摸索.我做的CSDNBlog客户端,现在基本可以使用,已经在进行版本迭代了,但是博文的webview显示效果依然不太满意,主要是因为图片的缩放问题

MAC打包python3成app

注意:所有操作,都最好切换到代码所在目录 1.安装py2app pip3 install py2app 2.生成setup文件 py2applet --make-setup xxx.py 3.打包 #自己开发,打包速度快.(因为本机安装了依赖库,所以可以直接运行) python setup.py py2app -A #给其他没有sdk的电脑使用,包括lib库.(没有安装sdk的电脑使用,需要去掉-A,将把所有的依赖全部打包.) python setup.py py2app 原文地址:https:

Android应用安全开发之浅谈网页打开APP

一.网页打开APP简介 Android有一个特性,可以通过点击网页内的某个链接打开APP,或者在其他APP中通过点击某个链接打开另外一个APP(AppLink),一些用户量比较大的APP,已经通过发布其AppLink SDK,开发者需要申请相应的资格,配置相关内容才能使用.这些都是通过用户自定义的URI scheme实现的,不过背后还是Android的Intent机制.Google的官方文档<Android Intents with Chrome>一文,介绍了在Android Chrome浏览

HBuilder初探——强大的提示符及纯网页打包成APP

之前做手机页面,只是时效短.更新度高的零星几个,供APP内嵌调用.比如抽奖嘛.活动宣传啦. 现在的公司,不知是不是不知者无畏,整一个app全部用html5来实现,包括头部导航条.客户端只需封装一下,打个包就OK.实现的方式是网页放在服务器,像从浏览器访问一下,客户端只是充当一个浏览器的角色.这种方式app store应该是不允许的吧.但所做的只是供医院内部人员使用的一个项目,能实现在线学习课程.报名.考试.签到.查房.论文申报等功能就OK. 得知HBuilder这个东东,还是从客户口里听来的,他

android 使用webview加载网页问题

我在做图片站http://www.mimi199.com时要将其移动站打包成app, 我使用的是webview来加载网页(本来想使用phonegap来做来,但是还是太麻烦了), 具体代码如下: protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState); WebView webView=new WebView(this);         webView.loadU

ThingsBoard 前端打包成 App 的方法

欢迎大家加入thingsboard 二次开发讨论群:121202538 ThingsBoard私有化部署之后,不免存在在手机上查看各仪表盘的需求.手机上虽然可以浏览器访问网址,但对用户而言不够专业.体验较差,因此有需要提供一个专门的App,来实现管理或查看功能. 对于这个App,存在两种方案:一是开发全新的App,通过调用ThingsBoard的API实现相应功能,该方法是完全的Native开发模式:二是将ThingsBoard的UI打包,以App的形式内置网页方式的浏览.前一种方式成本较高.周

Android:控件WebView显示网页

WebView可以使得网页轻松的内嵌到app里,还可以直接跟js相互调用. webview有两个方法:setWebChromeClient 和 setWebClient setWebClient:主要处理解析,渲染网页等浏览器做的事情 setWebChromeClient:辅助WebView处理Javascript的对话框,网站图标,网站title,加载进度等 WebViewClient就是帮助WebView处理各种通知.请求事件的. 在AndroidManifest.xml设置访问网络权限: