vue项目使用WebViewJavascriptBridge 与APP交互JS
1、首先在项目中创建一个JS ,命名为 bridge.js 代码如下://iosfunction setupWebViewJavascriptBridge(callback) {if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }if (window.WVJBC...
·
1、首先在项目中创建一个JS ,命名为 bridge.js 代码如下:
//ios
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
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)
}
setupWebViewJavascriptBridge();
//安卓注册事件监听
function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady'
, function() {
callback(WebViewJavascriptBridge)
},
false
);
}
}
//注册回调函数,第一次连接时调用 初始化函数
connectWebViewJavascriptBridge(function(bridge) {
//初始化
bridge.init(function(message, responseCallback) {
//var data = {'Javascript Responds': 'Wee!'};
responseCallback(data);
});
//Android调用js方法:functionInJs方法名称需要保持一致 ,并返回给Android通知
bridge.registerHandler("functionInJs", function(data, responseCallback) {
responseCallback(data);
});
})
2、在main.js 中引入.
/** VUE与APP交互 **/
import './util/bridge.js'
3、在.vue 模板中使用
<script>
export default {
data(){
return{
}
},
methods:{
//选择图片上传项处理
clickUploadImg(key,item){
if(item===undefined){ return false; }
let that = this;
if(item=='拍照'){
//拍照
WebViewJavascriptBridge.callHandler('uploadImgPhoto',{'name':'拍照'},function(data) {
that.getAppUpImage(data);
});
}else{
//从相册选择
WebViewJavascriptBridge.callHandler('uploadImgAlbumSelect', {'name':'选择图片'},function(data){
that.getAppUpImage(data);
});
}
},
getAppUpImage(url){
let data = JSON.parse(url);
//this.$vux.alert.show({title:'提示',content:data});
this.imageData.push(data.path);
this.imageName.push(data.name);
},
}
}
</script>
更多推荐
已为社区贡献4条内容
所有评论(0)