vue3.0 前端和客户端混合开发

1.客户端发送消息

iOS给前端发送消息

self.mainWebView.evaluateJavaScript("appCallJsListInit()") { object, error in

}               

image.png

vue3.0中接收客户端发送消息(在index.html中)

<script>
function appCallJsListInit(e) {

}
</script>

前端接收客户端发送消息(在子页面中)

<script>
export default {
  name: "",
  components: {},
  setup(props, context) {
    window["appCallJsListInit"] = (e) => {
    };
    return {
    };
  },
};
</script>

2.客户端接收消息

前端给客户端发送消息

<script>
import { onMounted } from "vue";

let u = navigator.userAgent; //判断浏览器型号
let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

export default {
  name: "",
  components: {},
  setup(props, context) {

    onMounted(() => {
      if (isiOS) {
        window.webkit.messageHandlers.jsCallAppInit.postMessage("");
      } else {
        window.wst.jsCallAppInit("");
      }
    });

    return {
    };
  },
};
</script>

iOS接收前端发送的消息

    override func viewWillAppear(_ animated: Bool) {
        
        mainWebView.configuration.userContentController.add(self, name: "jsCallAppInit")
 
    }
    
    override func viewDidDisappear(_ animated: Bool) {
        super.viewDidDisappear(animated)
       mainWebView.configuration.userContentController.removeScriptMessageHandler(forName: "jsCallAppInit")
 
    }

   func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {

        switch message.name {
        case "jsCallAppInit":
            //初始化
            requestInitData()
 
        default: break
        }
    }