混合开发中，H5页面与原生app交互（方法互相调用与传参）

H5与原生app交互，需要WebViewJavascriptBridge，废话不多直接上代码，下面是项目中的封装bridge.js的全部代码（示例代码为vue）

//iOS 交互声明
function connectWebViewJavascriptBridgeIOS(callback) {if (window.WebViewJavascriptBridge) {return callback(window.WebViewJavascriptBridge)}if (window.WVJBCallbacks) {return window.WVJBCallbacks.push(callback)}window.WVJBCallbacks = [callback]let WVJBIframe = document.createElement('iframe')WVJBIframe.style.display = 'none'WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__'document.documentElement.appendChild(WVJBIframe)setTimeout(() => {document.documentElement.removeChild(WVJBIframe)}, 0)
}//Android 交互声明
function connectWebViewJavascriptBridgeANDROID(callback) {if (window.WebViewJavascriptBridge) {callback(WebViewJavascriptBridge);} else {document.addEventListener("WebViewJavascriptBridgeReady",function () {callback(WebViewJavascriptBridge);},false);}
}export default {//H5调用Nativecallhandler(name, data, callback) {//iOS的方法if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {connectWebViewJavascriptBridgeIOS(function (bridge) {bridge.callHandler(name, data, callback)})}//Android方法if (/(Android)/i.test(navigator.userAgent)) {connectWebViewJavascriptBridgeANDROID(function (bridge) {bridge.callHandler(name, data, callback)})}},//Native调用H5registerhandler(name, callback) {//iOS的方法if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {connectWebViewJavascriptBridgeIOS(function (bridge) {bridge.registerHandler(name, function (data, responseCallback) {callback(data, responseCallback)})})}//Android方法if (/(Android)/i.test(navigator.userAgent)) {connectWebViewJavascriptBridgeANDROID(function (bridge) {bridge.init(function (message, responseCallback) {if (responseCallback) {// responseCallback(data);}});bridge.registerHandler(name, function (data, responseCallback) {callback(data, responseCallback)})})}},}

然后挂载到vue的原型方法上，在main.js中进行如下配置

import Bridge from "@/config/bridge.js" //此路径根据实际bridge.js路径填写
Vue.prototype.$bridge = Bridge

完事儿，下面看一下在实际使用中的用法

methods: {// h5调用原生方法，testWebViewBridge为原生app定义的方法名。action为h5传递给原生app的参数，可以为多个。data为原生app传递给h5参数goNative() {const vm = this;this.$bridge.callhandler("testWebViewBridge",{ action: "pick me" },data => {vm.ddd = data;// 处理返回数据});},// h5注册方法，供app调用iosToH5(){},},mounted() {// 原生app调用h5方法，iosToH5是methods中定义的方法名。const vm = this;this.$bridge.registerhandler("iosToH5", (data, responseCallback) => {// data是原生app传递给h5的参数vm.native_data = data;});}

混合开发中，H5页面与原生app交互（方法互相调用与传参）相关推荐

随笔集：H5如何对接原生app的方法
H5如何对接原生app的方法原生APP内部嵌入H5页面的场景对于web前端来说可能并不陌生,既然是嵌入在APP内部肯定也少不了会涉及到APP和H5的一些交互.比如传参.H5调用APP方法.APP调用 ...
混合开发与移动端--H5混合开发、H5页面的开发布局、开发注意事项、H5与原生（安卓）交互、webpack打包优化解决方案、H5调试工具、webview
H5混合开发混合开发.原生开发.H5开发的区别: 简述:主流APP:原生APP.H5(webapp).混合APP,相对应的定制研发即原生开发.H5开发.混合开发原生APP开发优缺点: 可以访问手机 ...
h5页面和原生app页面的区别
"原生应用"占统治地位当我们为移动设备开发应用程序时,程序员通常都会选择开发"原生应用","原生应用"是一种用户必须通过手机应用商店购买下 ...
iOS和android h5字体差异,关于移动hybrid开发中H5页面的字体应与系统保持一致的问题...
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 0.问题来源在移动hybrid开发,也就是说,部分页面会使用html+css+javascript技术来制作,例如个人 ...
移动端h5页面与原生app的交互
在js与原生进行交互的时候对js来说,大部分逻辑都是回调与监听,调用原生的方法 JSBridge是Native代码与JS代码的通信桥梁,因此项目中要设计jsbridge.js: (1)设计出一个Nat ...
H5页面获取原生APP的登录状态
使用场景安卓和IOS客户端在做一些节日.拉新等临时活动时需要内嵌一个HTML5页面(活动相关的逻辑都在该页面上),在开发HTML5页面的角度,则需要APP端提供用户的登录状态(包括token/用户I ...
混合开发中，H5页面如何监听Android手机返回键
1. 前言混合开发中,如果当前操作的页面是H5写的.那么这个时候点击Android手机返回键,默认是返回到上一个页面,跟浏览器的回退功能是一样的,都是返回到历史记录中的前一个记录.看着好像没啥问题, ...
陪玩系统源码开发，H5页面中调用支付功能的实现
最近在陪玩系统源码开发工作中,有个H5页面需要实现微信支付和支付宝支付的功能,现在已经完成,抽个时间写出来,分享给有需要的人. 第一步:先判断当前环境判断陪玩系统源码中用户所属环境,根据环境不同,执 ...
H5页面与原生页面的区别
一.定义 1.H5,即是html5,超文本标记语言,用于描述网页内容结构的语言,网页编程中由它有负责描述页面数据和信息 2.JS,即是JavaScript,广泛用于web应用开发中的脚本语言,负责响应 ...

混合开发中，H5页面与原生app交互（方法互相调用与传参）

混合开发中，H5页面与原生app交互（方法互相调用与传参）相关推荐

最新文章

热门文章