在現(xiàn)代移動應(yīng)用開發(fā)中，原生App與H5頁面之間的交互已經(jīng)成為一個常見的需求。本文將介紹如何在Vue.js框架中實(shí)現(xiàn)原生App與H5頁面之間的數(shù)據(jù)傳遞和方法調(diào)用。我們將通過一個簡單的示例來展示如何實(shí)現(xiàn)這一功能。
效果圖如下:
首先，我們需要在Vue.js項(xiàng)目中引入原生App與H5頁面之間的通信橋梁。在這個示例中，我們將使用一個名為bridge.js的文件來實(shí)現(xiàn)這個功能。bridge.js文件內(nèi)容如下：
// #ifdef H5
import Vue from 'vue';
import { registerHandler } from '@/utils/bridge.js';
Vue.prototype.$bridge = {
registerHandler(name, handler) {
registerHandler(name, handler);
},
};
// #endif
接下來，我們在Vue.js組件中定義兩個方法：appToH5()和h5ToApp()。這兩個方法分別用于實(shí)現(xiàn)原生App向H5頁面?zhèn)鬟f數(shù)據(jù)和H5頁面向原生App發(fā)送數(shù)據(jù)的功能。
<template>
<view class="content">
<view class="text-area" @click="appToH5()">原生app調(diào)用H5方法(原生給H5傳值)</view>
<view class="text-area" @click="h5ToApp()">H5調(diào)用原生App方法 (H5給原生傳值)</view>
</view>
</template>
在Vue.js組件的methods對象中，我們定義了這兩個方法的具體實(shí)現(xiàn)：
export default {
data() {
return {
title: 'Hello',
myObjData: {},
};
},
mounted() {
this.appToH5();
},
methods: {
appToH5() {
const handlerName = 'dataToJs'; // 在bridge.js中注冊的處理函數(shù)名
const data = JSON.stringify(this.myObjData); // 需要傳遞的數(shù)據(jù)，這里以JSON字符串形式表示
const responseCallback = (responseData) => console.log('H5收到原生數(shù)據(jù)：', responseData); // H5接收到數(shù)據(jù)的回調(diào)函數(shù)
// 在bridge.js中注冊處理函數(shù)，并將數(shù)據(jù)傳遞給H5頁面
this.$bridge.registerHandler(handlerName, (data, responseCallback) => {
if (typeof data === 'string') {
const parsedData = JSON.parse(data);
} else {
const parsedData = data;
}
responseCallback(parsedData); // 將解析后的數(shù)據(jù)傳遞給H5頁面的回調(diào)函數(shù)
});
},
h5ToApp() {
const handlerName = 'goLogin'; // 在bridge.js中注冊的處理函數(shù)名
const userInfo = 'testUserInfo'; // 需要傳遞給原生App的用戶信息，這里以字符串形式表示
const responseCallback = (res) => console.log('原生App收到H5數(shù)據(jù)：', res); // H5接收到數(shù)據(jù)的回調(diào)函數(shù)
// 在bridge.js中調(diào)用原生App的方法，并將用戶信息傳遞給原生App
this.$bridge.callHandler(handlerName, userInfo, responseCallback);
},
},
};
在這個示例中，我們首先在Vue.js組件的methods對象中定義了appToH5()和h5ToApp()兩個方法。在appToH5()方法中，我們首先獲取需要傳遞給H5頁面的數(shù)據(jù)，然后在bridge.js文件中注冊一個處理函數(shù)，該函數(shù)負(fù)責(zé)將數(shù)據(jù)從JavaScript對象轉(zhuǎn)換為JSON字符串，并將其傳遞給H5頁面。同時，我們還定義了一個回調(diào)函數(shù)，用于接收H5頁面返回的數(shù)據(jù)。最后，我們調(diào)用this.$bridge.registerHandler()方法注冊處理函數(shù)。
原生App實(shí)現(xiàn)方式,使用WebViewJavascriptBridge框架
一、引入WebViewJavascriptBridge框架
首先，我們需要在項(xiàng)目中引入WebViewJavascriptBridge框架。這個框架提供了一個橋接iOS和JavaScript的方法，使得我們可以在iOS中調(diào)用JavaScript函數(shù)，也可以在JavaScript中調(diào)用iOS方法。
// 引入WebViewJavascriptBridge框架
#import <WebViewJavascriptBridge/WebViewJavascriptBridge.h>
二、創(chuàng)建橋接對象
在iOS代碼中，我們需要創(chuàng)建一個WKWebViewJavascriptBridge對象，這個對象負(fù)責(zé)管理JavaScript與iOS之間的通信。
// js與oc交互
_bridge = [WKWebViewJavascriptBridge bridgeForWebView:self.currentWebView];
// 設(shè)置wkwebview代理對象
[_bridge setWebViewDelegate:self];
三、注冊原生方法給JS調(diào)用
接下來，我們需要在iOS代碼中注冊一些原生方法，以便JavaScript可以調(diào)用這些方法。這些方法通常用于處理一些特殊的業(yè)務(wù)邏輯，例如分享功能和返回操作。
// 注冊原生方法給JS調(diào)用
- (void)registObjcFunction {
// 注冊分享方法
[self.bridge registerHandler:@"shareClick" handler:^(id data, WVJBResponseCallback responseCallback) {
[ZJShareManage shareImgWithVC:self title:data[@"title"] describeTitle:data[@"describeTitle"] andUrl:data[@"url"]];
}];
// 注冊返回方法
[self.bridge registerHandler:@"goNavBack" handler:^(id data, WVJBResponseCallback responseCallback) {
[self.navigationController popViewControllerAnimated:YES];
}];
}
四、調(diào)用JavaScript方法
現(xiàn)在，我們已經(jīng)注冊了一些原生方法，接下來就可以在iOS代碼中調(diào)用JavaScript方法了。我們只需要使用_bridge對象的callHandler:data:responseCallback:方法即可。
if (self.jsData && self.methodString) {
[_bridge callHandler:_methodString data:_jsData responseCallback:^(id responseData) {
DBLog(@"responseData = %@",responseData);
}];
}
五、總結(jié)
通過本文的介紹，我們了解了如何使用WebViewJavascriptBridge框架在iOS中與JavaScript進(jìn)行交互。這種交互方式不僅簡單易用，而且能夠提高開發(fā)效率。希望本文對你有所幫助，如果你有任何疑問或者建議，歡迎留言討論。文章來源：http://www.zghlxwxcb.cn/news/detail-600470.html
閱讀全文下載完整組件代碼請關(guān)注微信公眾號： 前端組件開發(fā)
文章來源地址http://www.zghlxwxcb.cn/news/detail-600470.html
到了這里，關(guān)于Vue.js uni-app 混合模式原生App webview與H5的交互的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
