“This is the first day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021”

demand

In real projects, we will often need to do pages that span multiple platforms. For example, an activity page needs to be displayed in wechat mini program, also need to be displayed in their company’s APP, but also need to be displayed in Alipay and other platforms. That’s when an H5 fits your needs. If the requirements are a little more complex, such as the need to call the scan function on the active page, or the need to call the payment function on the native method, then you need a middleware to handle the native method on the different end.

Middleware Implementation Principle

The principle is simple, we are abstracting out a class, in which we will need to implement the native methods, and other endpoints inherit and rewrite all the methods from the class.

Lazy words, you can not PC debugging class, directly in the parent class to achieve all the methods in the PC debugging class.

After that, it’s time to call. It would be too cumbersome to determine which end is on each page, and there’s no need to load the middleware code on each end (you can use require for asynchronous loading). In the process of page loading, the middleware object addon of the corresponding terminal is created according to the judgment, and this middleware object is mounted to the window. Window.addon.scan () can be directly used when it is used.

Pay attention to the point

Wechat and Alipay have their own judgment methods, but the judgment of their own apps requires the native development to add the identity in the userAgent (this is not complicated, native people know how to add, if you don’t know, please ask Baidu).

In addition, ios WebView no longer supports synchronous methods. It is recommended that all methods be called asynchronously. Please refer to the example.

In the code

Here’s my code for judging each side

class Addon { constructor () { let ua = window.navigator.userAgent.toLowerCase() if The ((/ MPBank/window. The navigator. UserAgent)) {/ / ZhaoShangXing applet} else if (ua) match (/ MicroMessenger/I) = = 'MicroMessenger') {/ / Most mobile phones can use this judgment to determine whether it is a small program, but there are a small number of Huawei phones due to slow loading, There will be wrong if (window. __wxjs_environment = = = 'miniprogram' | | ua. The match (/ miniprogram/I) = = 'miniprogram') {} else {}} Else if (/ AlipayClient/test (window. The navigator. UserAgent)) {/ / with ua and miniprogram judgment here, check the compatibility, using my. GetEnv for asynchronous, Not suitable for here if (ua. Match (/ miniprogram/I) = = 'miniprogram' | | ua. The match (/ webview/I) = = 'webview') {/ / alipay applet} else {/ / alipay} } else if (/ XXXX - app/test (window. The navigator. UserAgent)) {/ / app} else {/ / other processing (web and third-party channels into) out}} export let addon =  new Addon()Copy the code

Here is a simple example

ParentAddon.js
export default class ParentAddon {
     scan (data) {
         data.success('xxx')
     }
}
Copy the code
IosAppAddon.js
export default class IosAppAddon extends ParentAddon {
    scan (data) {
        window.scanCallback = data.success
        window.webkit.messageHandlers.scan.postMessage({
          callBack: 'scanCallback'
        })
     }
}
Copy the code