Shulou(Shulou.com)06/01 Report--

Editor to share with you in the front-end html5 and App communication example analysis, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to know it!

Preface

Now both desktop clients and mobile clients will be interspersed with some H5 pages, and this hybrid application is also what we often call Hybrid App. Why did Hybrid App appear? in the early days, it was because the development of a client of Android or iOS required a large labor cost and a long development cycle. Later, some teams split part of the pages to be completed by the front end, and then displayed through Webview in the client.

As I became a programmer halfway through my career, I only knew something about the front-end field and had little contact with other programming fields, so I did not discuss the implementation principle of Webview and the principle of interaction with H5 pages. Interested partners search the relevant knowledge of JSBridge by Baidu, or ask the students who develop the client (Windows, MacOS, Android, iOS) to see how to bridge the connection between JS and other programming languages.

Advantages and disadvantages

Everything is good and bad, and there is no absolute solution. Below, I would like to summarize the advantages and disadvantages of Hybrid App in the development process. Students can judge whether Hybrid App is good or bad.

Advantages

The H5 page is developed by the front end, and the page modules are developed and maintained separately, which effectively reduces the development cycle of App.

The H5 page is not limited to the tedious review process and long waiting time of the app store, and new pages and features and defects can be deployed online at any time.

The H5 page is loaded only when necessary to reduce the size of the packaged App, shorten the download time of App in the app store, and reduce the space occupied locally by the phone.

The H5 page is connected to the App Webview and is no longer limited by the browser. You can call more underlying API of the device by interacting with the App to improve more operations that cannot be done by the original browser.

Shortcoming

Agree on the communication protocol between H5 and App, and define how to call global properties and global methods between them.

When H5 page is connected to App Webview, there may be a lot of compatibility problems, which need to be paid more attention by front end and client.

Before development, you need to divide the pages according to the requirements and interaction, which pages belong to the front-end development and which pages belong to the client development

When the Bug appears on the page, it is sometimes difficult to find out what went wrong. You need to debug the front end and the client together to find out what the problem is (you may express your own opinions and have a part in the fight).

Communication mode

The following code is all based on the front-end (React) to demonstrate, how the client to achieve JS interaction I will not say much, you can find the client development students to understand. There are two ways of communication, both of which are done with JS code, and the compatibility is quite good.

Front-end notification client: intercept

Client notification front end: injection

Front-end notification client

The link jump is triggered in the H5 page, and the App Webview detects the link jump and then intercepts it, so you can tell App what to do next by carrying parameters on the URL.

Import React, {Component} from "react"; export default class App extends Component {componentDidMount () {location.href = "lsbox://toast?msg= page loaded"; / / notify App} render () {return (click on it);} openMask () {location.href = "lsbox://mask?toggle=1" / / notify App}}

The above executes location.href = "lsbox://mask?toggle=1" to tell App to turn on the mask layer

Lsbox: the front end and the client uniformly define the link jump protocol (you can define the protocol as much as you like)

Actions that need to be performed by mask:App (you can define actions as much as you like)

Toggle=1: action execution parameter (custom parameter to tell App what to do)

If two or more location.href are triggered synchronously (the next location.href followed by the previous location.href), the App may only receive notifications from one location.href, so you need to use setTimeout to set the notification interval for the next location.href (Async/Await encapsulation optimization can be used):

Location.href = "lsbox://toast?msg=one"; setTimeout () = > {location.href = "lsbox://toast?msg=two"; setTimeout (() = > {location.href = "lsbox://toast?msg=three";}, 100);}, 100)

Client notification front end

Inject some global methods, and App Webview directly manipulates the global methods to control the H5 page, using the form window.handleFunc = function () {} to define the injection method.

Import React, {Component} from "react"; export default class App extends Component {constructor (props) {super (props); this.state = {list: [0,1,2,3,4]};} componentDidMount () {window.addNum = this.addNum.bind (this) / / expose the method to App} render () {return ({this.state.list.map (v = > {v})};);} addNum (num) {this.setState (prevState = > ({list: prevState.list.concat (num);}) }} the above is all the contents of the article "sample Analysis of Communication with App in Front-end html5". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.