Vue(h5)与App(android,ios)端交互详解

前言：

最近开发vue与app交互，总结了一下开发心得。我是一名Android开发者，vue开发这块也稍有涉足，在android或者IOS中展示h5可以减少工作量，也能满足用户体验性。下面主要以Android和Vue方法介绍为主。

上菜了

 

 

一、h5与App交互的两种形式

1.h5调用app的原生方法。

2.app嗲用h5方法

二、Android基本配置

 WebSettings webSettings=webView.getSettings();
        //设置为可调用js方法
        webSettings.setJavaScriptEnabled(true);
        webView.setWebViewClient(new WebViewClient());
        webView.setWebChromeClient(new WebChromeClient());
        //js调用android
        webView.addJavascriptInterface(new JsCommunication(), "handleMessage");
        //你自己的h5地址
        webView.loadUrl("http://192.168.23.6:8080/#/webview");

三、 vue代码

四、App调用h5方法

注意，Vue中的方法通常是写在vue实例的methods中的，app无法直接调用，此时在页面的onMounted钩子里将方法挂在window下即可。

Vue代码

 onMounted(()=>{
        //挂载方法到window上面
        window.sendImageURL=sendImageURL
        //可以直接定义成匿名函数
        window.show=()=>{
            obj.isShow=!obj.isShow
        }
    })
 const sendImageURL=(imgUrl)=>{
        obj.imgUrl=imgUrl
    }

Android可以通过：  webView.loadUrl("javascript:sendImageURL('" + img + "')");

sendImageURL：方法名

img：需要传递的参数

 btn.setOnClickListener(v->{
           //android调用js，无参数无返回值
            webView.loadUrl("javascript:show()");
        });
        btn2.setOnClickListener(v->{
            //android调用js，无参数无返回值
            webView.loadUrl("javascript:sendImageURL('" + img + "')");

        });

IOS类似Android

NSString *img = @"图片地址";

NSString *jsStr = [NSString stringWithFormat:@"sendImageURL('%@')",img];
 
[self->_wkWebView evaluateJavaScript:jsStr completionHandler:^(id _Nullable d, NSError * _Nullable error) {
 
  NSLog(@"状态---%@",d);//回调值
 
}];

五、h5调用app方法

 vue方法，注意一定要挂载到window上，不然回报未定义，点掉叉号后虽然调用的时候能成功。

 

handleMessage：app上面定义的接口名称

toast：app上定义的方法名称

const jsAndroid=()=>{
        window.handleMessage.toast('你好，调用成功？')  
    }
    const jsIos=()=>{
        window.webkit.messageHandlers.toast.postMessage('你好，调用成功？');
    }
    const jsAI=()=>{
        //app端会拿到对应的方法，然后app端做处理
        if (obj.isIOS) {
                window.webkit.messageHandlers.toast.postMessage('1212121');
            } else if (obj.isAndroid) {
                window.handleMessage.toast('你好，调用成功？') 
            }
    }

Android代码

 //js调用android
 webView.addJavascriptInterface(new JsCommunication(), "handleMessage"); 
 public  class JsCommunication {

        @JavascriptInterface
        public void toast(String json) {
            Toast.makeText(MainActivity.this,json,Toast.LENGTH_LONG).show();
        }

    }

以上就是遇到的问题和总结，希望对你有帮助。