jsbrige在前端的使用

1.使用原因

在项目开发中因为某个模块业务不稳定，为了不经常让用户更新APP，所以决定在项目中使用H5页面嵌入到手机app中。本来开始只是简单调用手机端来获取登录信息就可以，后续网络请求由H5页面实现，但是由于安全问题，需要所有请求后台的接口由APP完成，这就伴随着可能需要一个请求，手机端开一个请求的方法，此种定义不够灵活，而且有可能后面修改业务，也需要更新app，这就失去了不更新的意义。所以应用成熟框架jsbrige,应用这个框架后，只需要定义几个简单的方法就可以了，比如请求后台俩端约定方法名称为nativeHttp,其余参数及可以以JSON的形式经行通讯。顺便说一下，我前端的框架为VUE。

2.前端封装通讯部分

为了项目中方便使用，我将调用方法进行方法，新建文件为JSbridge.js，下面是使用的方法

let isAndroid = navigator.userAgent.indexOf(‘Android’) > -1 || navigator.userAgent.indexOf(‘Adr’) > -1;
 let isiOS = !!navigator.userAgent.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); 
1.//这是必须要写的，用来创建一些设置
2.function setupWebViewJavascriptBridge(callback) {
3.  //Android使用
4.  if (isAndroid) {
5.    if (window.WebViewJavascriptBridge) {
6.      callback(WebViewJavascriptBridge)
7.    } else {
8.      document.addEventListener(
9.        'WebViewJavascriptBridgeReady',
10.        function () {
11.          callback(WebViewJavascriptBridge)
12.        },
13.        false
14.      );
15.    }
16.    sessionStorage.phoneType = 'android'
17.  }
18.
19.  //iOS使用
20.  if (isiOS) {
21.    if (window.WebViewJavascriptBridge) {
22.      return callback(WebViewJavascriptBridge);
23.    }
24.    if (window.WVJBCallbacks) {
25.      return window.WVJBCallbacks.push(callback);
26.    }
27.    window.WVJBCallbacks = [callback];
28.    var WVJBIframe = document.createElement('iframe');
29.    WVJBIframe.style.display = 'none';
30.    WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
31.    document.documentElement.appendChild(WVJBIframe);
32.    setTimeout(function () {
33.      document.documentElement.removeChild(WVJBIframe)
34.    }, 0);
35.    sessionStorage.phoneType = 'ios'
36.  }
37.}
38.//注册回调函数，第一次连接时调用 初始化函数(android需要初始化,ios不用)
39.setupWebViewJavascriptBridge(function (bridge) {
40.  if (isAndroid) {
41.    //初始化
42.    bridge.init(function (message, responseCallback) {
43.      var data = {
44.        'Javascript Responds': 'Wee!'
45.      };
46.      responseCallback(data);
47.    })
48.  }
49.})
50.
51.export default {
52.  // js调APP方法 （参数分别为:app提供的方法名  传给app的数据  回调）
53.  callHandler(name, data, callback) {
54.    setupWebViewJavascriptBridge(function (bridge) {
55.      bridge.callHandler(name, data, callback)
56.    })
57.  },
58.  // APP调js方法 （参数分别为:js提供的方法名  回调）
59.  registerHandler(name, callback) {
60.    setupWebViewJavascriptBridge(function (bridge) {
61.      bridge.registerHandler(name, function (data, responseCallback) {
62.        callback(data, responseCallback)
63.      })
64.    })
65.  }
66.}

在其他地方使用时是需要将上面JS映入即可。以我的项目使用为例，我将方法挂载到VUE原型中，方便使用。先新建install.js 代码如下

1.import bridge from './JSbridge.js'
2.const install = function (Vue) {
3.  Vue.prototype.$bridge = bridge
4.}
5.
6.export default install

然后在main.js中使用

1.import install from '@/commons/install'
2.Vue.use(install) //原型挂载工具

在具体的页面使用

1.this.$bridge.callHandler('与APP约定的方法名')

因为涉及到本地联调，我建议大家可以对http文件进行分装，如果开发环境用AXIOS,打包后用JSBrige,下面是我对get请求的封装

1.export default {
2.  get: function (url, query) {
3.    if(process.env.NODE_ENV === 'development'){
4.      return myAxios.get(url, {params: query})
5.    }else{
6.      return http(url, 'get', query)
7.    }
8.  }
9.}

最后希望此篇文章对其他人有所帮助，希望有什么问题大家给予指出。