Comment l'implémentation d'Uniapp utilise-t-elle JSBridge pour interagir avec le natif

uniapp implémente comment utiliser JSBridge pour interagir avec le natif, ce qui nécessite des exemples de code spécifiques

1 Introduction au contexte

Dans le développement d'applications mobiles, il est parfois nécessaire d'interagir avec l'environnement natif, par exemple en appelant certaines fonctions natives. ou obtenir des données natives. En tant que cadre de développement d'applications mobiles multiplateforme, uniapp offre un moyen pratique d'interagir avec des appareils natifs, en utilisant JSBridge pour communiquer.

JSBridge est une solution technique permettant au front-end d'interagir avec le natif mobile En implémentant respectivement un pont sur le front-end et le natif, le front-end peut appeler des méthodes natives et obtenir des données natives. En même temps, l'extrémité native peut également être envoyée au front-end via les informations du pont.

2. Étapes de mise en œuvre de JSBridge

1. Créez un nouveau fichier js dans le projet uniapp et nommez-le JSBridge.js. Ce fichier servira de pont entre les interactions front-end et natives.
2. Définissez un objet global dans le fichier JSBridge.js pour stocker les messages et les fonctions de rappel entre le front-end et le natif. L'exemple de code est le suivant :

// 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. Introduisez JSBridge.js dans le fichier main.js du projet uniapp et enregistrez la fonction de traitement des messages. L'exemple de code est le suivant : 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')

Implémentez les fonctions et la logique d'interaction avec le front-end dans l'environnement natif. L'exemple de code est le suivant :

rrreee

3. Utilisez JSBridge pour l'interaction frontale et native 🎜🎜Grâce aux étapes ci-dessus, nous avons implémenté le pont JSBridge de base et les fonctions de traitement des messages. Dans le code front-end, nous pouvons appeler la méthode JSBridge.sendMessageToNative() pour envoyer des messages de manière native, et nous pouvons également enregistrer la fonction de traitement de message correspondante, telle que JSBridge.registerHandler() dans l'exemple code>. Dans le code natif, nous enregistrons la fonction de traitement via la méthode userContentController.add() pour recevoir les messages envoyés par le front-end et implémenter les fonctions correspondantes. 🎜🎜Dans la page, lorsque le bouton est cliqué, appelez la méthode JSBridge.sendMessageToNative('showAlert', { title: 'Hello', message: 'World' }) pour envoyer le message au natif, et le natif le recevra. Après le message, une fenêtre contextuelle avec le titre et le contenu apparaît. De plus, lorsque le front-end a besoin d'obtenir des informations sur l'utilisateur, il appelle la méthode JSBridge.sendMessageToNative('getUserInfo') pour envoyer un message au natif. Une fois que le natif a renvoyé les informations sur l'utilisateur, le natif. le front-end obtient les données via la fonction de rappel et les traite. 🎜🎜Pour résumer, l'utilisation de JSBridge peut facilement réaliser l'interaction entre uniapp et l'environnement natif, et peut implémenter ses propres fonctions et logiques respectivement dans le front-end et dans le natif. En enregistrant les fonctions de traitement des messages, les messages peuvent être transmis et traités de manière flexible. 🎜🎜Ce qui précède est une brève introduction et des exemples de code sur uniapp utilisant JSBridge pour implémenter une interaction native. J'espère que cela vous sera utile. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!