当vue遇上Hybrid APP
Hybrid APP 优势
网上查了一圈,没有找到符合我内心的描述,所以就算忽略吧,反正优点很多,这不是我们要说的重点,忽略几百字或者几十字总有的
解决方案--jsbridge
Hybrid网上很多,比较大型的方案还是推荐jsbridge,其最大优势在于方便于扩展,下面文章都是基于jsbridge来说的。
安利两个成熟的库
iOS WebViewJavascriptBridge
Android JsBridge
基本原理
这也不是这篇帖子的重点,上张网上盗来的图,个人看来这个图有些地方有点过期了,回头写jsbridge的原理的时候,再详细来说。
JS核心函数认识
1、获取Native植入对象,后续的调用都是使用的这个对象
/**
* 获取客户端的桥接对象
* @returns {Promise<any>}
*/
setupWebViewJavascriptBridge: function () {
return new Promise(resolve => {
if (window.WebViewJavascriptBridge) {
// 项目正常运行时window上已经挂载了客户端的桥接对象WebViewJavascriptBridge,直接使用对象
return resolve(WebViewJavascriptBridge);
}
if (window.WVJBCallbacks) {
// 已创建了回调队列,直接往回调队列添加回调函数
return window.WVJBCallbacks.push(resolve);
}
// 页面初始化时在客户端注入桥接对象前定义个回调函数队列,客户端在初始化后会依次调用队列中的函数
window.WVJBCallbacks = [resolve];
// 用隐藏的iframe,来触发url scheme,从而触发WebViewJavascriptBridge的注入
var WVJBIframe = document.createElement("iframe");
WVJBIframe.style.display = "none";
WVJBIframe.src = "wvjbscheme://__BRIDGE_LOADED__";
document.documentElement.appendChild(WVJBIframe);
setTimeout(function () {
document.documentElement.removeChild(WVJBIframe);
}, 0);
})
}
2、js调用客户端
/**
* h5调用客户端协议
* @param bridgeOpStr 方法名称
* @param paras 调用协议的参数
* @returns {PromiseLike<any | never> | Promise<any | never>}
*/
callHandler: function (bridgeOpStr, paras) {
return this.setupWebViewJavascriptBridge().then(bridge => {
return new Promise(resolve => {
bridge.callHandler(bridgeOpStr, paras, (response) => {
resolve(response);
});
})
});
}
3、客户端调用js
/**
* 客户端调js
* @param bridgeOpStr 方法名
* @returns {PromiseLike<any | never> | Promise<any | never>}
*/
registerHandler: function (bridgeOpStr) {
return this.setupWebViewJavascriptBridge().then(bridge => {
return new Promise(resolve => {
bridge.registerHandler(bridgeOpStr, (data, responseCallback) => {
// data 传过来的数据, responseCallback 回调函数
resolve(data, responseCallback);
});
})
});
}
封装
散装的js函数足够可以使我们完成项目了,不过为了更好的使用,我们应该将其封装到一个对象中,然后全局使用这个对象,这样做有几个优点。
1、方便调用。
2、因为jsbridge天生异步,所以我们有时候需要借助队列来控制一些逻辑。
3、版本等函数管理
主要封装内容:
- 版本管理,方便APP后续升级,在市场上形成多版本状态。
- 开发版本回调管理,方便开发过程中的调试
- 统一用Promise调用,并且返回结构统一。
算了吹多了没意思,直接上代码
const dev = process.env.NODE_ENV !== 'production'
/**
* 业务函数最终返回的是 promise, 其回调结果都是对象,
* result 状态: 1 成功, 0 失败;
* msg 提示信息。
* data 业务数据。
*/
let bridgefunc = {
// 当前协议版本
version: -1,
/**
* 获取当前协议版本,都支持
* @returns {*}
*/
getAppProtocolVersion() {
let jsonData = {};
jsonData.type = "getAppProtocolVersion";
return this.callHandler("phonebridge", jsonData);
},
// 初始化版本号
initVersion() {
this.getAppProtocolVersion().then(res => {
if (res.result == 1) {
this.version = res.data;
this.consumeNoViersionQueue()
}
})
},
// 没有版本的时候,交互先放入队列等版本回来再消费
noVersionQueue: [],
// 消费没有version队列
consumeNoViersionQueue() {
while (this.noVersionQueue.length) {
let callback = this.noVersionQueue.shift()
callback.call(this, true);
}
},
// 函数版本和测试支持,如果不包含函数对象,表示都支持。
funcSupportVersion: {
scanCode: {
version: 1.0,
devValue: '1234567890' // 开发环境回调值
},
pageWillShow: {
version: 2.5 // 回调场景默认值没意义,立即是不正确的,不写开发环境回到值,就不会触发
}
},
// 检查协议是否支持
checkSupport (bridgeOpStr, resolve, callback) {
if (dev) {
if (this.funcSupportVersion[bridgeOpStr] && this.funcSupportVersion[bridgeOpStr].devValue != undefined) {
resolve({
result: 1,
msg: '这是开发环境回调',
data: this.funcSupportVersion[bridgeOpStr].devValue
})
} else {
resolve({
result: 0,
msg: '开发环境,不支持调用'
})
}
callback(false);
} else if (bridgeOpStr == 'getAppProtocolVersion') {
// 获取version直接继续,否则死循环
callback(true);
} else if (this.version == -1) {
this.initVersion()
// 还没有获取到版本号,加入等待队列
this.noVersionQueue.push(callback)
} else if (!this.funcSupportVersion[bridgeOpStr] || !this.funcSupportVersion[bridgeOpStr].version || this.version >= this.funcSupportVersion[bridgeOpStr].version) {
// 没有设置支持函数支持版本
callback(true);
} else {
resolve({
result: 0,
msg: '当前APP版本过老,不支持该函数,函数名:' + bridgeOpStr
})
callback(false);
}
},
/**
* h5调用客户端协议
* @param bridgeOpStr 方法名称
* @param paras 调用协议的参数
* @returns {PromiseLike<any | never> | Promise<any | never>}
*/
callHandler (bridgeOpStr, paras) {
return this.setupWebViewJavascriptBridge().then(bridge => {
return new Promise(resolve => {
this.checkSupport(bridgeOpStr, resolve, (result) => {
if (result) {
bridge.callHandler(bridgeOpStr, paras, (response) => {
resolve({
result: 1,
data: response
});
});
}
})
})
});
},
/**
* 客户端调js
* @param bridgeOpStr 方法名
* @returns {PromiseLike<any | never> | Promise<any | never>}
*/
registerHandler (bridgeOpStr) {
return this.setupWebViewJavascriptBridge().then(bridge => {
return new Promise(resolve => {
this.checkSupport(bridgeOpStr, resolve, (result) => {
if (result) {
bridge.registerHandler(bridgeOpStr, (data, responseCallback) => {
// data 传过来的数据, responseCallback 回调函数
resolve({
result: 1,
data: data,
responseCallback: responseCallback
});
});
}
})
})
});
},
/**
* 获取客户端的桥接对象
* @returns {Promise<any>}
*/
setupWebViewJavascriptBridge () {
return new Promise(resolve => {
if (window.WebViewJavascriptBridge) {
// 项目正常运行时window上已经挂载了客户端的桥接对象WebViewJavascriptBridge,直接使用对象
return resolve(WebViewJavascriptBridge);
}
if (window.WVJBCallbacks) {
// 已创建了回调队列,直接往回调队列添加回调函数
return window.WVJBCallbacks.push(resolve);
}
// 页面初始化时在客户端注入桥接对象前定义个回调函数队列,客户端在初始化后会依次调用队列中的函数
window.WVJBCallbacks = [resolve];
// 用隐藏的iframe,来触发url scheme,从而触发WebViewJavascriptBridge的注入
var WVJBIframe = document.createElement("iframe");
WVJBIframe.style.display = "none";
WVJBIframe.src = "wvjbscheme://__BRIDGE_LOADED__";
document.documentElement.appendChild(WVJBIframe);
setTimeout(function () {
document.documentElement.removeChild(WVJBIframe);
}, 0);
})
},
/**
* // 扫一扫,版本1.0及之后可以调用
* @returns {*} promise 返回 code
*/
scanCode() {
let jsonData = {};
return this.callHandler("scanCode", jsonData);
},
/**
* 注册回调函数,页面从其他地方回来了,版本2.5及之后可以调用
* @returns {*}
*/
pageWillShow() {
let jsonData = {};
return this.registerHandler("pageWillShow", jsonData);
}
};
export default bridgefunc;
使用如下:
bridgefunc.scanCode().then(res => {
if (res.result == 1) {
console.log('扫码结果:', res.data);
}
})
原创不易,转载请注明出处,欢迎留言指正。
发表评论 (审核通过后显示评论):