- WebviewJavascriptBridge plugin for Vue.js
- Based on WebViewJavascriptBridge(ios), JsBridge(android) Development
- Promise Encapsulation,support
then
orasync/await
- 由于个人项目需要定制, 支持 ios 框架库 WKWebViewJavascriptBridge
yarn:
yarn add vue-webview-js-bridge
npm:
npm i vue-webview-js-bridge
// main.js
import { createApp } from "vue";
import AppLayout from "./layout/index.vue";
import VueJsBridge from 'vue-webview-js-bridge'
const app = createApp(AppLayout);
app.use(VueJsBridge);
// component.vue
export default {
name: 'HelloWorld',
props: {
msg: String
},
data () {
return {
code: ''
}
},
mounted () {
// Native call Web
this.$bridge.registerHandler('handlerName', (data, callback) => {
this.code = data
console.log('data from native:', data)
callback(data)
})
},
methods: {
async callNative () {
// Web call Mobile
this.$bridge.callHandler("handlerName", payload)
.then((data) => {
console.log('data',data)
})
.catch((error) => {
console.log('error', error)
});
}
}
}