写一个安卓和ios端与H5的分享交互的功能
ios端给出的效果图
首先在utils文件中建了一个 bridge.js 文件 ,并写入如下代码
function setupWebViewJavascriptBridge (callback) {
if (window.WebViewJavascriptBridge) {
return callback(window.WebViewJavascriptBridge)
}
if (window.WVJBCallbacks) {
return window.WVJBCallbacks.push(callback)
}
window.WVJBCallbacks = [callback]
var WVJBIframe = document.createElement('iframe')
WVJBIframe.style.display = 'none'
WVJBIframe.src = 'https://__bridge_loaded__'
document.documentElement.appendChild(WVJBIframe)
setTimeout(function () {
document.documentElement.removeChild(WVJBIframe)
}, 0)
}
export default {
callhandler (name, data, callback) {
setupWebViewJavascriptBridge(function (bridge) {
bridge.callHandler(name, data, callback)
})
},
registerhandler (name, callback) {
setupWebViewJavascriptBridge(function (bridge) {
bridge.registerHandler(name, function (data, responseCallback) {
callback(data, responseCallback)
})
})
}
}
其后在main.js中引入全局
// vue与ios通信
import Bridge from './util/bridge.js';
Vue.prototype.$bridge = Bridge
最后在我需要分享的页面
1.先要判断是安卓还是ios
var u = navigator.userAgent
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // android终端
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
2.完整的分享 已进入页面就使用
注意:在浏览器上的话会报messageHandlers的错误,但是手机上应该不会的
mounted() {
var that = this;
setTimeout(() => {
var u = navigator.userAgent
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // android终端
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
if (isAndroid) { // 调用安卓方法
that.$bridge.callhandler(
'shareContent',{
iconUrl:that.courseCoverImg, // 分享图
title:that.courseName, // 分享的标题
content:that.courseBrief, // 分享的内容
shareLink: window.location.href, // 分享的地址 效果图给的地址不全,后改为现在的window.location.href
isNeedShare:true // 判断是否显示
}
)
}
if (isIOS) { // 调用iOS方法
window.webkit.messageHandlers.shareContent.postMessage({
iconUrl:that.courseCoverImg,
title:that.courseName,
content:that.courseBrief,
shareLink: window.location.href, // 当前页面的地址
isNeedShare:true
})
}
}, 500);
}