JS跟APP交互——H5调用原生APP的方法

js向app传值问题

最近做的H5项目是需要嵌入到APP内使用的，这就涉及到js跟app交互的问题，我这边需要传值给app，以下是我在做项目过程中传值的方法，仅供参考。

解决方法

AppData这个JSON对象是我们需要向后台传的所有值，同时我们需要判断终端设备，IOS终端需要加上window.webkit.messageHandlers，deliveryClueID这个是原生方法名。

var AppData = Object.assign({loanID:this.loanId},{orderState:this.orderState});var u = navigator.userAgent,app = navigator.appVersion;//android终端或者uc浏览器var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //ios终端var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X)/); if(isiOS){window.webkit.messageHandlers.deliveryClueID.postMessage(AppData);}else if(isAndroid){android.deliveryClueID(JSON.stringify(AppData));}

或者你还可以这样？
这是网上别人方法，JS调用Android原生。

//第一种
JavaScript:android.原生方法名(params);
//第二种
window.android.原生方法名(params);

然后APP端需要做如下配置。
这是 IOS配置跟调用方法，deliveryClueID是原生方法名，做IOS的大佬应该知道的。

let conf = WKWebViewConfiguration()conf.userContentController = WKUserContentController()conf.preferences.javaScriptEnabled = trueconf.selectionGranularity = WKSelectionGranularity.character/// h5 调用 swift 提供的方法conf.userContentController.add(self, name: deliveryClueID)webView = WKWebView( frame: CGRect(x:0, y:KHeight_NavBar,width:kScreenWidth, height:kScreenHeight - KHeight_NavBar),configuration:conf)

Android怎么配置我就不知道了emmm。。。等我知道了再更吧！

JS跟APP交互——H5调用原生APP的方法相关推荐

h5调用原生App的方法合集
h5调用原生App的方法合集 1.调用原生关闭函数 let u = navigator.userAgent let isAndroid = u.indexOf('Android') > -1 | ...
js调用android.webkit,h5调用原生App的方法合集 window.webkit.messageHandlers
测试demo 调用原生关闭函数 let u = navigator.userAgent let isAndroid = u.indexOf('Android') > -1 || u.indexO ...
vue 获取安卓原生方法_VUE H5调用原生APP方法实践笔记
最近做与app端的混合开发,了解到了H5与原生app端之间的方法互通首先是我们给app端定义方法供他们使用(以vue为例) methods中定义一个方法名称 VContent() { console ...
客户端相关知识学习（二）之h5与原生app交互的原理
前言现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能.所以,这次 ...
h5 与原生 app 交互的原理
作者:senntyou segmentfault.com/a/1190000016759517 现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如 ...
h5与原生app交互的原理
h5 与原生 app 交互的原理现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 ...
android h5和原生方法调用,H5与原生APP之间的方法互通
最近做与app端的混合开发,了解到了H5与原生app端之间的方法互通首先是我们给app端定义方法供他们使用(以vue为例) methods中定义一个方法名称 VContent() { console ...
H5和原生APP之间的区别
原文:http://www.ui.cn/detail/247751.html 最近项目中因各种客观因素,移动端都是默认用的纯H5 APP,感受最深的就是各种坑啊,好大的坑啊.产品上线后,带着各种坑后的 ...
H5和原生App的区别
前端常识: 前端:指客户端主要有: 移动端APP(Android.IOS等) Web前端(主要指H5) PC端软件后端:值服务器端. 常见的服务端语言或技术: java Node.js Pytho ...

JS跟APP交互——H5调用原生APP的方法

js向app传值问题

解决方法

JS跟APP交互——H5调用原生APP的方法相关推荐

最新文章

热门文章