【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