GitHub GitHub package.json version
- WebviewJavascriptBridge plugin for Vue.js
- 基于WebViewJavascriptBridge(ios), JsBridge(android)开发
- Promise封装,支持
then或者async/await等方式
yarn:
yarn add vue-webview-js-bridge
npm:
npm i vue-webview-js-bridge
// main.js import Vue from 'vue' import VueJsBridge from 'vue-webview-js-bridge' Vue.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 () { this.$bridge.registerHandler('testJavascriptHandler', (data, callback) => { this.code = data console.log('data from native:', data) const responseData = { 'Javascript Says':'Right back atcha!' } console.log('JS responding with', responseData) callback(responseData) }) }, methods: { async callNative () { try { let res = await this.$bridge.callHandler({ type: 'optionType', data: { name: 'optionData' } }) this.code = res } catch (error) { console.log('error', error) } } } }
// ... import VueJsBridge, { pluginOption } from 'vue-webview-js-bridge' interface Payload<T = any> { type: string data?: T } interface Response<T = any> { code: number data?: T } const option:pluginOption<Payload, Response> = { debug: true, nativeHandlerName: 'testObjcCallback', mock: false, mockHandler (payload, next) { next(Object.assign({ code: 200 }, { data: 'code from native' })) } } Vue.use(VueJsBridge, option) // ...
import { Vue, Component, Prop } from 'vue-property-decorator' interface Payload<T = any> { type: string data?: T } interface Response<T = any> { code: number data?: T } @Component export default class HelloWorld extends Vue { @Prop({ default: '' }) private msg!: string code: string = '' mounted () { this.$bridge.registerHandler<string, object>('testJavascriptHandler', (data, callback) => { this.code = data console.log('data from native:', data) const responseData:object = { 'Javascript Says': 'Right back atcha!' } console.log('JS responding with', responseData) callback(responseData) }) } private async callNative () { try { let res = await this.$bridge.callHandler<Payload<object>, Response<string>>({ type: 'optionType', data: { name: 'optionData' } }) this.code = res.data } catch (error) { console.log('error', error) } } }
- type: boolean
- default:
true - description: 输出调用信息
- type: number
- default:
200 - description: 由于birdge初始化需要时间导致的registerHandler失败的处理,延时调用时间,单位
ms
native调用前端注册的方法最好也要延时处理,避免前端还未注册时候native调用导致的问题
- type: string, 必填项
- default:
'nativeHandler' - description: 和原生开发人员协商的nativeHandlerName
- type: boolean
- default:
true - description: 开发阶段是否开启mock服务,需要配合mockHandler使用,两者都设置的情况下mock生效
- type: Function
- default:
null - description: 开发阶段mockHandler服务,需要配合mock使用,两者都设置的情况下mock生效. 是一个函数,第一个参数接收payload, 第二个参数接受bridge回调函数
mockHandler (payload, next) { // mock by payload // switch(payload) { // case 1: // next(mockData) // break // ... // } // call next(data) to mock data }
- description:注册一个bridge提供给原生开发者调用,第一个参数name(和原生开发者协商好的bridgeName),第二个参数callback函数,
- callback: callback函数接收两个参数,第一个参数是native传来的数据data,第二个参数是原生传来的responseCallback,当需要时通知native我们的状态
this.$bridge.registerHandler('testJavascriptHandler', (data, callback) => { this.code = data console.log('data from native:', data) const responseData = { 'Javascript Says':'Right back atcha!' } console.log('JS responding with', responseData) callback(responseData) })
- description: 接受一个参数payload(和原生开发人员协商格式)例如:
this.$bridge.callHandler({ type: 'optionType', // 标识调用native的功能 data: { // 传到native的数据 name: 'optionData' } })
- 增加单元测试
- 增加 TypeScript types 支持