用安卓 WebView 做一个“套壳”应用

Android 如何利用WebView组件APP 有时候我们工作中很多项目并不会去专门一个APP端,但是,我们却又需要这么一个APP端。这个时候WebView就可以很方便的帮助我们快速一个APP程序 阅读详情

前言

目前手机应用市场上的 APP 类型主要为以下两种:

  • Native App(原生应用):直接针对平台(Android、iOS 等手机系统)进行开发,属于性能最优的方案,也是开发成本最大的方案。

  • Hybrid App(混合应用):即为原生 WebView 加 HTML5 网页内容的形式。只需要开发一套 HTML5 业务逻辑,就可以同时运行在不同的平台上,相对比较灵活,内容可以快速更新,开发维护成本较低。最大的缺点就是性能远不及原生应用,交互上也做不到原生的那么自然。

React Native 和 Weex 之类的框架不是本文讨论的主题,这里就不展开了。

本文主要讲解如何制作一个安卓原生的“壳”来加载我们的 H5 网页,最终实现一个简单的 Hybrid App(套壳应用)。

文中创建的示例项目已上传至码云,在文章底部传送门处获取


正文

本文不涉及到复杂的 Android 与 Java 知识,小朋友不需要在家长的陪同下也能观看 😉

1. 创建安卓项目

创建安卓项目需要用到 Android Studio,关于如何安装 Android Studio 可以阅读官方文档。

安装 Android Studio:https://developer.android.com/studio/install

1.1 创建新项目

首先打开 Android Studio,点击 Start a new Android Studio Project(创建一个新的 AS 项目)

1.2 选择项目模板

项目模板这里我们选择 Empty Activity(空白活动),点击 Next(下一步)

1.3 项目配置

来到项目配置页面,分别设置好以下选项:

  • Name:应用名
  • Package Name:包名
  • Save Location:项目保存路径
  • Language:项目使用的编程语言
  • Minimum SDK:最低兼容 SDK 版本

这里语言选择 Java(因为我没写过 Kotlin 😂),而最低 SDK 则选择了 API 23(示例用随便选的 😕),配置完成后点击 Finished(完成)

至此我们已经完成了项目的创建,接下来让我们正式开始我们今天的主题。

2. 开发套壳程序

2.1 添加 WebView 布局

修改 app/res/layout/activity_main.xml 文件,去掉原有的 TextView 标签,添加一个 WebView 标签并保存。

添加的代码如下:

<!-- 展示一个 WebView -->
<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

在 Android 工程中,app/res/layout/ 目录主要用于存放定义用户界面布局的 XML 文件。

上文提到的 activity_main.xml 即为应用主界面的布局文件。

2.2 在入口处创建 WebView 实例

选择 app/java/{创建项目时指定的包名}/ 目录下的 MainActivity.java 文件(我这里是 app/java/example/webviewdemo/MainActivity.java)。

随后在 MainActivity.java 文件中添加一个 createWebView 函数(不要忘记导入用到的包),并在生命周期 onCreate 中调用该函数,来创建一个 WebView 实例并对其进行配置。

MainActivity.java 完整代码如下:

package com.example.webviewdemo;

import androidx.appcompat
安卓 WebView 及调用文件上传功能 安卓 WebView 调用文件上传目录概述将网页封装进app添加 WebView 布局在入口处创建 WebView 实例添加联网权限修改网址解决webview文件上传问题 概述 在最近我的项目中,需要一个在手机APP中上传照片的功能,由于之前已经写好了一个上传照片的网页端,因此决定直接用webview封装我好的网页,实现一个app。 等封装成功后却遇到了一个问题,那就是在网页上功能正常的上传文件按钮到了webview里却点不动,没有什么反应,后来经过各种学习解决了这个问题。 造成这个问题的原因: 阅读详情

相关推荐

Vue项目安卓webview项目记录

第五步创建的assets目录其实就是指路径file:///android_asset/,后边的 dist/index.html 就是要访问的文件地址。实例化我们的StatusBar类,然后填写参数,将我们当前界面的activity和想要设置的颜色color传进去,即可大功告成。Android状态栏的设置要在版本5.0以上,所以我们的方法需要对手机SDK版本进行判断。这里我们需要编写两个初始化方法:一个是设置颜色,一个隐藏状态栏,满足不同界面的需求。在我们的MainActicity中调用该方法就行,

jimson_zhu的博客 2179

安卓 WebView 一个APP安卓混合开发、安卓hybrid App安卓H5开发

Hybrid App(混合应用):即为原生 WebView 加 HTML5 网页内容的形式。只需要开发一 HTML5 业务逻辑,就可以同时运行在不同的平台上,相对比较灵活,内容可以快速更新,开发维护成本较低。最大的缺点就是性能远不及原生应用,交互上也不到原生的那么自然。 目前非常多的电商或应用APP,只有8Mb这么小,本质就是使用了业务,里面是html5的界面。 如果在制造业企业里面,可以开发内部使用,如平板在现场数据录入、条码扫描业务,非常方便。 提供源代码,在多个项目使用。

用原生webView开发的安卓

用原生webView开发的安卓

各种类型沉浸式状态栏(图片或纯色),结合各种WebView,Fragment和Activity的沉浸

