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