HTML5plus mobile application development examples sharing

What is HTML5plusDCloud provides a solution for developing mobile applications using traditional web technologies. This article mainly shares with you the development examples of HTML5plus mobile applications, hoping to help everyone.

Enhanced version of mobile browser engine brings HTML5 to native level!

Product slogans are always exaggerated, so don’t pay attention to these details.

Tips

• HTML5plus has a long name, so it is also called HTML5+, or 5+ for short.

• Mobile applications developed using this engine are also called 5+App.

• The related SDK is called 5+SDK.

How to use

Runtime

That is, use HBuilder, another product of DCloud company, to directly develop and debug.

SDK

Integrate 5+SDK into your own native application, and you can use its extended JS API in your application.

Difference

• The Runtime method can directly use the cloud packaging provided by DCloud, and does not require a local packaging environment.

• Runtime method does not require mastering native development capabilities, just use the extended API reasonably.

• The SDK method can meet more needs, but it requires the ability to master native development.

Briefly understand the
Runtime method. Developers do not need to develop the base part of the native application themselves. 5+ does it for developers here. They only need to submit the application. Just package the resources in the cloud.
The SDK method is different. In this case, 5+SDK is extended based on the original native application base. Therefore, developers need to build their own native development environment and perform some native development work.

Basic architecture

According to the official documentation, the Android platform third-party plug-in development guidance is roughly divided into a three-layer structure. For easier understanding, the explanation is expanded into four parts.

Webview

can be understood as a simple browser, HTML, CSS, and JavaScript are all here.

plus

This part is in Webview. Based on the original browser environment, the extension can call the API of native functions. These APIs are all in window.plus inside the object.

JS Bridge

is responsible for connecting the JavaScript layer and the Native layer.

• Receive the request from the JavaScript layer and notify the Native layer to respond accordingly.

• Receive the response result from the Native layer and notify the JavaScript layer to receive the result.

Native

That is, Android and iOS are also the core and key parts of HTML5plus.

The process of one call execution

Take obtaining the application version number as an example

plus.runtime.version;

1. JS layer callplus.runtime.version, Webview initiates a request to JS Bridge.

2. JS Bridge receives the request and notifies the Native layer to read the application version number information.

3. The Native layer executes and gets the result, and notifies the JS Bridge layer of the corresponding result.

4. JS Bridge gets the corresponding result from the Native layer and notifies the corresponding Webview result information.

5. The JS layer obtains the version information of the application.

Complain about it

Personally, I believe that every product and company has its own design philosophy and business strategy. Different users will always have different needs and opinions.
Therefore, when making technology selection, you must understand your own needs and the product information being investigated. In the DCloud community, posts like "Why is there no XXX API", "Why not integrate the XXX SDK", "I don't know how to develop natively, I hope the official can expand the XXX API" and so on often appear. As for the specific reasons for such problems, everyone has their own understanding and will not be discussed here.
When making technology selection, it is best to try it yourself. Don't expect the product supplier to give you the best answer, because they won't stupidly push users away.
------Huali dividing line------
Below, I will share my personal experience and insights, hoping to help other developers make a reference when selecting technology.

Advantages

1. The learning cost is low, as long as you master the basic web development capabilities, you can get started.

2. Cloud packaging eliminates the need to build Android and iOS development environments locally for packaging processing.

3. A set of code can be compiled into two packages for Android and iOS with only a little compatibility processing.

4. I didn’t expect it, I’ll add it to the discussion.

Insufficient

1. plus.ModuleName.* The API provided is limited. Although there is a product called Native.js, you need to master a certain amount of native knowledge. Development capabilities.

2. Depends on the mobile phone's own Webview, so the performance on some mobile phones is not ideal. This has a certain impact on certain business products.

3. Following point 1, the implementation of certain functions requires developers to integrate the SDK for expansion. For example, Bluetooth, application background persistence, etc. This also requires developers to have native development capabilities.

4. Some functions are not fully implemented due to compatibility issues. For example, the corner icons of desktop icons, etc. Of course, Android is seriously fragmented, and some shortcomings are understandable.

5. The document content is not explained clearly enough in some places. Also, the layout of the document is a bit strange.

6. I haven’t encountered any other pitfalls so far, maybe I’m not familiar with them yet.

More suitable scope

Comprehensive official case presentation and personal development experience. To sum up, 5+App development is more suitable for the following situations or products:

• Start-up companies that need to quickly launch applications.

• News information (36Kr), e-commerce (HiMall), content sharing (Fengqiaoju Flowers), takeaway and most other O2O business products, etc.

• Core business functions do not rely on certain native functions

• Some enterprise applications can also be determined according to specific needs.

Not recommended situations

Some situations cannot be generalized, so explanations are based on specific situations.

• Heavily relies on some native functions, such as the need to implement custom map line drawing in the application, the Bluetooth module for data communication, etc.

• The core business involves instant messaging (IM), and we do not want to use third-party JS version SDK.

• Needs to read and write files, such as recording short videos, editing pictures, editing videos, etc.

• Some more "rogue" functions, such as application background persistence, push service persistence, etc.

• Control application permissions, such as prohibiting screenshots and so on. This can only be handled in the native layer, and you know Android compatibility.

Many of the above situations need to be solved through the development of the native layer. Of course, 5+ SDK can be integrated at the same time, and the relevant extension APIs can still be used.

Similar products

• cordova

• apicloud

• appcan

• ionic

• weex

• react native

##Currently This is what I have learned below. Some products have been briefly sampled, and some products have not been experienced at all, so I will not make comparisons or excessive comments here.

Supplementary:

• HBuilder is an IDE and is also the name of the base during real machine debugging. Together, these two are the environment and tools for developing 5+ Apps.

• HTML5plus has many names. The DCloud official website says it is 5+Runtime. Responsible for extending the JS API and enabling JS to call native functions.

• MUI UI framework for mobile development encapsulates several methods involving HTML5plus to facilitate development, which is often misunderstood. But it is really just a UI framework, and calling native capabilities has nothing to do with it.

Related recommendations:

Detailed introduction on how to use WeChat developer mobile application to create and obtain APP ID (picture)

The above is the detailed content of HTML5plus mobile application development examples sharing. For more information, please follow other related articles on the PHP Chinese website!