图片状态栏+彩色导航栏,全屏图片,访QQ状态栏和标题栏渐变色,结合侧滑返回,fragment,Dialog,Tablayout,WebView和Activity结合使用等,以及讲解和解决白色状态栏的原因

一次安卓WebView应用开发记录

一次安卓WebView应用开发记录。

jimson_zhu的博客 2760

用HBuilderX打包webapph5

用HBuilderX打包webapp,把网址打包到app里面

maohangfei.cn 1353

android webview 铺满_用安卓 WebView 一个应用

前言目前手机应用市场上的 APP 类型主要为以下两种:Native App(原生应用):直接针对平台(Android、iOS 等手机系统)进行开发,属于性能最优的方案,也是开发成本最大的方案。Hybrid App(混合应用):即为原生 WebView 加 HTML5 网页内容的形式。只需要开发一 HTML5 业务逻辑,就可以同时运行在不同的平台上,相对比较灵活,内容可以快速更新,开发维...

weixin_39918682的博客 801

安卓 WebView 一个Cocos Creator“应用

前言目前手机应用市场上的 APP 类型主要为以下两种:Native App(原生应用):直接针对平台(Android、iOS 等手机系统)进行开发,属于性能最优的方案,也是开发成本最大的...

奎特尔星球 2372

webview的简单介绍和手写一个H5webview

1.webview是什么?作用是什么?和浏览器有什么关系? Webview一个基于webkit引擎,可以解析DOM 元素,展示html页面的控件,它和浏览器展示页面的原理是相同的,所以可以把它当浏览器看待。(chrome浏览器也是基于webkit引擎开发的,Mozilla浏览器是基于Gecko引擎开发的) Android的Webview在低版本和高版本采用了不同的webkit版本内核,4.4...

双眸 1810

Android应用源码适合的简易浏览器

本例子是一个简单的安卓浏览器项目源码,如果你已经搭建了一个适合手机浏览的服务端网站比如公司主页等,完全可以把这个源码当作外一个属于自己的“客户端”,也就是安卓客户端的子实际上是放了一个浏览器用来直接浏览web内容,点击手机的物理返回键可以返回到上一次浏览的界面。源码有比较丰富的注释,比较适合用来学习WebView控件使用或者一个简单的客户端,第一次自动打开的页面和点击右上角小房子按钮转转跳到的链接都可以在MainActivity里面指定,其他情况看截图或者看源码吧,编译版本4.0.3编码GBK

android textview 显示html方法解析

现在网络的繁盛时代,光文字是不能满足人们的胃口的,图片,flash,音频,视频就成为浏览网页的主流显示,在手机上也一样,本文将详细介绍此功能的实现方法

用原生安卓 一个APP、混合开发、安卓H5开发

Hybrid App(混合应用):即为原生 WebView 加 HTML5 网页内容的形式。只需要开发一 HTML5 业务逻辑,就可以同时运行在不同的平台上,相对比较灵活,内容可以快速更新,开发维护成本较低。最大的缺点就是性能远不及原生应用,交互上也不到原生的那么自然。 目前非常多的电商或应用APP,只有8Mb这么小,本质就是使用了业务,里面是html5的界面。 1)可以使用 原生安卓+WebView 一个APP 2)Flutter外的生成方法,可以使用插件flutter_webview

weijia3624的专栏 1万+

WebView实战

WebView实战经验分享前言WebView的初级使用WebView对象的创建WebSettings我们需要设置些什么WebSettings是什么WebSettings有那些需要关注的项目基础WebViewClient我们需要关注那些问题基础WebChromeClient我们需要关注那些问题加载远程Url加载本地的Url使用WebView关注的一些问题如何避免WebView内存泄漏我们应当如何...

木木baby的博客 2522

鸿蒙6/鸿蒙NEXT WebViewAPP源码

升级到鸿蒙NEXT后,原有WebView应用无法调用相机上传图片,只能从相册选择。由于鸿蒙对H5文件选择了权限限制,需要原生拦截处理。为解决该问题,基于ArkTS开发了一个原生WebView模板,实现拍照/相册上传,并支持一行URL快速打包网页为鸿蒙APP

qq_42865445的博客 1220

将vue项目打包通过webview为Android项目

事情是这样的,要在pad端一个可展示数据的应用程序,因为原有项目是vue项目,且不需改动,所以将Vue项目打包,通过安卓项目访问离线文件即可。

SunMoon_444的博客 4543

一个简单微博App

基于hexo搭建的博客我选择的是yilia主题,这个主题对于手机端也提供了很好的支持(其实大部分主题都提供了支持),所以我就想着能否用Android编程中的WebView来进行一个简单的微博APP的开发,写完了发现还是非常简单的。 创建WebView 首先需要在MainActivity.java中创建一个WebView用以打开html网页。代码如下: private WebView webView...

LF21011501的博客 882

安卓开发APP

1、新建项目 2、选择Empty Activity 3、打开主界面activity_main.xml,在里面放一个WebView 代码如下 <WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height...

小斐的专栏 6750

Android安卓自带的 WebView 浏览器内核更新

Android 安卓自带 WebView 浏览器内核更新教程

aken 8万+
上一篇: 互联网运营术语扫盲
下一篇: 在 Cocos Creator 里画个炫酷的雷达图
文弱书生陈皮皮
博客等级 码龄9年 164粉丝 40原创
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值