实现:H5与原生APP(Android或Ios)相互交互。

  • Android端:让原生APP开发人员在window对象上绑定方法属性,同步执行,前端直接调用对应方法即可。
/* H5调用Android方法(因IOS限制,需统一都传参,没有就传空字符,具体APP开发定),
Android返回H5需要的json对象数据,同步执行的。
示例如下:
*/
const userInfoJsonObj = window.androidApp && window.androidApp.getUserInfo("")
  • IOS端:需通过bridge对象调用IOS定义的方法,异步执行需注意如果IOS端没有定义方法,bridge不会返回任何数据也会不报什么错误

问:H5嵌入APP,如何区分当前环境是APP(H5调用IOS方法),还是其他环境(H5不调IOS方法)?

答:让Android&IOS开发人员,修改下用户代理即(userAgent), 在原有用户代理字符串后面,新增特殊标志字符-》H5读取navigator.userAgent来判断即可。

        第1步:在utils目录下新建bridge.js工具文件。

// bridge.js: 用于实现H5跟Ios交互的工具。
export const setupWebViewJavascriptBridge = (callback) => {
  if ((window).WebViewJavascriptBridge) {
    return callback((window).WebViewJavascriptBridge)
  }
  if ((window).WVJBCallbacks) {
    return (window).WVJBCallbacks.push(callback)
  }
  (window).WVJBCallbacks = [callback]
  const WVJBIframe = document.createElement('iframe')
  WVJBIframe.style.display = 'none'
  WVJBIframe.src = 'https://__bridge_loaded__'
  document.documentElement.appendChild(WVJBIframe)
  setTimeout(() => {
    document.documentElement.removeChild(WVJBIframe)
  }, 0)
}

export const callIosBridge = (IosMethodName, params, callback) => {
  setupWebViewJavascriptBridge((bridge) => {
    bridge.callHandler(IosMethodName, params, callback)
  })
}

        第2步:H5调用IOS方法即可。

import { callIosBridge } from '@/utils/bridge'
const u = navigator.userAgent // 用户代理
const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // android终端
const isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端

// 从原生APP中获取登录的用户信息
export function getUserInfoObjFromNativeAPP() {
	return new Promise((resolve, reject)=> {
	   if (!isAndroid && !isIos) { reject() }
	   if (isAndroid) {
        // 调用Android端的getUserInfo方法。
		const data = window.androidApp && window.androidApp.getUserInfo("")
		data ? resolve(JSON.parse(data) ) : resolve(null)
	   } else {
           // 调用IOS的getUserInfo方法,传参为空字符,回调函数中H5拿到想要的json对象数据
		   callIosBridge('getUserInfo', '', (data) => {
			data ? resolve(JSON.parse(data) ) : resolve(null)
		  })
	  }
  })
}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值