【vue随手笔记】Vue与ios UIwebview 和 Android webview 交互

由于现在hybird 方案暂未获得完美解决,现决定用最原始的方案,将ios的UIwebview 与 Android 的webview做载体,通过加载页面来获得用户的浏览方式。由于前端使用的是vue框架,所以针对两者交互产生了比较大的麻烦。于是做此笔记,记录一下。

1、原生Android构建 webview 的交互

构建交互.png

注意框出的name,此处是自定义字段,由自己可以控制,在vue中可以直接使用

自定义方法.png

此处自定义一个弹土司的方法,注意方法名称为test

2、原生IOS 构建 webview的交互

初始化UIwebview.png

构建交互机制.png

UIwebview 构建交互的时候注意test 方法名一定保持一致

3、Vue代码判断触发方法

<button @click="test(result)"> TEST 交互</button>
methods: {
        test(result) {
            if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
                test('10011-ios')
            } else if (/(Android)/i.test(navigator.userAgent)) { //判断Android
                window.yghys.test('10011-android')
            }else {
                
            }

        }
 }

由于两者webview的机制不同,通过不同的机制来判断调用不同的方法。

4、结果显示效果:

Android:

Android效果.png

IOS:

ios.jpg

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏地方网络工作室的专栏

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(九)再把内容页面渲染出来

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(九)再把内容页面渲染出来 前情回顾 在上一篇博文《Vue2+VueRou...

22310
来自专栏张戈的专栏

WordPress静态缓存三剑客,强力推荐!

之前一直用的 wp-super-cache,效果确实非常不错!网络不出问题的话,页面基本秒开。可惜,这款插件有时候会缓存我的手机主题,导致在电脑上浏览时,呈现的...

4675
来自专栏wOw的Android小站

[iOS] Win8下在Vmware11中安装使用苹果系统OS X 10.10

  近来因为需要做 iOS 的项目,所以需要多花一些时间看看敲敲代码。因为自己手头上并没有 Mac(过年为了闲的时候能玩玩游戏买了联想,唉),想想不能只靠每天在...

1980
来自专栏编程之旅

iOS开发——解析崩溃日志

在实际的开发过程中,作为开发者的我们常常会碰到一种场景,那就是真机调试时崩溃了,而有时又不能在Xcode中打印出崩溃信息,那么这时候我们就必须要获取到崩溃原因,...

1953
来自专栏从零开始学自动化测试

jenkins上展示html报告

前言 在jenkins上展示html的报告,需要添加一个HTML Publisher plugin插件,把生成的html报告放到指定文件夹,这样就能用jenki...

9168
来自专栏ionic3+

ionic cordova resources问题说明

ionic cordova resources是用于一键打包生成各分辨率icon和splash的命令,在使用过程中可能会遇到以下问题:

1322
来自专栏一只程序汪的自我修养

自动同步git repository脚本

1913
来自专栏FreeBuf

漏洞追踪:最新IE UXSS漏洞技术分析

最近David Leo在Full Disclosure上爆出了一个ie的 uxss 漏洞,可以绕过ie的同源策略。FreeBuf也有相关的报道(点我查看)。本文...

2067
来自专栏BeJavaGod

创建线程的几种方式

说道线程,肯定会想到使用 java.lang.Thread.java这个类 那么创建线程也主要有2种方式 第一种方式: ? 然后在调用处,执行start方法即可...

3404
来自专栏河湾欢儿的专栏

客户端和浏览器端交互模型

2451

扫码关注云+社区

领取腾讯云代金券