由于現(xiàn)在hybird 方案暫未獲得完美解決，現(xiàn)決定用最原始的方案，將ios的UIwebview 與 Android 的webview做載體，通過(guò)加載頁(yè)面來(lái)獲得用戶(hù)的瀏覽方式。由于前端使用的是vue框架，所以針對(duì)兩者交互產(chǎn)生了比較大的麻煩。于是做此筆記，記錄一下。

1、原生Android構(gòu)建 webview 的交互

構(gòu)建交互.png

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

自定義方法.png

此處自定義一個(gè)彈土司的方法，注意方法名稱(chēng)為test

2、原生IOS 構(gòu)建 webview的交互

初始化UIwebview.png

構(gòu)建交互機(jī)制.png

UIwebview 構(gòu)建交互的時(shí)候注意test 方法名一定保持一致

3、Vue代碼判斷觸發(fā)方法

<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的機(jī)制不同，通過(guò)不同的機(jī)制來(lái)判斷調(diào)用不同的方法。

4、結(jié)果顯示效果：

Android：

Android效果.png

IOS：

ios.jpg