美文网首页
h5与APP交互方式

h5与APP交互方式

作者: 梦想_Dream | 来源:发表于2021-11-04 07:27 被阅读0次

js调用APP的方法

举个简单的例子,有个需求是要和APP交互的,h5页面里面有个分享按钮,点击之后需要调用APP原生的分享功能
app那边写好了一个方法是onShare( )
第一步:就是点击分享好友触发

<div @click="onShare">分享好友</div>

第二步:定义onShare方法调用APP方法

onShare () {
  if(this.isAndroid_ios()) {
    console.log('安卓')
    window.AndroidFunction.onShare('1');// AndroidFunction为安卓端封装的方法
  }else {
    console.log('ios')
    window.webkit.messageHandlers.onShare.postMessage('1'); //ios
  }
},
isAndroid_ios() {
    let u = navigator.userAgent;
    let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //安卓
        let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if(isAndroid){
        return true;
    } else if(isIOS) {
        return false;
    }
}

isAndroid_ios()这个函数是判断是否是安卓或者是ios
因为安卓和ios的调用方法不同
以onShare()方法为例:
安卓:window.AndroidFunction.onShare('1'); // android
IOS:window.webkit.messageHandlers.onShare.postMessage(’1‘); //ios
里面可以传参给APP 的

APP调用js的方法

这个h5这边很简单,只需要把方法挂载到window上,APP就能调用
具体为

window.customizeFn = function(data) {
  console.log('app端返回的参数:', data); // APP调用js方法后,传过来的值
}
// customizeFn为自定义参数名

相关文章

  • H5与App的交互

    H5 与App的相互调用/传值 h5 与 App 交互有以下几种方式: 方法一:URL 传参 App 通过 URL...

  • 2018-02-07

    OC与H5交互 交互的四种方式 有很多的app直接使用在webview的代理中通过拦截的方式与native进行交互...

  • iOS原生App与H5页面交互笔记

    iOS原生App与H5页面交互笔记 iOS原生App与H5页面交互笔记

  • iOS原生App与H5页面交互笔记

    iOS原生App与H5页面交互笔记WKWebview 交互实现Http与iOS以及网页交互

  • iOS和html5交互开发

    iOS与HTML5交互方法总结 iOS原生APP与H5+JS交互 iOS原生App与H5页面交互笔记

  • h5与APP交互方式

    js调用APP的方法 举个简单的例子,有个需求是要和APP交互的,h5页面里面有个分享按钮,点击之后需要调用APP...

  • jsBridge原理解析

    导语 现在大多数App与H5的交互越来越多,jsBridge是一个能使webView和js交互的通信方式,本文只对...

  • h5与App原生交互方案

    H5与App原生交互,一般会是前端页面中的JavaScript与App使用的原生开发语言的交互。技术方案应能达到以...

  • 前端面试题

    - h5与客户端交互方式 (微信)?iOS 、android与js 交互方式有什么不同?js在什么时候注入页面? ...

  • iOS与H5交互之WebViewJavascriptBridge

    开发中可能会遇到与H5页面交互的情况,在这里就简单介绍一下怎么与H5交互 iOS与HTML5的交互方式 iOS与H...

网友评论

      本文标题:h5与APP交互方式

      本文链接:https://www.haomeiwen.com/subject/muuhzltx.html