vue如何实现与安卓,IOS交互的方法

　　介绍

这篇文章主要介绍了vue如何实现与安卓,IOS交互的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

vue的优点

vue具体轻量级框架,简单易学,双向数据绑定,组件化,数据和结构的分离,虚拟DOM,运行速度快等优势,vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和DOM,可以大大提升访问速度和用户体验。

<强>方案背景

<李>

IOS用的是jsBridge插件实现调用,传参,回调的

<李>

安卓是在窗口挂载方法和挂载回调的

<强> IOS实现方案

调用原生方法封装如下

function  setupWebViewJavascriptBridge (回调),{ 　　if 才能;(window.WebViewJavascriptBridge), { 　　,,,return 回调(window.WebViewJavascriptBridge) 　　,,} 　　if 才能;(window.WVJBCallbacks), { 　　,,,return  window.WVJBCallbacks.push(回调) 　　,,} 　　window.WVJBCallbacks 才能=,(回调) 　　let 才能;WVJBIframe =, document.createElement (& # 39; iframe # 39;) 　　时间=WVJBIframe.style.display 才能;& # 39;没有# 39; 　　时间=WVJBIframe.src 才能;& # 39;https://__bridge_loaded__& # 39; 　　document.documentElement.appendChild才能(WVJBIframe) 　　setTimeout(才能(),=祝辞,{ 　　,,,document.documentElement.removeChild (WVJBIframe) 　　,,},0) 　　} 　　function  callhandler (名称,数据,,回调),{ 　　setupWebViewJavascriptBridge才能(function (桥),{ 　　,,,bridge.callHandler(名称,数据,,回调) 　　})才能 　　}

实际调用如下

callhandler (functionName:字符串,参数:,对象,,res =祝辞,{})

注册方法给原生

registerhandler (名字,,回调),{//,才能安卓 　　窗口才能[名字],=,res =祝辞,{ 　　,,let  data =, JSON.parse (res) 　　,,回调(数据) 　　,,}//才能IOS 　　setupWebViewJavascriptBridge才能(function (桥),{ 　　,,,bridge.registerHandler(名字,,function (数据,responseCallback), { 　　,,,,,回调(数据,responseCallback) 　　,,,}) 　　})才能 　　}

<>强安卓实现方案

调用原生方法

window.HTTP_TEST.functionName ()

定义回调方法/注册方法给原生

窗口[& # 39;functionname # 39;],=, res =祝辞,{}

<强>特殊说明

<李>

安卓在交互中的参数传递只能支持字符串类型,对象参数要转成字符串传递

<李>

因为安卓的回调方法名是固定的,同一方法同时请求两次以上时,有可能只得到一次回调。如果用随机数处理就会不断地在窗户上挂载新的函数,调用次数过多可能会出问题,所以目前是避免同时请求同一方法来解决的。如果有需求避免不了,那还是要用随机数解决。

感谢你能够认真阅读完这篇文章,希望小编分享的“vue如何实现与安卓,IOS交互的方法”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!

vue如何实现与安卓,IOS交互的方法