APP封装从一门开始
一门提供APP封装底层开发框架,一键在线APP封装,200+原生APP模块,2000+JS映射接口按需自助封装

h5开发的app调用原生安卓

在H5开发中,有时候需要调用安卓原生的功能,比如调用摄像头、调用相册、获取地理位置等等,这时候就需要用到H5与原生安卓的交互。本文将详细介绍h5开发的app如何调用原生安卓的方法。

**一、原理**

在WebView中加载一个网页,等于在安卓应用程序中内嵌一个浏览器,可以在页面中加载html、css、js等前端技术所编写的内容。此时,H5与原生安卓调用原生功能的方法基于安卓提供的js调用原生方法的接口,通过js与安卓原生相互传递参数与调用,进而实现页面中native与web页面的互相调用、互相传参。

**二、详细介绍**

1.在安卓的MainActivity中指定WebView的加载页面

```

webView.loadUrl("http://www.baidu.com/");

```

2.在H5调用安卓方法前需要先将要调用的方法绑定给WebView

```

//定义一个类,继承自 WebViewClient

public class MyWebViewClient extends WebViewClient {

//设置 WebViewClient 并打开 JS 支持

@Override

public void onPageFinished(WebView view, String url) {

super.onPageFinished(view, url);

webView.loadUrl("javascript:window.android_obj.getSource("

+ "document.body.innerHTML);");//定义JS接口

}

}

//注册方法并为其命名(可自定义)

webView.addJavascriptInterface(this, "android_obj");

webView.setWebViewClient(new MyWebViewClient());

//开启 Javascript 支持

webView.getSettings().setJavaScriptEnabled(true);

```

3.在H5页面中调用安卓原生方法

```

//通过 window.android_obj 引用已经绑定的 getPic 方法

window.android_obj.getPic();

```

4.在安卓中编写具体的JS接口实现类

```

//绑定 JS 接口

webView.addJavascriptInterface(new AndroidJSInterface(), "android_obj");

// JS 接口实现类

public class AndroidJSInterface {

//获取当前的网页源码

@JavascriptInterface

public void getSource(String html) {

Log.e("html", html);

}

//打开相机

@JavascriptInterface

public void openCamera(){

Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);

startActivityForResult(intent, 0);

}

}

```

**三、注意事项**

1.在H5调用安卓原生方法时,需要默认在主线程中执行。

2.使用addJavascriptInterface绑定JS接口实现类时,需要为该类所在的包添加注解 @JavascriptInterface。

3.在Android 4.2(API 17)之后,默认不允许在js中调用原生方法,需要在WebView中开启此功能。开启方式为:在WebView中用getSettings()获取WebSettings对象,并通过setJavaScriptEnabled(true)的方式设置开启JS功能。

4.为保证安全性,在H5页面调用原生方法时,需要认真审核并确认方法所传递的参数的充分性、正确性,避免注入等不安全行为的发生。

**四、总结**

综上所述,通过WebView可以实现H5与原生安卓的交互,使得应用程序在满足前端UI美观性的同时,同时调用安卓原生功能,进而增强应用的可用性。同时,在实现过程中,我们还需要认真审核所传递的参数的充分性、正确性,使得应用程序更加安全可靠。


相关知识:
制作h5的手机app有哪些
H5手机app是指通过HTML5技术在移动设备上开发的应用程序。与原生应用程序相比,H5手机app具有较好的跨平台适配性,可以在不同的移动操作系统上运行,同时开发成本也较低。本文将介绍几种制作H5手机app的方法和工具。1. 使用框架我们可以使用一些H5手
2023-05-26
什么是h5打包app
H5打包APP,顾名思义就是将基于H5技术开发的Web应用程序打包成一个本地化的APP应用程序,让用户可以通过APP的方式来访问使用。随着移动互联网的发展,越来越多的企业和开发者开始尝试使用H5打包APP的方式来推广自己的产品和服务,从而获得更大的市场份额
2023-05-26
免费h5制作app游戏
H5制作app游戏,可以说是未来游戏的一个趋势,因为它不需要用户下载安装,只需要在浏览器中打开即可,具有开发成本低、更容易传播等优点。现在已经有很多免费的H5游戏制作平台,下面我将介绍其中比较优秀的几款。一、EasyAREasyAR是一款基于AR技术的H5
2023-05-26
可以做h5的app
H5(HTML5)是一种基于Web技术的开放标准,可以用来创建现代化的网页应用程序。H5程序的开发和维护成本较低,并且可以在多个平台和设备上运行。因此,在移动应用程序市场中,H5应用程序变得越来越流行。本文将探讨如何使用H5技术构建原生应用程序(App)。
2023-05-26
h5做的app有什么
随着移动互联网的普及,越来越多的网站和企业开始构建自己的移动app。过去,开发app需要使用Java或Objective-C等编程语言,这对于非专业开发者而言门槛较高。近年来,HTML5技术的发展满足了很多业务场景的需求,使得用H5开发app逐渐成为了一种
2023-05-25
h5制作安卓app
H5是指HTML5,是一种用于编写Web页面的标准语言。在移动互联网时代,HTML5被广泛用于移动App的开发中。通过H5技术,可以制作出类似原生App的应用,这类应用被称为H5 App,也叫Web App。本文将介绍如何使用H5技术制作安卓App的方法和
2023-05-25
h5有悬浮窗打包的app没有
H5作为一种网页开发技术,其具有可移植性和压缩性等优势,已经被广泛的应用于网页、移动网页的开发,以及一些桌面应用、小游戏、微信公众号等领域。但是,如果想要将H5页面变为APP应用的话,需要进行打包处理。而悬浮窗是APP应用中常用的交互方式之一,那么是否有悬
2023-05-25
h5页面制作app吗
H5页面是基于HTML、CSS、JavaScript等web前端技术实现的交互页面,它在移动Web应用开发中得到了广泛的应用。相比于原生的移动应用,H5页面具有跨平台、开发成本低、易于维护等优点,因此在移动应用开发领域也得到了许多的关注。在App开发中,H
2023-05-25
h5混合开发app视频
H5混合开发App是一种将Web技术与Native应用程序相结合的应用程序开发方式。H5混合开发App是一种自适应的方案,可以在一个代码库中开发应用程序,并将它们同时部署到iOS和Android等移动平台上。它可以让应用程序开发者通过使用HTML、CSS和
2023-05-25
h5 app开发demo
H5 APP是指基于HTML5技术开发的APP,可以跨平台运行。它具有轻量、易开发、易维护的特点,并且能够适应不同设备的分辨率和屏幕尺寸。下面是H5 APP开发的一个简单DEMO,介绍其原理和详细步骤。一、实现效果H5 APP Demo主要实现以下功能:1
2023-05-25
h5 网页 打包 app
H5网页的打包成APP实现了将其运行于移动设备上的功能,使网站App的开发成本和开发周期减少,从而更快地推出产品。对于拥有维护团队和技术实力的网站、电子商务或游戏公司,这种方式是一个不错的选择。本文将介绍H5网页打包成APP的原理和实现。一、原理在介绍H5
2023-05-25
app内h5做成类似小程序
在移动互联网时代,APP已成为各大企业客户端的标配。为了提升用户体验,很多APP开始探索将H5页面嵌入到APP中,从而打造出更加丰富的页面效果。而将APP内H5页面做成类似小程序的效果,可以进一步提升用户体验,本文将介绍实现小程序化的原理和方法。1. 原理
2023-05-25
©2015-2021 一门APP yimenapp.com  川公网安备 51019002001185号 蜀ICP备17005078号-3