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

最后

以上就是炙热鸡翅为你收集整理的Vue 向 iOS发送消息的全部内容，希望文章能够帮你解决Vue 向 iOS发送消息所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。