vue-cli3.0项目与安卓ios交互。

由于公司项目需要，所以使用vue开发了一款内嵌原生app的H5项目。接下来把开发之中的坑给大家分享一下。

H5页面整体就不细述，着重于与原生端的交互上。

业务逻辑：

基本逻辑就是H5项目内嵌原生app 原生端通过点击入口按钮进去H5页面 > H5页面调用原生方法拉取用户登录信息,如果用户未登录，调用原生login方法跳转登录页面，原生端登录完成后，调用H5端提供的方法，传值给H5端，H5端拿到用户信息 > 进行鉴权操作

技术要点：

ios这边主要使用WebViewJavascriptBridge第三方桥梁与H5交互

https://github.com/marcuswestin/WebViewJavascriptBridge

安卓端未依赖第三方库

接下来介绍在vue中如何与原生端交互

刚才也说到ios是利用WebViewJavascriptBridge与H5交互的，那么在H5端首先要注入WebViewJavascriptBridge

1:项目根目录新建utlis文件夹 bridge.js

function setupWebViewJavascriptBridge (callback) {
    if (window.WebViewJavascriptBridge) {
        return callback(window.WebViewJavascriptBridge)
    }
    if (window.WVJBCallbacks) {
        return window.WVJBCallbacks.push(callback)
    }
    window.WVJBCallbacks = [callback]
    let WVJBIframe = document.createElement('iframe')
    WVJBIframe.style.display = 'none'
    WVJBIframe.src = 'https://__bridge_loaded__'
    document.documentElement.appendChild(WVJBIframe)
    setTimeout(() => {
        document.documentElement.removeChild(WVJBIframe)
    }, 0)
}
export default {
    callhandler (name, data, callback) {
        setupWebViewJavascriptBridge(function (bridge) {
            bridge.callHandler(name, data, callback)
        })
    },
    registerhandler (name, callback) {
        setupWebViewJavascriptBridge(function (bridge) {
            bridge.registerHandler(name, function (data, responseCallback) {
                callback(data, responseCallback)
            })
        })
    }
}

2：在main.js 中引入后就可以在别的页面使用

import Bridge from './utlis/bridge.js'

Vue.prototype.$bridge = Bridge

3:由于本项目是要在原生端点击进入H5页面开始调用原生方法，所以需要在App页面做拦截登录操作。

在mounted()钩子函数中执行getAccess方法

判断安卓还是ios系统如果是ios系统的话

1:调用ios方法

this.$bridge.callhandler("ios提供调用方法名", null, data => {  // 处理返回数据 })

2:H5提供方法给ios调用

需要写在created()钩子函数里面暴露在window下

this.$bridge.registerhandler('ios定义获取方法名称', (data, responseCallback) => {
              responseCallback(data)
})

如果是Android系统的话，注意Android端返回都是字符串类型需要JSON.parse()

1:调用Android方法

// H5xxxxx  安卓端提供别名
// fn()     安卓端定义方法名称
let paramsStr = H5xxxxx.fn();

2:H5提供方法给Android调用

需要写在created()钩子函数里面暴露在window下

 window['方法名'] = (data) => {// 暴露方法给Android终端
            this.fn(data);  回调函数
 }

以上可实现与原生交互

进入调试阶段后安卓会让你给一个项目测试地址，打包发送一个apk给你，下载模拟器安装adk即可进入调试，移动端调试是很麻烦的事情，很多模拟器没有log操作，传统方法只能alert()数据出来进行调试，效率极低，给大家推荐一款调试利器，

Vconsole


npm install vconsole

2:main.js中引入

 import vConsole from 'vconsole'
if (process.env.NODE_ENV === 'production') { } else { new vConsole() }

页面右下角会出现绿色按钮就可以使用了

以上就是全部内容了！！！！！！

写这篇文章的目的是为了让需要的人少走点弯路，对于整体流程不是很清楚并且没有做过类似跨端需求的话，开发起来还是有些费劲的，提醒大家交互时一定一定要和原生端沟通好，技术有限，才疏学浅。有不当之处，或者有更好的方法欢迎各位指出。