vue-3-webview-js-bridge

• WebviewJavascriptBridge plugin for Vue.js
• Based on WebViewJavascriptBridge(ios), JsBridge(android) Development
• Promise Encapsulation，support then or async/await
• 由于个人项目需要定制， 支持 ios 框架库 WKWebViewJavascriptBridge

Install

yarn:

yarn add vue3-webview-js-bridge

npm:

npm i vue3-webview-js-bridge

Example

// main.js
import { createApp } from "vue";
import App from './App.vue'
import VueJsBridge from 'vue3-webview-js-bridge'

const app = createApp(App);
app.use(VueJsBridge, {
	debug: true,
	nativeHandlerName: 'testObjcCallback',
	mock: true,
	mockHandler(payload, next) {
		// mock by payload
		// call next(data) to mock data
	}
	// ...
})

// 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)
      });
    }
  }
}

Reference

vue-webview-js-bridge

License

MIT