An overview of the

In the mixed-mode mobile application development, in order to realize the functions that H5 itself does not have, it is inevitable to have the interaction between H5 and native. However, H5 is not connected with the original, and the connection between them is through a bridge, which is jsBridge.

As for the implementation of jsBridge, there are numerous articles on the web, which are not the focus of this article. The focus of this article is on the solution under development for jsBridge and how to use jsBridge in the most comfortable position.

The plug-in

The @zebing/ Js-Bridge plug-in is a multi-platform jsBridge interactive plug-in, which has been used in Android, ios and Windows QT applications, and has a significant effect. Great solutions to the differences between platforms, as well as local development of native interface debugging problems.

use

1. Default interaction scheme

By default, the plugin provides a non-inductive solution, only for Android and ios, as long as the H5 and Native terminals follow the following rules.

Native client:

// Android // inject methods into window.jsBridgeMethods // ios // Interact with messageHandlersCopy the code

The argument received by the android and ios methods is a JSON string in the following format:

{XXX: "parameter 1", XXX:" parameter 2",... callback? // Window [callbackName] callback}Copy the code

The h5 end:

import jsBridge from '@zebing/js-bridge'; Jsbridge. test({XXX: 'parameter 1', XXX:' parameter 2', callback: function () {}})Copy the code

2. Customize the adapter interaction scheme

If the default interaction scheme does not meet the requirements, you can customize an adapter for interaction. Initialize by calling create. Take Android as an example, as follows:

import { create, register } from '@zebing/js-bridge' const JsBridge = create([{ platform () { if (typeof window !== 'object') { return false; } const userAgent = window.navigator.userAgent; return userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1; }, support (name) { const apis = window['jsBridgeMethods'] || {}; const support = Object.prototype.toString.call(apis[name]) === '[object Function]'; return support; }, run (name, options) { window.jsBridgeMethods[name](JSON.stringify(options)); } }]); Jsbridge. test({XXX: 'callback ', XXX:' callback ', callback: function () {}})Copy the code

Create receives an array that can be passed to multiple adapters. A platform will use only one qualified adapter. Even if an incoming adapter has multiple matches, subsequent ones are ignored.

The adapter must meet the following conditions:

  1. Platform method, used to determine whether it applies to the current platform.
  2. The support method, which determines whether the method to be invoked is callable.
  3. The run method is used to perform calls to native methods for interaction.

Users cannot use platform, support, or run method names when interacting with native users

3. Local development and debugging

Local development debugging is also a feature of this plug-in. Create the js-bridge.methods.js file in the root directory

Module.exports = {test (options) {const {id, callback} = json.parse (options); // module.exports = {test (options) {const {id, callback} = json.parse (options); window[callback]({ id, result: 'test ok' }); }},Copy the code

Then create a new js-bridge.js file to create the instance

import { create } from '@zebing/js-bridge'; const adapter = []; If (process.env.build_env === 'development') {const bridgeMethods = require('.. /.. /bridge.methods.js`); if (process.client) { window.jsBridgeMethods = bridgeMethods; adapter.push({ platform: () => true, support: (name) => typeof (window.jsBridgeMethods || {})[name] === 'function', run (name, options) { window.jsBridgeMethods[name](JSON.stringify(options)); }})}} // Android jsBridge adapter, ios uses default adapter adapter.push({platform () {if (typeof window! == 'object') { return false; } const userAgent = window.navigator.userAgent; return userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1; }, support: (name) => typeof (window.jsBridgeMethods || {})[name] === 'function', run (name, options) { window.jsBridgeMethods[name](JSON.stringify(options)); } }) export default create(adapter);Copy the code

Finally, jsBridge is introduced to make the call

Import jsBridge from 'js-bridge. Js' jsBridge. Test ({XXX: 'parameter 1', XXX:' parameter 2', callback: function () {}})Copy the code

4. Use Promise instead of callback

Jsbridge. test({XXX: 'parameter 1', XXX:' parameter 2', callback: function () {}}) Callback: true}). Then ((result) => {})Copy the code

5. Compatible with low-end Android 4.4 and below

As jsbridge. test is called by Proxy, there will be incompatible problems on low-end Android 4.4 and below. But compatible solutions are provided. As follows:

// Replace jsBridge. Test ({XXX: 'parameter 1', XXX:' parameter 2', callback: function () {}}) with jsBridge. Callback: function () {}})Copy the code