Detailed explanation of interaction between Vue (h5) and App (android, ios)

Foreword:

I recently developed vue to interact with the app and summarized my development experience. I am an Android developer, and I have also been involved in Vue development. Displaying h5 in Android or IOS can reduce the workload and satisfy the user experience. The following mainly introduces the Android and Vue methods.

The food is served

 

 

1. Two forms of interaction between h5 and App

1.h5 calls the app’s native method.

2. App uses h5 method

2. Android basic configuration

 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");

3. vue code

<template>
  <div class="box">
    <button @click="jsAndroid">JS调用Android方法</button>
    <button @click="jsIos">JS调用IOS方法</button>
    <button @click="jsAI">JS调用Android||IOS方法</button>
    <div>
      <span>Android||IOS调用h5方法,控制内用显示</span>
      <div v-if="isShow">
       <img src="https://imgsa.baidu.com/forum/w%3D580/sign=1b2a89cb16950a7b75354ecc3ad0625c/2635349b033b5bb59ec8f2033dd3d539b600bc35.jpg" alt="">
    </div>
    </div>
    <div>
      <span>Android||IOS调用h5方法,并传值</span>
      <img :src="imgUrl" alt="">
    </div>
  </div>
</template>
<script>
import { toRefs, reactive, onMounted } from "vue";

export default {
  // vue3.0 钩子函数写法
  setup() {
    const obj = reactive({
      isShow: false,
      content: "接受内容",
      imgUrl:'https://pic4.zhimg.com/v2-112e0474e000e98e8fbd22ced185c923_b.gif',
    //   这里Android和ios判断固定了，判断方法这里就不写了，网上很多资料
      isIOS:false,
      isAndroid:true
    })
    onMounted(()=>{
        window.sendImageURL=sendImageURL
        window.show=()=>{
            obj.isShow=!obj.isShow
        }
    })
    const jsAndroid=()=>{
        window.handleMessage.toast('你好，调用成功？')  
    }
    const jsIos=()=>{
        window.webkit.messageHandlers.handleMessage.toast('你好，调用成功？');
    }
    const jsAI=()=>{
        //app端会拿到对应的方法，然后app端做处理
        if (obj.isIOS) {
                window.webkit.messageHandlers.handleMessage.toast('1212121');
            } else if (obj.isAndroid) {
                window.handleMessage.toast('你好，调用成功？') 
            }
    }
    const sendImageURL=(imgUrl)=>{
        obj.imgUrl=imgUrl
    }
    return {
      ...toRefs(obj),
      jsAndroid,
      jsIos,
      jsAI,
      sendImageURL
    };
  },
};
</script>
<style lang="scss" scoped>
* {
  margin: 0px;
  padding: 0px;
}
.box {
  display: flex;
  flex-direction: column;
  button {
    margin: 10px;
    padding: 18px;
    background: gold;
    color: #fff;
    font-weight: 700;
    border: none;
  }
  img {
    width: 188px;
    height: 127px;
  }
}
</style>

4. App calls h5 method

Note that methods in Vue are usually written in the methods of the Vue instance and cannot be called directly by the app. At this time, just hang the method under the window in the onMounted hook of the page.

Vue code

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

Android can pass: webView.loadUrl("javascript:sendImageURL('" + img + "')");

sendImageURL: method name

img: Parameters that need to be passed

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

        });

iOS is similar to Android

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

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

5. h5 calls app method

 For the vue method, please note that it must be mounted on the window, otherwise the return will be undefined. Even if you click off the cross, the call will be successful.

 

handleMessage: the interface name defined above in the app

toast: the method name defined on the 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 code

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

    }

The above are the problems encountered and summary, I hope it will be helpful to you.