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

android开发h5传参数给app

在移动开发中,经常需要从H5页面向Native APP传递参数。而Android开发中,可以通过以下几种方式实现H5传递参数给APP:

## 1. JavaScript桥接

JavaScript桥接是H5与Native APP之间传递参数的最常用方式。它通过WebView提供的addJavascriptInterface()方法注册一个Java对象来实现通信。在H5中通过JS的window.android对象来调用Java对象的方法,Java对象就可以获取到H5传递的参数。

具体实现步骤:

1. 创建一个继承自Object类的Java对象,并在该对象中定义与H5交互的方法,并注解该方法。

```java

public class JsToAndroid {

Context mContext;

public JsToAndroid(Context c) {

mContext = c;

}

@JavascriptInterface

public void showMessage(String message) {

Toast.makeText(mContext, message, Toast.LENGTH_SHORT).show();

}

}

```

2. 将该Java对象绑定到WebView上

```java

webView.addJavascriptInterface(new JsToAndroid(this), "android");

```

其中第二个参数是H5页面中访问该Java对象的名称。

3. 在H5页面中调用Java对象的方法

```html

```

这样就可以在H5页面中调用Java对象的方法,实现向APP传递参数。

## 2. URL Scheme

URL Scheme是一种将参数附加在Url中的方式。通过调用该Url可以实现启动APP并传递参数的效果。具体实现步骤如下:

1. 定义APP的Url Scheme。

```xml

```

这里我定义了一个叫做“app://”的Url Scheme。

2. 在H5页面中调用该Url Scheme,并附加参数。

```html

打开APP

```

这里将两个参数id和name以键值对的形式附加在Url后面。

3. 在MainActivity的onCreate()方法中获取H5传递的参数。

```java

Intent intent = getIntent();

Uri uri = intent.getData();

if (uri != null && uri.getScheme().equals("app")) {

String id = uri.getQueryParameter("id");

String name = uri.getQueryParameter("name");

//TODO 做相应处理

}

```

这里通过调用Intent的getData()方法获取传递过来的Url,并从Url中获取id和name大家需要的参数。

## 3. Web应用程序接口(WebApp Interface)

对于一些没有太多APP功能的H5页面,可以考虑将其封装成WebApp应用,直接在浏览器中访问,无需安装APP。

具体步骤如下:

1. 在H5页面中使用JavaScript调用app运行的命令,如下所示:

```html

```

2. 在WebView的JavascriptInterface接口方法中拦截该命令,通过Reflect调用当前运行的app方法。

```java

public void invokeNativeMethod(final String call) {

new Handler(Looper.getMainLooper()).post(new Runnable() {

@Override

public void run() {

try {

Class clazz = MainActivity.this.getClassLoader()

.loadClass("com.android.app.MainActivity");

Object instance = clazz.newInstance();

Method method = clazz.getMethod(call);

method.invoke(instance);

} catch (Exception e) {

Log.e(TAG, "Native method invoke failed.", e);

}

}

});

}

```

通过反射加载app中的类、创建实例和调用其对应方法。

总体来说,以上三种方式都能实现将H5页面中的参数传递给APP。选择何种方式要看具体的需求和场景。JavaScript桥接方式使用较多,而URL Scheme则更适用于从H5页面中打开APP的情况。如果需要在浏览器中运行,则可以考虑WebApp Interface。


相关知识:
基于h5开发的app桌面图标在哪
基于 H5 开发的 App 桌面图标是一种基于 Web 技术实现的应用启动方式,通过在浏览器中访问 H5 页面来启动应用程序。这种方式具有轻便、易用、跨平台、开发灵活等优点,已经广泛应用于移动互联网领域。下面详细介绍基于 H5 开发的 App 桌面图标原理
2023-05-26
防城港h5开发app
防城港h5开发app指的是使用HTML5技术构建的跨平台应用程序,它可以在各种设备上运行,包括桌面,手机和平板电脑。本文将从原理和详细说明两个方面介绍防城港h5开发app。原理HTML5技术是一种开放性标准,它代表了最新的HTML标准,并集成了新的Web技
2023-05-25
hbuilder h5 app开发
HBuilder是一款集成开发环境(IDE),专为使用HTML5、CSS、JavaScript创建WebAPP和移动端应用的开发者设计。它提供完整的WebAPP制作解决方案,帮助程序员们轻松地开发出高级应用程序。HBuilder基于HTML5、CSS、Ja
2023-05-25
h5制作app软件有些什么
H5制作app软件指的是通过HTML5技术开发的一类原生应用程序。这种应用程序在手机端可以运营,与原生应用程序相比具有较高的可视化界面、丰富的媒体、良好的交互和可复用性等优势。而实现这些优势的技术包括HTML5、CSS3、JavaScript等。具体地说,
2023-05-25
h5开发苹果app
在苹果App Store上发布应用程序可以增加访问量和销售,许多开发人员都想尝试在该平台上开发应用程序。HTML5作为一种网页开发语言,也可以用于开发iOS应用程序,可以方便开发人员开发,并提供便捷的跨平台功能。本文将详细介绍在苹果App Store中使用
2023-05-25
h5开发app
HTML5开发移动应用是目前非常流行的一种方式,它的特点是开发成本低、跨平台性强、易于维护和更新等。具体来说,HTML5开发移动应用是依托HTML5、CSS3、JavaScript等技术实现的,通过浏览器或封装成原生应用方式运行在移动设备上。首先,HTML
2023-05-25
h5开发版app
H5开发版APP是一种基于HTML5技术的轻量级APP,同时具有与原生APP相当的用户体验和功能。它通过移动端的浏览器来访问网站,具有无需下载、多平台支持、快速上线和易于维护等优势。下面将详细介绍H5开发版APP的原理和实现方法。一、原理H5开发版APP基
2023-05-25
h5开发app视频
HTML5技术已经成为了跨平台开发的标准,随着移动互联网的不断发展,越来越多的应用都需要支持移动设备,因此HTML5也成为了开发移动应用的一种常用技术。在使用HTML5开发移动应用时,我们通常会使用一些开发框架,例如Cordova、PhoneGap等,这些
2023-05-25
h5混合移动app开发
移动应用程序已经成为现代生活中最重要的部分,h5混合移动应用程序是一个创新的解决方案,它将Web和Native应用程序的优点结合在一起。在h5混合应用程序中,主要的界面和操作通过Web技术(HTML,CSS,JavaScript)实现,同时也可以调用本地原
2023-05-25
h5封装app上架苹果商店
在移动应用市场上,苹果商店(App Store)是世界上最大的移动应用市场之一。因此,对于大多数开发者来说,在苹果商店上架应用程序被认为是软件产品成功的重要里程碑之一。而基于web技术的H5应用程序在市场上也越来越普及,这也导致许多开发者想要将H5应用发布
2023-05-25
app用原生开发和h5开发的区别
APP是指应用程序,也就是指设计并制作出来的可以被移动设备适当读取并运行的软件系统。APP的开发有两种主要方式:原生开发和H5开发。原生开发是指将应用程序直接利用操作系统提供的API进行开发,而H5开发则是将应用程序打包成一个Web页面,通过浏览器的解析来
2023-05-25
app h5主流开发工具
随着移动互联网时代的到来,APP、H5逐渐成为商业运营的重要组成部分。基于APP、H5的开发工具也在不断涌现,以下是当前主流的开发工具的详细介绍。一、 React NativeReact Native是Facebook推出的一种基于React.js的移动应
2023-05-25
©2015-2021 一门APP yimenapp.com  川公网安备 51019002001185号 蜀ICP备17005078号-3