移动端开发:WebView介绍和使用、JSBridge等
创始人
2024-02-23 20:51:46
0

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和客户端通讯的基本形式,如下图:
在这里插入图片描述

hybrid更新方式:

前端做好静态页面(html,js,css),将文件交给客户端,客户端拿到前端静态页面后以文件形式存储在app中,客户端在一个webview中使用file://协议加载静态文件。用户每次打开app,app都去server端看看有没有最新的前端静态文件,如果有就下载下来然后覆盖本地旧的前端静态文件,替换每个客户端的静态文件只能客户端来做,让客户端去server下载最新的静态文件,前端可以维护server的前端静态文件,把最新的前端文件上传给客户端。

  • 分版本,有版本好,如201910111015
  • 将静态文件压缩成zip包,上传到服务端
  • 客户端每次启动都去服务端检查版本号
  • 如果服务端版本号大于客户端版本号,就去下载最新的zip包
  • 下载完后解压包,然后将现有文件覆盖

在这里插入图片描述

JSBridge

什么是JSBridge
JSBridge是JS和Native之间的一种通信方式,也就是定义Native和JS的通信,其中Native只通过一个固定的桥对象调用JS,而JS也只通过固定的桥对象调用Native。

双向通信的通道:

JS 向 Native 发送消息: 调用相关功能、通知 Native 当前 JS 的相关状态等。
Native 向 JS 发送消息: 回溯调用结果、消息推送、通知 JS 当前 Native 的状态等。

H5与Native交互如下图:

在这里插入图片描述

相关内容

热门资讯

监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播,要解决的几个问题是:1&...
Windows10添加群晖磁盘... 在使用群晖NAS时,我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
Fluent中创建监测点 1 概述某些仿真问题,需要创建监测点,用于获取空间定点的数据࿰...
educoder数据结构与算法...                                                   ...
MySQL下载和安装(Wind... 前言:刚换了一台电脑,里面所有东西都需要重新配置,习惯了所...
MFC文件操作  MFC提供了一个文件操作的基类CFile,这个类提供了一个没有缓存的二进制格式的磁盘...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章,在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
有效的括号 一、题目 给定一个只包括 '(',')','{','}'...
【Ctfer训练计划】——(三... 作者名:Demo不是emo  主页面链接:主页传送门 创作初心ÿ...