文档章节

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

o
 osc_fmg49rzg
发布于 2019/03/20 14:05
字数 519
阅读 15
收藏 0

钉钉、微博极速扩容黑科技,点击观看阿里云弹性计算年度发布会!>>>

先解释一个名词吧 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注入顶级对象)

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
移动端本地 H5 秒开方案探索与实现

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 企业微信移动端项目中有需求要展示数据趋势的可视化图表,经过调研,最终决定以单页面 H5 来完成,对 APP 里的一些使用 H5 实现的...

osc_k0sclxgn
2018/06/17
1
0
意派Epub360丨探索人脸融合H5的秘密,让营销变得更有效率

近年来,自人民日报客户端出品的《快看呐!这是我的军装照》火遍全网后,人脸融合H5出现在朋友圈的频率越来越高。虽然很多人都曾体验过这类“黑科技”产品,但关于它的讨论仍然寥寥无几。下面...

牙牙乐牙牙乐
03/26
2
0
竞品分析

那什么样的场景需要用关键纬度分析法分析竞品呢? 竞品分析的目的是为了看竞品们和自己产品重合的业务都具备哪些功能点,以及这些功能是怎么做的,以此确定自己产品的优化方向。 竞品们的业务...

于谦老师
2018/08/22
23
0
Appium—Native+H5混合APP的自动化

小编所在项目的客户端是比较奇怪的一个APP,大部分页面Android和iOS的客户端只提供了webview的功能,都是由H5处理业务逻辑和用户交互。H5承担了和服务端、和客户端的交互。 虽然在开发实现上...

小丶汉
01/16
0
0
h5和native测试时的区别

我们以往的APP是使用原生系统内核的,相当于直接在系统上操作,是我们传统意义上的软件,更加稳定 H5的APP先得调用系统的浏览器内核,相当于是在网页中进行操作,较原生APP稳定性稍差,似乎还...

osc_hu8sgifq
2019/10/12
2
0

没有更多内容

加载失败,请刷新页面

加载更多

263. Ugly Number

题目: 263. Ugly Number 题目地址:https://leetcode.com/problems/ugly-number/ Write a program to check whether a given number is an ugly number. Ugly numbers are positive numbers......

JiaMing
11分钟前
30
0
HCIA_ARP01

ARP(地址解析协议) eNSP 常用路由器:AR2220 常用交换机:S5700、S3700 常用终端:PC、MCS(主播服务器) 设备连线:Copper(以太网用到的双绞线)、Serial(串口线,2SA接口)、Auto(自动连...

创业789
14分钟前
7
0
如何在Rails 4中使用问题 - How to use concerns in Rails 4

问题: The default Rails 4 project generator now creates the directory "concerns" under controllers and models. 默认的Rails 4项目生成器现在在控制器和模型下创建目录“Concer”。 ......

fyin1314
18分钟前
19
0
【LeetCode】 57 括号生成

题目: 解题思路: https://leetcode-cn.com/problems/generate-parentheses/solution/hui-su-suan-fa-by-liweiwei1419/ 代码: import java.util.ArrayList;import java.util.List;publ......

JaneRoad
昨天
8
0
度小满上线“推有钱”贷款推广平台,合伙人直推佣金为贷款金额的2.5%

来源 | 镭射财经 作者 | 黄老邪 2020年,蓬勃发展的消金行业受到新冠肺炎疫情的冲击,用户增长放缓、逾期率上升成为共性问题。但疫情或许只是导火索,对于消金行业来说,用户增长红利的消退,...

镭射财经
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部