2023uniapp实现如何使用JSBridge实现与原生交互

uniapp实现如何使用JSBridge实现与原生交互，需要具体代码示例

一、背景介绍

在移动应用开发中，有时需要与原生环境进行交互，比如调用原生的一些功能或获取原生的一些数据。uniapp作为一种跨平台的移动应用开发框架，提供了一种方便的方式来实现与原生交互，即使用JSBridge进行通信。

JSBridge是一种前端与移动原生端进行交互的技术方案，通过在前端和原生端分别实现一个桥梁，使得前端可以调用原生的方法和获取原生的数据，同时原生也可以通过桥梁向前端发送消息。

二、JSBridge的实现步骤

1. 在uniapp项目中创建一个新的js文件，命名为JSBridge.js。这个文件将作为前端与原生交互的桥梁。
2. 在JSBridge.js文件中定义一个全局对象，用于存储前端和原生之间的消息和回调函数。示例代码如下：

// JSBridge.js

let messageHandlers = {}; // 存储前端和原生之间的消息和回调函数

// 注册消息处理函数，前端通过调用此函数来注册对应的回调函数
function registerHandler(name, handler) {
  messageHandlers[name] = handler;
}

// 发送消息到原生
function sendMessageToNative(name, data, callback) {
  let message = {
    name: name,
    data: data
  };
  
  // 注册回调函数
  if (callback) {
    let callbackId = 'cb_' + Date.now();
    message.callbackId = callbackId;
    messageHandlers[callbackId] = callback;
  }
  
  // 向原生发送消息
  window.webkit.messageHandlers[name].postMessage(message);
}

// 处理原生发送过来的消息
function handleMessageFromNative(message) {
  let handler = messageHandlers[message.name];
  
  if (handler) {
    handler(message.data, function(response) {
      sendMessageToNative(message.callbackId, response); // 发送回调消息给原生
    });
  }
}

window.messageHandlers = messageHandlers;
window.registerHandler = registerHandler;
window.sendMessageToNative = sendMessageToNative;
window.handleMessageFromNative = handleMessageFromNative;

3. 在uniapp项目中的main.js文件中引入JSBridge.js，并注册消息处理函数，示例代码如下：

// main.js

import JSBridge from './JSBridge.js';

// 注册消息处理函数，前端通过调用此函数来注册对应的回调函数
JSBridge.registerHandler('getUserInfo', function(data, callback) {
  console.log('前端收到getUserInfo消息：', data);
  
  // 假设需要获取用户信息，可以通过uniapp的API来实现
  let userInfo = uni.getUserInfo();
  
  // 返回获取到的用户信息给原生
  callback(userInfo);
});

// 假设页面上有一个按钮，点击按钮时调用原生的方法
document.getElementById('btn').addEventListener('click', function() {
  // 发送消息到原生
  JSBridge.sendMessageToNative('showAlert', { title: 'Hello', message: 'World' });
});

4. 在原生环境中实现与前端交互的功能和逻辑。示例代码如下：

// 在iOS原生代码中

import WebKit

class ViewController: UIViewController {
  var webView: WKWebView!

  override func viewDidLoad() {
    super.viewDidLoad()
    
    // 创建WebView
    webView = WKWebView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: view.bounds.height))
    view.addSubview(webView)
    
    // 加载uniapp的HTML文件
    if let url = Bundle.main.url(forResource: "uniapp", withExtension: "html") {
      webView.loadFileURL(url, allowingReadAccessTo: url)
    }
    
    // 注册JSBridge处理函数，用于处理前端发送来的消息
    webView.configuration.userContentController.add(self, name: "getUserInfo")
    webView.configuration.userContentController.add(self, name: "showAlert")
  }
}

extension ViewController: WKScriptMessageHandler {
  func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    if let body = message.body as? [String: Any] {
      let name = message.name
      
      if name == "getUserInfo" {
        print("原生收到getUserInfo消息：", body)
        
        // TODO: 获取原生的用户信息
        
        // 返回用户信息给前端
        let userInfo = [
          "name": "John",
          "age": 20
        ]
        let response = [
          "data": userInfo
        ]
        let javascript = "window.handleMessageFromNative((response))"
        webView.evaluateJavaScript(javascript, completionHandler: nil)
      }
      else if name == "showAlert" {
        print("原生收到showAlert消息：", body)
        
        // 假设实现一个弹窗功能
        let title = body["title"] as? String ?? ""
        let message = body["message"] as? String ?? ""
        let alertController = UIAlertController(title: title, message: message, preferredStyle: .alert)
        alertController.addAction(UIAlertAction(title: "OK", style: .default, handler: nil))
        present(alertController, animated: true, completion: nil)
      }
    }
  }
}

三、使用JSBridge进行前端与原生交互

通过上述的步骤，我们已经实现了基本的JSBridge桥梁和消息处理函数。在前端代码中，我们可以调用JSBridge.sendMessageToNative()方法向原生发送消息，同时也可以注册对应的消息处理函数，如示例中的JSBridge.registerHandler()。在原生代码中，我们通过userContentController.add()方法注册处理函数，用于接收前端发送的消息，并实现相应的功能。

在页面中，当点击按钮时，调用JSBridge.sendMessageToNative('showAlert', { title: 'Hello', message: 'World' })方法发送消息到原生，原生接收到消息后，弹出一个带有标题和内容的弹窗。另外，当前端需要获取用户信息时，调用JSBridge.sendMessageToNative('getUserInfo')方法发送消息给原生，原生返回用户信息后，前端通过回调函数获取到数据并进行处理。

总结起来，使用JSBridge可以方便地实现uniapp与原生环境之间的交互，并且可以在前端和原生中分别实现自己的功能和逻辑。通过注册消息处理函数，可以灵活地进行消息的传递和处理。

以上是关于uniapp使用JSBridge实现与原生交互的简要介绍和代码示例，希望对你有所帮助。