移动端开发:WebView介绍和使用、JSBridge等

Android应用层的开发有几大模块,其中WebView是最重要的模块之一。Android系统的WebView发展历史可谓一波三折,系统WebView开发者肯定费劲心思才换取了今天的局面——应用里的WebView和Chrome表现一致。

webview是什么?

  1. WebView是一种控件,它基于webkit引擎,因此具备渲染Web页面的功能。
  2. 基于Webview的混合开发,就是在 Anddroid os(安卓)/I os(苹果)原生APP里,通过WebView控件嵌入Web页面。

在这里插入图片描述

在这里插入图片描述

实战:

  1. 通过Android Studio工具新建一个Android工程
  2. 利用Android SDK提供的API创建一个WebView
  3. 通过webview的loadUrl()来加载一个网址,这里一般是将上传到服务器上的h5的dist包拿下来,然后通过file协议加载,这也是hybrid快的原因。
  4. 加载的网址即为通过web开发后部署的站点
    在这里插入图片描述

hybrid和h5的区别:

  1. 优点
  2. 缺点
  3. 适用的场景

优点:

  • 体验好,跟NA体验基本一致
  • 可快速迭代,无效App审核

缺点:

  • 开发成本高。联调、测试、查bug都比较麻烦
  • 运维成本高

适用场景:
hybrid:体验要求高,迭代频繁
h5:单次的运营活动(如抢红包)或不常用功能

hybrid为什么快?

利用了客户端的能力,将h5的dist包缓存到客户端本地,然后通过file协议来加载资源。

前端与客户端通讯

JS-SDK 例如微信开发平台提供的的JS-SDK,由于JavaScript的能力和权限受限,有一些功能必须用原生的调用,比如扫一扫、录音等功能,因此JS-SDK就充当了一个中间连接的作用,在JS中通过使用JS-SDK来调用一些原生App提供的能力。

在hybrid架构之中,原生App与h5通讯的方式是JSBridge

JS和客户端通讯的基本形式,如下图:
在这里插入图片描述

JS Bridge

1. 什么是JS Bridge
  • JS 无法直接调用native API
  • 需要通过一些特点的“格式”来调用
  • 这些“格式”就统称为JS-Bridge,例如微信JSSDK
2. JS Bridge的常见实现方式
  • 注册全局API,异步处理比较麻烦
  • URL Scheme,自造一个协议标准,用于和客户端通信,更推荐这种方式

在这里插入图片描述
优化:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta 
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

. . . . .

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值