混合开发

混合开发是一种模式,英文名字hybird APP

顾名思义就是使用native(iOS和Android)和web(html\css\javascript)技术开发

优点:开发快,开发周期短

缺点:性能问题和兼容问题(原生充当浏览器,版本很多,所以兼容性问题可能会有,但是Android5.0和ios9.0以上版本,这个确定也不明显)

混合应用开发:

1.微信公众号:通过jssdk连接native和web

2.微信小程序:内置框架连接native和web

3.普通原生和web交互:jsBridge

意义:更好地使用第三方平台,更灵活的技术方案选型,具备搭建平台和输出服务的能力

jsbridge是实现native端和web端的双向通信的一种机制,通过约定进行通信

混合开发主流框架

1.web渲染:cordova(前身phoneGap)
2.原生渲染:react native .weex
3.混合开发:微信小程序

jsbrige实现原理

将native端的原生接口封装成javascript接口,将web端的javascript接口封装成原生的接口,实现双向通信
web调用native的方式有两种:
1.拦截webview请求中的URL schema
2.向webview注入jsAPI
方式一:兼容性好,但是不直观,url长度有限制

//实现:native调用web的时候,web端的方法定义:
window.方法名=参数=>{方法体}
//web端调用native的时候,web端的代码:
window.alert('jsbridge://原生方法?参数="xxx')
document.location="jsbridge://原生方法?参数=xxx"

方式二:简单直观,但是在低版本的手机可能会有兼容性的问题
web端通过调用注入到js中的原生方法调用native
native通过注入js调用web

window.注入到webview的方法.原生方法(参数);

支持回调的jsbridge
webview调用原生的时候会有一个callbackid,返回的时候原生会把callbackid返回找到对应的回调.反之原生调用webview也是类似的
比如:web调用native时候,web端代码实现如下

window.JSSDK={
	getNativeValue(callback){
		const callID=id++;
		callbackmap[callID]=callback;
		nativeBridge.原生方法(callID);
	}
	receiveMassage(callID,value){//原生返回值的时候出发的方法
		if(callbackmap[callID]){
			callbackmap[callID](value)
		}
	}
}
调用:
	widow.getNativeValue(value=>{
		方法体处理返回值数据
	})

native调用web的时候,web端的代码实现:

widow.JSSDK={
	getwebText(callbackid){
		nativeBridge.原生方法(callbackid,'web端的值')
	}
}

jsbridge的开源实现

DSBridge,可以查看官方文档.原理一样