uniapp は、JSBridge を使用してネイティブと対話する方法を?qū)g裝しており、特定のコード例が必要です

1. 背景の紹介

モバイル アプリケーション開(kāi)発では、場(chǎng)合によっては、ネイティブ関數(shù)の呼び出しやネイティブ データの取得など、ネイティブ環(huán)境と対話します。クロスプラットフォームのモバイル アプリケーション開(kāi)発フレームワークとして、uniapp は、通信に JSBridge を使用して、ネイティブ デバイスと対話するための便利な方法を提供します。

JSBridge は、フロントエンドがモバイル ネイティブ エンドと対話するための技術(shù)ソリューションです。フロントエンドとネイティブ エンドにそれぞれブリッジを?qū)g裝することで、フロントエンドはネイティブ メソッドを呼び出し、ネイティブ エンドを取得できます。同時(shí)に、ネイティブ エンドもブリッジからフロント エンドにメッセージを送信できます。

2. JSBridge 実裝手順

1. uniapp プロジェクトに新しい js ファイルを作成し、JSBridge.js という名前を付けます。このファイルは、フロントエンドとネイティブの対話の間のブリッジとして機(jī)能します。
2. JSBridge.js ファイルにグローバル オブジェクトを定義して、フロントエンドとネイティブの間のメッセージとコールバック関數(shù)を保存します。サンプルコードは以下のとおりです:

// JSBridge.js

let messageHandlers = {}; // 存儲(chǔ)前端和原生之間的消息和回調(diào)函數(shù)

// 注冊(cè)消息處理函數(shù)，前端通過(guò)調(diào)用此函數(shù)來(lái)注冊(cè)對(duì)應(yīng)的回調(diào)函數(shù)
function registerHandler(name, handler) {
  messageHandlers[name] = handler;
}

// 發(fā)送消息到原生
function sendMessageToNative(name, data, callback) {
  let message = {
    name: name,
    data: data
  };
  
  // 注冊(cè)回調(diào)函數(shù)
  if (callback) {
    let callbackId = 'cb_' + Date.now();
    message.callbackId = callbackId;
    messageHandlers[callbackId] = callback;
  }
  
  // 向原生發(fā)送消息
  window.webkit.messageHandlers[name].postMessage(message);
}

// 處理原生發(fā)送過(guò)來(lái)的消息
function handleMessageFromNative(message) {
  let handler = messageHandlers[message.name];
  
  if (handler) {
    handler(message.data, function(response) {
      sendMessageToNative(message.callbackId, response); // 發(fā)送回調(diào)消息給原生
    });
  }
}

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

3. uniappプロジェクトのmain.jsファイルにJSBridge.jsを?qū)毪贰ⅴ幞氓哗`ジ処理関數(shù)を登録します。

// main.js

import JSBridge from './JSBridge.js';

// 注冊(cè)消息處理函數(shù)，前端通過(guò)調(diào)用此函數(shù)來(lái)注冊(cè)對(duì)應(yīng)的回調(diào)函數(shù)
JSBridge.registerHandler('getUserInfo', function(data, callback) {
  console.log('前端收到getUserInfo消息：', data);
  
  // 假設(shè)需要獲取用戶信息，可以通過(guò)uniapp的API來(lái)實(shí)現(xiàn)
  let userInfo = uni.getUserInfo();
  
  // 返回獲取到的用戶信息給原生
  callback(userInfo);
});

// 假設(shè)頁(yè)面上有一個(gè)按鈕，點(diǎn)擊按鈕時(shí)調(diào)用原生的方法
document.getElementById('btn').addEventListener('click', function() {
  // 發(fā)送消息到原生
  JSBridge.sendMessageToNative('showAlert', { title: 'Hello', message: 'World' });
});

4. フロントエンドと対話する機(jī)能とロジックをネイティブ環(huán)境に実裝します。サンプル コードは次のとおりです:

// 在iOS原生代碼中

import WebKit

class ViewController: UIViewController {
  var webView: WKWebView!

  override func viewDidLoad() {
    super.viewDidLoad()
    
    // 創(chuàng)建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)
    }
    
    // 注冊(cè)JSBridge處理函數(shù)，用于處理前端發(fā)送來(lái)的消息
    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)
        
        // 假設(shè)實(shí)現(xiàn)一個(gè)彈窗功能
        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)
      }
    }
  }
}

3. フロントエンドとネイティブの対話に JSBridge を使用する

上記の手順を通じて、基本的な JSBridge ブリッジとメッセージ処理関數(shù)を?qū)g裝しました。 。フロントエンド コードでは、JSBridge.sendMessageToNative() メソッドを呼び出してネイティブにメッセージを送信できます。また、JSBridge.registerHandler( など) 対応するメッセージ処理関數(shù)を登録することもできます。 ) 例では。ネイティブ コードでは、userContentController.add() メソッドを通じて処理関數(shù)を登録し、フロントエンドから送信されたメッセージを受信し、対応する関數(shù)を?qū)g裝します。

ページで、ボタンをクリックすると、JSBridge.sendMessageToNative('showAlert', { title: 'Hello', message: 'World' }) メソッドを呼び出して、ネイティブへのメッセージ。メッセージをネイティブで受信すると、タイトルと內(nèi)容を含むポップアップ ウィンドウが表示されます。さらに、フロントエンドがユーザー情報(bào)を取得する必要がある場(chǎng)合は、JSBridge.sendMessageToNative('getUserInfo') メソッドを呼び出してネイティブにメッセージを送信します。ネイティブがユーザー情報(bào)を返した後、フロントエンドはコールバック関數(shù)を通じてデータを取得し、処理します。

要約すると、JSBridge を使用すると、uniapp とネイティブ環(huán)境の間の対話を簡(jiǎn)単に実現(xiàn)でき、フロントエンドとネイティブにそれぞれ獨(dú)自の機(jī)能とロジックを?qū)g裝できます。メッセージ処理機(jī)能を登録することで、柔軟にメッセージの配信や処理を行うことができます。

以上は、JSBridge を使用してネイティブ インタラクションを?qū)g現(xiàn)する uniapp についての簡(jiǎn)単な紹介とコード例です。

以上がuniapp 実裝は JSBridge を使用してネイティブと対話する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。