Ｈ5与客户端交互的方式有哪些? 怎么做?

先解释一个名词吧 Hybrid, 相信能看到这篇文章的同学对这个词都不会感到陌生, 可能爱恨交叉的感觉会更强烈一些...

回到正题, Hybrid翻译过来叫混合，混合物，在前端世界里有一个词语叫混合开发便是它，大白话点就是将网页内嵌在原生app中，然后产生一系列的交互

常用的交互方式

双方约定协议(schema)
双方约定函数

双方约定协议(schema)

这里以android 为例，android 中可以通过WebViewClient 的回调方法shouldOverrideUrlLoading ()拦截 url, 然后解析该 url 的协议, 如果检测到是预先约定好的协议，就调用相应方法

协议式的通信适用于单向交互, 客户端想要回传给我们参数比较复杂

代码理解

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><button type="button" id="button1" onclick="callAndroid()">点击调用Android代码</button><script>function callAndroid() {/*约定的url协议为：js://webview?arg1=111&arg2=222*/location.href = "js://webview?arg1=111&arg2=222";}</script>
</body></html>

双方约定函数

简单来说，就是客户端为我们做了一层关系映射, 也可以理解原生app端会向webview暴露一个顶层对象，就像js中的window，这个对象包含web需要但不具备因此由原生实现的一些方法

代码理解

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><!-- 点击按钮则调用jsbridge函数 --><button type="button" id="button1" onclick="jsbridge()">Hello</button>

<script>function jsbridge() {// 由于对象映射，所以调用test对象等于调用Android映射的对象
            test.hello("js调用了原生app暴漏出来jsbridge中的hello方法");}</script>
</body></html>

总结

约定协议(native拦截http协议进行判读是否是定义好的协议)
约定函数(native向webview注入顶级对象)

转载于:https://www.cnblogs.com/jiahuasir/p/10564580.html

Ｈ5与客户端交互的方式有哪些? 怎么做?相关推荐

Android内部h5和native交互实现方式
Android具体实现方式一.实现方式 a.h5调用native: Android实现h5到native的方式为截获h5调用的特定url,一般url都是http://**这种,为了能够捕获h5调用的 ...
移动端 h5和原生交互的方式
一.h5传递给原生WebView的数据协议传递的是个json字符串: {"id": "random_value","action": &q ...
h5 和native 交互那些事儿
前端菜菜一枚,写下关于h5 和native 交互那些事情.偏前端,各种理论知识,不在赘述.之前有各位大牛已经写过.我只写代码,有问题,下面留言 /* 关于h5 和native 之间的交互 JSBrid ...
Java 实现 SSH 协议的客户端登录认证方式
摘自:http://blog.sae.sina.com.cn/archives/333/comment-page-1#comment-37391 简介: 本文首先对 SSH 协议的基础知识作以介绍,然 ...
[原创]前后端交互的方式整理
前言本来我只是想整理下前后端如何传输数据这种交互过程,大概流程如下: 前台使用ajax通过get/post等方式提交数据到后端后端如何获取参数经过业务处理后,返回前端对应的响应数据前端接受到响 ...
[转]Android中程序与Service交互的方式——交互方式
本文转自:http://blog.csdn.net/yihongyuelan/article/details/7216188 上一篇文章:Android中程序与Service交互的方式--综述简述了 ...
Java 实现 SSH 协议的客户端登录认证方式--转载
背景在开篇之前,让我们先对 SSH 协议有个宏观的大致了解,这样更有利于我们对本文的加深了解.首先要提到的就是计算机网络协议,所谓计算机网络协议,简单的说就是定义了一套标准和规则,使得不同计算机之间 ...
JAVA与SAP数据交互的方式总结
JAVA与SAP数据交互的方式总结 RFC方式:Java程序直接通过RFC访问SAP的对象(或称函数,可能叫法不对) SAP提供了BAPI(Business Application Progr ...
uni-app接入阿里云认证SDK（号码认证服务），App客户端一键登方式
uni-app接入阿里云认证SDK(号码认证服务)App客户端一键登方式首先,你需要了解和开通阿里云的号码认证服务,地址:https://help.aliyun.com/product/75010. ...
Raft 集群成员变更、日志压缩、客户端交互
Raft 集群成员变更.日志压缩.客户端交互集群成员变更在集群服务器发生变化时,不能一次性的把所有的服务器配置信息从老的替换为新的,因为,每台服务器的替换进度是不一样的,可能会导致出现双主的情况, ...

Ｈ5与客户端交互的方式有哪些? 怎么做?

双方约定协议(schema)

双方约定函数

总结

Ｈ5与客户端交互的方式有哪些? 怎么做?相关推荐

最新文章

热门文章