h5如何与原生APP交互？（vue）

Question

第一次h5和APP交互，出现了一些问题。。。

现有一需求：
H5前端要做一个图片上传的功能，需要调用相机、相册。然后原生APP那边的开发人员和我说，打开相册这些功能你调用我的方法就可以了。

以下是原生APP提供的方法：
打开相册：

showAppByOneParam("SHOW_ALBUM");

打开相机：

showAppByOneParam("TAKE_PHOTO");

公共的回调函数：

getUploadUrl(url) //url为图片路径

我的代码：

//打开相册还是相机？
onSelect:function(item){
    this.showImages = false;
    if(item.name == '相册'){
        showAppByOneParam("SHOW_ALBUM");
    }
    else{
        showAppByOneParam("TAKE_PHOTO");
    }
},
//图片上传回调
callbackImages:function(url){
    if(url){
        Toast(url);
    }
    else{
        Toast('失败');
    }
}
-------------------------------------
mounted:function(){
    //APP打开相册公共方法
    window.getUploadUrl = this.callbackImages;
}

最后H5和原生打包发布后，点击按钮一点反应都没有 是哪里出了问题呀~~

Answer 1

有可能是 JSBridge 还未初始化完成，你就直接调用了 JSBridge 提供的方法，一般App都会提供一些接口在 window 对象下，但是并不是任何时候都可以，很多时候，但是一般在 JSBridge 都完成的时候，一般都会 emit 一个 WebviewJavascriptBridgeReady 事件，你可以往这方向查查问题。

Answer 2

如果单纯图片上传，你直接H5做就好了，之前做的一个混合开发，有这个功能，遇到了这个上传控件打不开的问题，是安卓把上传控件屏蔽，让他自己处理就好。

Answer 3

你要让native给你暴露一个通信规则 让他能接收到你给他传的参数

Answer 4

你让对方把方法挂载app内置浏览器的window下，然后你通过window.XXX来调用，不然你调用不到app的方法，你们不在同一个环境中