How does h5 interact with native APP? (vue)

the first time h5 interacts with APP, there are some problems.

there is a requirement:
the front end of H5 needs to call the camera and photo album to upload a picture. Then the developers on the native APP side said to me that you can just call my method for opening photo albums.

here are the methods provided by native APP:
Open album:

showAppByOneParam("SHOW_ALBUM");

turn on the camera:

showAppByOneParam("TAKE_PHOTO");

Common callback function:

getUploadUrl(url) //url

my code:

//
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;
}

finally, after the release of H5 and native packaging, there was no response at all when I clicked the button. What went wrong? ~

Html5 javascript vue.js webapp app

Feb.24,2022

you ask the other party to mount the method under the window of app's built-in browser, and then you call it through window.XXX, otherwise you cannot call the method of app, and you are not in the same environment

you want to let native expose a communication rule so that he can receive the parameters you passed to him

if you simply upload the picture, you can just do it with H5, a mixed development that you did before. With this feature, the problem that the upload control can not be opened is that Android blocks the upload control and lets him handle it himself.

it is possible that before JSBridge is initialized, you directly call the method provided by JSBridge. Generally, App will provide some interfaces under the window object, but not at any time. Most of the time, but generally, when the JSBridge is completed, you will emit a WebviewJavascriptBridgeReady event. You can check the problem in this direction.

Previous: How does Angular do global refresh?

Next: After using react-motion to fold and expand the sidebar, the scroll bar becomes invalid