ホームページ > 記事 > ウェブフロントエンド > Vue.js と Swift 言語の統合、高度な iOS アプリケーションの開発とテストの提案
Vue.js は、ユーザー インターフェイスを構築するための人気のある JavaScript フレームワークです。 Swift 言語は、iOS および macOS アプリケーションの開発に使用されるプログラミング言語です。この記事では、高度な iOS アプリケーションの開発とテストのために Vue.js を Swift 言語と統合する方法を検討します。
始める前に、次のソフトウェアとツールがインストールされていることを確認する必要があります:
まず、新しい Vue.js プロジェクトを作成しましょう。ターミナルを開いて次のコマンドを実行します。
vue create my-app
希望の構成オプションを選択し、プロジェクトの作成が完了するまで待ちます。次に、プロジェクト ディレクトリを入力します。
cd my-app
次に、Vue.js アプリケーションを iOS プロジェクトに埋め込む必要があります。まず、Xcode を開いて、新しいシングル ビュー アプリ プロジェクトを作成します。プロジェクトを作成するときは、必ず開発言語として Swift を選択してください。次に、プロジェクト ディレクトリで ViewController.swift
ファイルを見つけて、次のコードに置き換えます。
import UIKit import WebKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() let webView = WKWebView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height)) view.addSubview(webView) if let url = URL(string: "http://localhost:8080") { let request = URLRequest(url: url) webView.load(request) } } }
上記のコードは、WKWebView
クラスを使用して Vue を読み込みます。 js アプリケーションのエントリ ファイル。これは、Vue.js アプリケーションがローカル サーバー上で実行され、ポート localhost:8080
でリッスンしていることを前提としていることに注意してください。 iOS シミュレーターを実行する前に、必ず Vue.js アプリケーションを起動してください。次のコマンドを使用して、Vue.js 開発サーバーを起動できます:
npm run serve
正常に実行されると、iOS シミュレーターで Vue.js アプリケーションのインターフェイスを確認できるようになります。
次に、Swift で Vue.js アプリケーションを操作する方法を見てみましょう。 WKWebView
の evaluateJavaScript
メソッドを通じて JavaScript コードを実行できます。 ViewController.swift
ファイルに、Swift から Vue.js の関数を呼び出す方法を示す次のコードを追加します。
func callVueFunction() { let script = "myVueFunction('Hello from Swift!')" webView.evaluateJavaScript(script, completionHandler: nil) }
上記のコードは、myVueFunction という名前の関数を呼び出します。
を入力し、文字列引数を渡します。 Swift からこの関数を呼び出すには、適切な場所で callVueFunction
メソッドを呼び出します。
一方、Vue.js アプリケーションの window.webkit.messageHandlers
オブジェクトを使用して、JavaScript から Swift 関数を呼び出すこともできます。 Vue.js アプリケーションから Swift 関数を呼び出す方法を示すサンプルを作成してみましょう。 Vue.js プロジェクトのエントリ ファイルに、次のコードを追加します。
// ... // declare the Swift function function swiftFunction(message) { window.webkit.messageHandlers.swiftFunction.postMessage(message) } // ...
上記のコードは、swiftFunction
という名前の JavaScript 関数を宣言し、window.webkit.messageHandlers を使用します。 swiftFunction .postMessage
メソッドは、メッセージを Swift 関数に渡します。 Swift プロジェクトのビュー コントローラーに、Vue.js アプリケーションから呼び出される関数を処理する次のコードを追加します。
import WebKit import Foundation class ViewController: UIViewController, WKScriptMessageHandler { // ... func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) { if message.name == "swiftFunction" { if let body = message.body as? String { print(body) } } } // ... override func viewDidLoad() { super.viewDidLoad() // ... let userContentController = webView.configuration.userContentController userContentController.add(self, name: "swiftFunction") // ... } }
上記のコードでは、まずビュー コントローラー クラスの WKScriptMessageHandler に従います。 ###プロトコル。次に、Vue.js アプリケーションから渡されたメッセージを処理するための
userContentController という名前のメソッドを実装します。メッセージの名前は、Vue.js アプリケーションの関数名に対応する必要があることに注意してください。
以上がVue.js と Swift 言語の統合、高度な iOS アプリケーションの開発とテストの提案の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。