混合开发,原生app内嵌h5页面

11,162 阅读1分钟

什么是混合开发

混合开发,也就是我们平时听到的Hybrid app,由原生(native)开发技术和web开发技术一起进行开发,然后以native app的方式进行展示的应用。

目前的混合开发方案

1.(Hybrid)JSBridge
2.reactNative、weex
3.小程序
等... 我们的项目采用Hybrid app的方式进行混合开发

Hybrid app

在原生 app中, 使用webview来加载html页面,把web端的页面展示出来,然后在Native app中的网页就像被放在了一个沙箱中,与外界隔离,访问不到一些外部的方法,无法调用一些手机端的api。

JSBridge

它就像一个桥梁,连接这web端和native端,让native可以调用web端的代码,让web端可以调用native端的代码。

开发具体流程

1.native app 开发人员完成webview布局
2.通过webview去给window对象里面添加JSBridge对象
3.提供文档

Android

提供给web端调用的方法:

1.fnName(str) 传参的情况
--fnname:方法名,web端通过 window.AndroidJSBridge.fnName('xxxx') 调用, window.AndroidJSBridge.XX为固定写法,后面加方法名,参数类型为字符串,传入对象时,要转一下JSON.strinify

  1. fnName() 不传参的情况,获取函数的返回值
var result = window.AndroidJSBridge.fnName();
            log(result);

web提供给native的方法

方法必须绑定在window对象下

window.fnName = function (str) {
            return 'web提供给native的方法';
        }

IOS

提供给web端调用的方法:

固定写法window.webkit.messageHandlers.xxx.postMessage({...})

window.webkit.messageHandlers.fnName.postMessage({
                msg: str
            });

web提供给native的方法

方法必须绑定在window对象下

window.fnName = function (str) {
            return 'web提供给native的方法';
        }