小程序使用web-view內(nèi)嵌H5，小程序和H5之間的通訊
- 小程序通過web-view實現(xiàn)內(nèi)嵌H5沽瞭，以下是小程序向H5的通訊方式：
- 通過web-view的src傳遞參數(shù)。這里傳遞了platform和token兩個參數(shù)懊直。
<web-view
:src="`http://192.168.10.6:8080/#/subPages/packageA/pages/upload/index?platform=mp-weixin&token=${token}`"
@message="handleMessage"
/>
- H5向小程序通訊笔宿，需要使用到微信小程序的SDK，可以通過wx.miniProgram.postMessage向小程序傳遞消息稳摄。小程序通過監(jiān)聽message時間來接收數(shù)據(jù)稚字。這一方案存在以下問題：
- 網(wǎng)頁H5向小程序 postMessage 時，會在特定時機(jī)（后退厦酬、組件銷毀胆描、分享）觸發(fā)并收到消息。
- 即使小程序和H5都是用uniapp仗阅，H5也是需要注入小程序SDK的昌讲，在H5調(diào)用小程序方法時，如果出現(xiàn)wx.miniProgram undefined 的問題時减噪，表示小程序SDK注入失敗短绸，可以在H5應(yīng)用啟動的適合通過代碼的方式注入小程序SDK。
// 在APP.vue onLaunch H5 中注入小程序SDK旋廷，uniapp需要這樣的注入
onLaunch: function () {
// #ifdef H5
// H5注入微信SDK鸠按，使H5可以使用 wx.miniProgram
const script = document.createElement('script');
script.src = "https://res.wx.qq.com/open/js/jweixin-1.4.0.js";
document.body.appendChild(script);
// #endif
},
// 在H5中使用wx.miniProgram的方法向小程序傳遞信息
saveFile() {
const result = []
for(const key in this.fileList) {
const item = this.fileList[key];
if(item.type === 'success') {
result.push(item.result)
}
}
console.log('wx', wx)
if(this.platform === 'mp-weixin') {
// 小程序 回退
wx.miniProgram.navigateBack({
delta: 1,
})
wx.miniProgram.postMessage({
data: {
result
}
})
}else{
uni.navigateBack({
delta: 1,
success: () => {
uni.$emit('uploadFileResult', result)
}
})
}
}
H5 如何實現(xiàn)調(diào)用 安卓 的方法：
1. 創(chuàng)建一個Java類：這個類將包含你希望從安卓端暴露給H5頁面的方法。確保這些方法是可以被JavaScript安全調(diào)用的饶碘。
public class MyJavaBridge {
@JavascriptInterface // 這個注解是必需的目尖，用于告訴WebView這個方法可以被JavaScript安全地調(diào)用
public String getShareData() {
// 這里是獲取分享數(shù)據(jù)的邏輯，可以是任何字符串或數(shù)據(jù)結(jié)構(gòu)
return "Here is the share data";
}
}
2. 配置WebView扎运，啟用JavaScript：在WebView的設(shè)置中啟用JavaScript瑟曲，這是與H5頁面進(jìn)行交互的基礎(chǔ)。
WebView webView = findViewById(R.id.webView);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
3. 添加Java對象到WebView：使用addJavascriptInterface方法將你的Java對象添加到WebView中豪治，并為其指定一個JavaScript中可訪問的名稱洞拨。
webView.addJavascriptInterface(new MyJavaBridge(), "androidBridge"); // 這里將對象命名為"androidBridge"
4. 加載H5頁面： 使用WebView加載你的H5頁面。
webView.loadUrl("file:///android_asset/your_page.html"); // 或者是一個網(wǎng)絡(luò)URL
在H5頁面的JavaScript中調(diào)用Java方法： 現(xiàn)在负拟，你可以在H5頁面的JavaScript代碼中通過window.androidBridge來訪問你添加的Java對象烦衣，并調(diào)用其方法。
// 在H5頁面的JavaScript代碼中
function callAndroidMethod() {
var shareData = window.androidBridge.getShareData();
console.log(shareData); // 處理從安卓端獲取的數(shù)據(jù)
}
h5是如何調(diào)用IOS內(nèi)的方法的：
- 在iOS項目中，設(shè)置WKWebView并配置WKUserContentController來監(jiān)聽來自H5頁面的消息花吟。
- 實現(xiàn)WKScriptMessageHandler協(xié)議的方法來處理接收到的消息秸歧。
- 在H5頁面中，使用window.webkit.messageHandlers.<messageName>.postMessage來發(fā)送消息給iOS衅澈。
IOS端代碼：
import UIKit
import WebKit
class ViewController: UIViewController, WKScriptMessageHandler {
var webView: WKWebView!
override func viewDidLoad() {
super.viewDidLoad()
let contentController = WKUserContentController()
contentController.add(self, name: "iosMethod") // 注冊一個消息名稱
let config = WKWebViewConfiguration()
config.userContentController = contentController
webView = WKWebView(frame: .zero, configuration: config)
view.addSubview(webView)
// 設(shè)置webView的約束等布局代碼...
if let url = Bundle.main.url(forResource: "index", withExtension: "html") {
webView.loadFileURL(url, allowingReadAccessTo: url)
}
}
// 實現(xiàn)WKScriptMessageHandler協(xié)議的方法
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
if message.name == "iosMethod", let body = message.body as? [String: Any] {
// 在這里處理從H5頁面發(fā)送過來的消息
if let method = body["method"] as? String, let param = body["param"] {
callNativeMethod(method, param)
}
}
}
func callNativeMethod(_ method: String, _ param: Any) {
// 根據(jù)method的值調(diào)用對應(yīng)的iOS原生方法键菱，并傳入param參數(shù)
// 例如：
if method == "showAlert" {
let alertController = UIAlertController(title: "Alert", message: "\(param)", preferredStyle: .alert)
alertController.addAction(UIAlertAction(title: "OK", style: .default, handler: nil))
self.present(alertController, animated: true, completion: nil)
}
// 可以添加更多的方法調(diào)用...
}
}
<script>
H5端代碼：
function callIOSMethod() {
// 發(fā)送消息給iOS，消息名稱為"iosMethod"今布，消息體為一個包含方法名和參數(shù)的字典
window.webkit.messageHandlers.iosMethod.postMessage({
method: "showAlert",
param: "Hello from H5!"
});
}
</script>
