• Project requirements:

Open the Web page in the native APP and perform operations.

  • Description:

This solution does not require the introduction of plug-ins on the Web side. Instead, it uses web view javascript Bridge.

  • Steps:
  1. Create a new bridge.js file
//iOS interaction declarationfunction connectWebViewJavascriptBridgeIOS(callback) {
    if (window.WebViewJavascriptBridge) {
        return callback(window.WebViewJavascriptBridge)
    }
    if (window.WVJBCallbacks) {
        returnwindow.WVJBCallbacks.push(callback)
    }
    window.WVJBCallbacks = [callback];
    let WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'https://__bridge_loaded__';
        document.documentElement.appendChild(WVJBIframe);
    setThe Timeout (() = > {document. DocumentElement. RemoveChild (WVJBIframe)}, 0)} / / Android interaction statementfunction connectWebViewJavascriptBridgeANDROID(callback) {
    if (window.WebViewJavascriptBridge) {
        callback(WebViewJavascriptBridge);
    } else {
        document.addEventListener(
            "WebViewJavascriptBridgeReady".function () {
                callback(WebViewJavascriptBridge);
            },
            false); }}exportThe default {callhandlerIOS (name, data, the callback) {/ / iOS method connectWebViewJavascriptBridgeIOS (function(bridge) { bridge.callHandler(name, data, callback) }) }, registerhandlerIOS(name, The callback) {/ / iOS method connectWebViewJavascriptBridgeIOS (function (bridge) {
            bridge.registerHandler(name, function(data, responseCallback) { callback(data, responseCallback) }) }) }, callhandlerAndroid(name, data, The callback) {/ / connectWebViewJavascriptBridgeANDROID Android method (function(bridge) { bridge.callHandler(name, data, callback) }) }, registerhandlerAndroid(name, The callback) {/ / connectWebViewJavascriptBridgeANDROID Android method (function (bridge) {
            bridge.init(function (message, responseCallback) {
                if(responseCallback) { // responseCallback(data); }}); bridge.registerHandler(name,function (data, responseCallback) {
                callback(data, responseCallback)
            })
        })
    }
}

Copy the code
  1. Import it in main.js
import Bridge from "./bridge.js";

 Vue.prototype.$bridge=Bridge; // After this injection, we can call this directly wherever we need to call native in the page.$bridge.xxx
Copy the code
  1. Use in VUE components (call method name should be negotiated with app side)
        created() {
            this.$bridge.registerhandlerIOS("JS Echo", (data, responseCallback) => {
                console.log("JS Echo called with:", data);
                // this.responseCallback(data)
            });
            this.$bridge.registerhandlerAndroid(
                "registerAction",
                (message, responseCallback) => {
                    console.log("JS Echo called with:" + message);
                    // this.responseCallback(data)
                }
            );
        },
        methods:{
            callNative() {
                if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                    this.$bridge.callhandlerIOS(
                        "HY_H5_CALL_NATIVE",
                        { action: "param"}, data => {// process returned data})}else if (/(Android)/i.test(navigator.userAgent)){
                    this.$bridge.callhandlerAndroid(
                    'action',
                    {message: 'param'}, res=>{// process returned data})}},}Copy the code

Refer to the link