【混合开发】- 1、技术原理
文章目录
- 1.关于混合开发
- 1-1. 什么是混合开发
- 1-2. 流行的混合开发方案
- 2. 混合开发app 的本质
- 2-1. Hybrid App 混合开发app 的本质
- 2-2. 什么叫做JSBridge
- 2-3. webView
- 3. Android 与 web 通信 -- 安卓中js 和 原生的相互调用--了解
- 3-1. Android Studio - 安装配置流程
- 3-2 安卓 与 web 通信
- 3-3. npm 安装 与 http-server
- 3-4. 安卓 与 web的相互调用
- 4. IOS 与 web 通信
- 4-1.IOS的代码运行
- 4-2. ios 和 web 的相互调用
- 4-3. 安卓 与 ios的双向通讯 对比
1.关于混合开发
1-1. 什么是混合开发
混合开发(Hybrid App)
是一种开发模式,混合了Native(原生)技术和web技术进行开发的移动应用
1-2. 流行的混合开发方案
基于WebView UI
– 最初/最核心的方案,主要通过JSBridge来完成web端 和 native端的通信,从而赋予web端原生的能力;JSBridge 是原生端 和 web端通信的桥梁基于Native UI
– 典型的有ReactNative 和 weex,通过赋予web 原生能力基础上,进一步通过JSBridge将js解析成虚拟机链数来传递到native端,并使用原生去渲染的解决方案小程序方案
– 微信、支付宝小程序,也是通过JSBridge来实现的,只不过对JSBridge进行了更加细致的定制,并隔离了js逻辑层和ui的渲染层,形成了特殊的开发环境;从而加强了web 和native的融合程度,提高了web端的执行性能
总结:上述3中方案都是通过JSBridge 来完成通信的
,2、3方案是在1方案的基础上,通过不同的封装思想提高了web 和 native的融合程度
2. 混合开发app 的本质
2-1. Hybrid App 混合开发app 的本质
在原生(Native) APP 中,使
用 WebView 作为容器,来承载一个 web 页面
所以混合开发的本质是:原生(Native)和 web 端的双向通讯层(跨语言解决方案)– JSBridge
所有的ui 和逻辑都在web 完成
在上架商城的时候,苹果商城中:原生ui 和 web ui 的比重大概2:8 ,当然根据情况可以有所调整
2-2. 什么叫做JSBridge
定义:一座用 JavaScript 搭建起来的桥,一端是 web ,一端是 Native
目的:让 Native 可以调用 Web 的 JavaScript 代码,让 web 可以调用 Native 的原生代码
而实现JSBridge 的关键是原生端的容器:webView, JSBridge的一切原理都是基于webView机制来完成的。
- 手机中有个自己开发的程序Native App
- Native App 中所有的业务 和 ui效果都是通过网页来进行展示的,所有需要有一个可以承载网页的容器(就类似电脑里有个浏览器用来去展示网页)这个容器就是webView;
2-3. webView
webView在app里可以被当作是展示网页的浏览器,所以网页的内容都会通过webView去 进行展示,从而完成app需要展示的ui 和 业务逻辑;
但是因为有一些原生的特性功能,eg:原生端提供的数据存储,录音,摄像头等是没办法通过web端的js代码来调用,所以我们需要有一个桥JSBridge
,来1.通知原生端 web需要调用原生的哪些功能 2.原生端告诉web端调用原生功能后的结果
3. Android 与 web 通信 – 安卓中js 和 原生的相互调用–了解
3-1. Android Studio - 安装配置流程
Android Studio(简称AS) 是谷歌提供的安卓的代码编辑器
,配置时需要上网
JDK 安装 – AS 要求我们必须安装1.8以上的JDK
下载JDK: https://www.oracle.com/cn/java/technologies/javase/javase-jdk8-downloads.html环境变量配置(只针对 windows 用户),mac 不需要配置环境变量
计算机-系统属性-高级系统设置-高级-环境变量: 修改系统环境变量
- 新建系统环境变量 JAVA_HOME,变量值为 JDK 安装路径
- 在 path 变量内容的尾部增加:
%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
- 新建系统环境变量 CLASSPATH,变量值为:
.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar
配置完后,在cmd 命令行中,输入java -version
验证环境变量有没有配对
- Android studio 下载
官方地址:https://developer.android.com/studio
国内地址:http://www.android-studio.org/index.php
3-2 安卓 与 web 通信
注意:
原生端调用web方法,web方法必须是挂载到web端的window对象上的方法
安卓端构建JSBridge 对象后,会
将JSBridge字符串挂载到网页中的window对象
下面
在网页中可以通过window.AndroidJSBridge
拿到注入的JSBridge对象,从而调用安卓端提供给web的方法
3-3. npm 安装 与 http-server
- 给安卓端提供一个网页访问地址
- 安装node 环境
- npm install http-server -g 安装http-server后
- cd 到项目地址后, http-server启动http 服务
注意:win10系统上,http-server 会有问题,可以使用anywhere – 也是随启随用的静态文件服务器,可以随时随地将当前目录变成一个静态文件服务器的根目录
- web端把可访问的网页地址给到安卓,安卓做如下修改,就可在安卓端查看web页面了
public class Constants {/*** 在 android 9.0 的设备上,如果要加载 http 协议的网页,* 那么需要对 app 进行安全访问设置。* 网页加载路径*/public static final String WEB_URL = "http://192.168.0.100:8080/";
}
3-4. 安卓 与 web的相互调用
<body><input type="button" value="js调用android方法1" onclick="onAndroidFunction1('js调用android方法1')"><input type="button" value="js调用android方法2" onclick="onAndroidFunction2()"><script>// web调用 Android 方法1function onAndroidFunction1 (str) {window.AndroidJSBridge.androidTestFunction1(str);}// web调用 Android 方法2function onAndroidFunction2 () {var result = window.AndroidJSBridge.androidTestFunction2();alert(result); //安卓端给的返回值}// Android 调用web的 onFunction 方法//web 定义的方法,挂在window上,安卓原生端可以调用这个方法window.onFunction = function (str) {alert(str);return 'onFunction 方法已经调用完成';}</script></body>
</html>
4. IOS 与 web 通信
IOS 与 web 的双向通信 也是:通过webView组件,向window中注入了一个JSBridge 对象,web端通过这个JSBridge 来调用原生端提供的方法
4-1.IOS的代码运行
- IOS的代码运行,必须使用macos系统,用windows不行
- 安装Xcode 编译器,不需要进行配置就能运行ios代码
- app store中安装Xcode
4-2. ios 和 web 的相互调用
<body><input type="button" value="js调用IOS方法1" onclick="onIOSFunction1('js调用ios方法1')"><input type="button" value="js调用IOS方法2" onclick="onIOSFunction2()"><script>// web调用 IOS 方法1 : //调用方法:window.webkit.messageHandlers.方法()//传递参数:如果要传递参数,必须用postMessage(),window.webkit.messageHandlers.方法.postMessage(参数)function onIOSFunction1 (str) {window.webkit.messageHandlers.IOSTestFunction1.postMessage({msg: str});}// 调用 IOS 方法2function onIOSFunction2 () {window.webkit.messageHandlers.IOSTestFunction2.postMessage({});}// IOS 回调web的 onFunctionIOS 方法window.onFunctionIOS = function (str) {alert(str);return 'onFunctionIOS 方法已经调用完成';}</script>
</body>
</html>
4-3. 安卓 与 ios的双向通讯 对比
- 相同点:
- 都是通过webView 来完成网页的加载(安卓用的X5wevview,ios用的WKwebview,都是网页的载体,加载网页的app浏览器)
- 都是通过向Window注入对象的方式 来 提供可被web端调用的方法 – web调用原生方法
- 都可以
直接调用 Web 端挂载到 window 对象下的方法
– 原生调用web方法
- 不同点:
- 注入对象不同:都是向window上挂载注入对象,Android 可提供注入对象名称。IOS 固定为 webkit
- JS 调用 Native 方式不同:面向 Android 可直接获取注入对象,调用方法
window.AndroidJSBridge.方法名(基本类型的参数);
。面向 IOS 为相对固定写法(window.webkit.messageHandlers.方法名.postMessage(入参对象)
) - 传递数据格式不同:
android 只能接收基本数据类型参数
,不能接收引用类型的数据(Object、Array),而传递给ios的参数可以是引用类型的任意类型数据
- 返回值不同:面向== Android 可以直接接收返回值==。面向 IOS 没有办法直接获取返回值–可以通过回调方法的方式进行获取。
ios 不能提供返回值,所以可以在web 调用ios的方法1后,在ios方法1里调用web的方法,传递参数,来告诉web调用方法1的结果
【混合开发】- 1、技术原理相关推荐
- Flutter 深入探索混合开发的技术演进
关于 Flutter 混合 PlatformView 的实现已经介绍过两次,随着 5 月份谷歌 IO 的接近,新的 PlatformView 实现应该也会随之而来,本次就从头到尾来一个详细的关于 Pl ...
- linux里qt画直线_Qt与Web混合开发(一)简单使用
前言 <Qt与Web混合开发>系列文章,主要讨论Qt与Web混合开发相关技术. 这类技术存在适用场景,例如:Qt项目使用Web大量现成的组件/方案做功能扩展, Qt项目中性能无关/频繁更新 ...
- 聊一聊我在移动平台混合开发的经验
过去一年多的时间,我的大部分精力都在做iOS上的Native+HTML5混合开发,坦白说,没什么成就,一直不好意思提自己的产品,但是失败的经验还是有的.现在我主要的精力在玩Node.JS, 所以我想把 ...
- 【2020年APP-Flutter混合开发之路】01 - Flutter的初步思考和开发部署
为什么选择Flutter 在使用Flutter开发之前,我是一个标准的iOS开发人员.我至今认为苹果的整个体系,甚至整个技术框架都是业内最牛逼,最完善的,你甚至挑不出太多毛病.尤其在苹果发布Swift ...
- 移动端---混合开发1 + 支付相关操作(手机app支付、网页支付)--支付流程
混合开发 1️⃣ 以前端为主导进行开发(Hybrid app)(即所有的页面部分都是用网页 h5 的技术来做的,Hybrid 是做编辑器的) uniapp.mui 是国内主流的小公司做混合开发的技术. ...
- Java架构学习(五十一)微信公众号开发混合开发技术流程微信推送原理外网映射工具使用微信公众号接口认证代码获取微信客户端信息解决微信消息幂等问题
一.微信公众号项目 SOA架构:面向接口开发,也就是相当于把传统的那种ssh项目的业务逻辑层抽取出来 做成接口. SSH架构与分布式架构的区别 SSH架构是整个项目的任何模块都在一个项目里面 分布式架 ...
- Flutter 核心原理与混合开发模式
作者:airingdeng,腾讯QQ前端开发工程师 本文将从 Flutter 原理出发,详细介绍 Flutter 的绘制原理,借由此来对比三种跨端方案:之后再进入第三篇章 Flutter 混合开发模式 ...
- 爱库存+爱乐奇+齐家网,案例+原理+实践,大神讲透混合云安全|上海技术活动...
云时代的运维实践和安全保障新思路--云运维公开技术沙龙来了! 本次活动,侧重云时代的运维和安全 有技术原理分享,有工程实践 更可以拓展人脉,深度交流 案例+原理+实践 齐家网 周君 坐拥 ...
- 一文读懂TOF深度相机技术原理--TI-Tintin-OPT8241二次开发和应用系列--Theory Level
一文读懂TOF深度相机技术原理--TI-Tintin-OPT8241二次开发和应用系列--Theory Level 转载请附上出处,本文链接:https://www.cnblogs.com/pans0 ...
最新文章
- 研究优雅停机时的一点思考
- 详解图像直方图均衡化原理,附MATLAB、C、C++源码
- 解决Mac app store更新时[newNUllResponse]的问题
- 客户端相关知识学习(二)之h5与原生app交互的原理
- Easy Multiplication 快速傅里叶变换
- 新买的服务器怎么安装Linux,买了新服务器,如何从头开始配置?Ubuntu系统安装+新建用户名+挂...
- 如何用EasyRecovery 快速找回误删的截图
- C++关键字(static-register-atuo-extern-volatile-const)
- POJ 3278(Catch That Cow)
- 彻底卸载VMware虚拟机的详细步骤
- 2021年高压电工考试报名及高压电工模拟试题
- 服务器 交换机 无线ap,交换机、路由器、防火墙、无线AP等和终端设备
- 牛客小白月赛1分元宵
- 能源预测:回顾与展望(IEEE论文)
- 页面插件集成:博客详情页
- 手机录音文件如何转换成文本?具体如何操作?
- STM32单片机开发应用教程 (HAL库版) ---基于国信长天嵌入式竞赛实训平台(CT117E-M4)教程汇总 与第一章 硬件平台简介
- 《黄花黄》安铁诗词作品摘录
- 湖北省荆门市谷歌高清卫星地图下载
- 《数据结构课程实践》_03_文本文件单词的检索与计数_准备工作