Vue 向 iOS发送消息

1、准备一个Vue项目

因为界面写起来有点费劲，我就只把Vue里面的App.vue加了一个按钮div

<template>
  <div id="app">
    <div id="nav">
      <!-- 这一行是用于做向iOS传值的一个按钮div -->
      <div class="to-native-button" @click="clickButtonToSendMsg">clickMe</div>
    </div>
    <router-view />
  </div>
</template>

//写入当前文件对应的js脚本
<script type = "text/javascript">
//声明一个当前文件作用域的函数
function sendMsg() {

 //向iOS通信的关键
  window.webkit.messageHandlers.sendMsg.postMessage({"param":"参数"});
}
export default {
  methods: {
//注册已经声明的标签点击事件
    clickButtonToSendMsg: function() {
      sendMsg();
    },
  }
};

</script>

2、创建iOS项目

交互使用的是WKWebView，和JavaScriptsCore，所以优先引入相关库文件

import JavaScriptCore
import WebKit

在WKWebView中，WKUserContentController提供了js像webView发送信息的一个通道

/** A WKUserContentController object provides a way for JavaScript to post
 messages to a web view.
 The user content controller associated with a web view is specified by its
 web view configuration.
 */
@available(iOS 8.0, *)
open class WKUserContentController : NSObject,

配置一下WKUserContentController这个类

// 创建js与webview的通道
   let userController = WKUserContentController();
/*
 scriptMessageHandler： js发送过来的信息由这个代理对象进行处理 需要遵循WKScriptMessageHandler 协议
 name：监听的js函数的名称
         
window.webkit.messageHandlers.sendMsg.postMessage({"param":"参数"});
上面的name参数就是messageHandlers.sendMsg后面的sendMsg，而scriptMessageHandler对应的就是messageHandlers
*/
   userController.add(self, name: "sendMsg");

看一下做简单通信需要用到的钩子函数

//    回调函数返回js发送到webview中的消息
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        print("Message.body:\(message.body)\n, Message.name:\(message.name)\n, Message.frameInfo:\(message.frameInfo)");
    }

基本做完上面的基本配置，就可以通过vue里面的函数向webView发送消息了。

####最后 iOS端全部代码

//
//  ViewController.swift
//  vue2Native
//
//  Created by MuSoul on 2019/12/18.
//  Copyright © 2019 MuSoul. All rights reserved.
//

import UIKit
import JavaScriptCore
import WebKit

class ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate, WKScriptMessageHandler {
    
    var webView: WKWebView!;
    
    let keyPath_Title = "title";

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        configUI();
    }

    func configUI() {
        self.view.backgroundColor = .white;
        configWebView();
    }
    
    func configWebView() {
//        创建js与webview的通道
        let userController = WKUserContentController();
        /*
         scriptMessageHandler： js发送过来的信息由这个代理对象进行处理 需要遵循WKScriptMessageHandler 协议
         name：监听的js函数的名称
         window.webkit.messageHandlers.sendMsg.postMessage({"param":"参数"});
         上面的name参数就是messageHandlers.sendMsg后面的sendMsg，而scriptMessageHandler对应的就是messageHandlers
         */
        userController.add(self, name: "sendMsg")
//        配置创建webview的参数
        let config = WKWebViewConfiguration();
        config.preferences.javaScriptEnabled = true;
        config.userContentController = userController;
        webView = WKWebView.init(frame: self.view.bounds, configuration: config);
        webView.uiDelegate = self;
        webView.navigationDelegate = self;
        webView.load(URLRequest.init(url: URL.init(string: "http://192.168.31.63:8080/")!));
        self.view.addSubview(webView);
        addObserver();
    }
    
    func addObserver() {
        webView.addObserver(self, forKeyPath: keyPath_Title, options: NSKeyValueObservingOptions.new, context: nil);
    }
    
    func removeDataRelatinghObserver() {
        webView.removeObserver(self, forKeyPath: keyPath_Title)
    }
    
    override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
        print(keyPath ?? "keyPath is undefine");
        if keyPath == "title" && (object as! WKWebView) == webView {
            print(webView.title ?? "keyPath is undefine");
        }
    }
    
//    回调函数返回js发送到webview中的消息
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        print("Message.body:\(message.body)\n, Message.name:\(message.name)\n, Message.frameInfo:\(message.frameInfo)");
    }
    
//    web页面开始加载时回调此函数
    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        
    }
//    web页面加载失败是回调此函数
    func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
        
    }
    
//    开始加载数据时回调此函数
    func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
        
    }
    
//    页面加载完成后回调此函数，此时web页面所有数据均以加载成功
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
//        此处打印我的web界面title：native2vue
        print("title \(webView.title ?? "")");
//        数据已经加载完成，在此处移除所有数据监听相关的observer
        removeDataRelatinghObserver();
    }
   
}