Detailed explanation of native and H5 mixed development

Statement ： There is no charge for this tutorial , Welcome to reprint , Respect the work of the author , Not for commercial use , Infringement must be investigated ！！！

 

Catalog

One 、 Preface

Two 、 Primitive and H5 brief introduction

1、 Analysis of the original Android And HTML5

2、Native App Advantages and disadvantages

3、H5 Characteristics

4、web app and Native app Comparison of , And use scenarios

---

One 、 Preface

A few days ago, a friend asked ：“Android Are there any difficulties and technical points in e-commerce development ？ You do that Lenovo Mall 、 What interfaces do Wanda mall use h5 了 ？ What you did before is embedded a lot h5 Do you ？”. Then think about the summary notes of previous studies , Write a blog to share .

Two 、 Primitive and H5 brief introduction

The content of the article is mainly divided into 5 spot , And this 5 The main purpose of this point is to analyze the original App And Web App Their respective advantages and disadvantages , And the interactive function realized by the combination of the two .

1、 Analysis of the original Android And HTML5

2、 What is? Android And H5 Interaction ？

3、 How to achieve Android And H5 Interaction between ？

4、Android And H5 Interactive case demonstration

5、 How can we achieve Android And H5 Hybrid development between ？

 

1、 Analysis of the original Android And HTML5

     

First, let's take a look at this 2 A picture , In this picture, you can see , There are a large number of mobile phones of various brands and models . In fact, through this picture , I want to show you , So many mobile devices have joined our Internet . According to a recent study of roots , The number of new mobile phones in China has reached 12.8 Billion , So many mobile phones , It will bring you , A huge boom in applications . Because each of us on our cell phones , Will be loaded with various applications .

In fact, the so-called primary app, One is Android The mobile phone , One is to IOS Apple mobile phone . such app Is unique to mobile platforms , He depends on the type and model of mobile phones .Android and IOS Mobile phone software , They have to develop separately , Then the tools and languages used in development are different . Such as ：Android It uses java Language , Development tools are eclipse、Android Studio. that web app Well ？ Of course, with H5 .

that web app What are the characteristics in the implementation process ？

It is a development program that can be run everywhere only once , It doesn't rely on mobile platforms . Whether it's Android The system phone is still IOS System phone , It works . So we choose native app Development , Or choose web app Development ？ They have their own advantages and disadvantages , Then it would be better if we could combine their advantages , We call this development model Android And H5 Hybrid development . We can look at the picture below ,Native、Hybrid、Web That is, corresponding to the original development 、 Hybrid development 、Web app Development

2、Native App Advantages and disadvantages

advantage

（1） Excellent user experience and gorgeous interaction .

This is mainly reflected in the fluency of our use of mobile phones

（2） Not limited by network speed , Save bandwidth costs .

In our native development, we usually grab the interface to get json character string 、xml Data such as , Then it is parsed locally , So the network speed may be simply in terms of string , There are no particularly big restrictions . But for web app In terms of implementation, there are certain requirements for speed .

（3） Access to local hardware devices and resources .

It mainly refers to calling the hardware of the mobile phone itself , for instance ： camera 、 Sensors, etc

（4） The profit model is clear

Inferiority

（1） Porting between different platforms is troublesome .

It's about Android mobile phone 、 Developed by Apple mobile phone , Can't cross platform with each other

（2） The cost of maintaining multiple versions is relatively high .

In the later stage, we will continue to receive the dialog box of upgrading and optimization . Such as ： Various holiday activities , At this time, you will be prompted that you need to upgrade to participate in this activity .

（3） It needs to be reviewed by a third party .

If you want to app go online , Need to be audited by a third party , Because you may have to upload to the store , And the store has to be audited to pass . Such as ： Millet shopping mall 、 HUAWEI shopping mall 、vivo Shopping mall, etc

（4） Profits need to be shared with third parties .

Because you may have to upload it to the store , And users download app Most of them are downloaded from stores , Then the store may charge you part of the fee or share your profits

3、H5 Characteristics

（1）h5 It can help you get rid of your dependence on the platform , The user opens the browser , You can access your application directly , Without going through all kinds of store Audit .

（2）h5 Support audio 、 Video and other multimedia , You can watch and listen without any plug-ins .

（3） Users can use offline , Very few updates downloaded , You can update all , You can also choose to replace some files .

（4） Use h5, Code is more secure , as everyone knows Web A big development problem of application is the problem of code security , But now Android Html5 Can be Web All the codes are encrypted , Decrypt the local application and then run , It greatly provides code security .

（5）Html5 Can achieve cross platform , Most core code does not need to be rewritten , It can be used in many places , Including mobile applications 、 Mobile website 、 Mobile website 、 Various browsers .

4、web app and Native app Comparison of , And use scenarios

 1、 If APP Large text appears in .（h5）

Such as ： News 、 Raiders and other software , Then his format is relatively rich .

for instance ： Your text may be interspersed with pictures or audio 、 Video and so on , Or richer font styles , For example, to bold and other effects

At this time, we may use H5 Here we go .

2、 If pay attention to APP The reaction rate of .（ Native ）

The reaction speed includes the fluency of the page , How to see the fluency of this page ？

for instance ： Let's slide this page , Without Caton , At this time, we will use the native application .

Because if we want to use Web App When , We need to know that when it slides , You need to load the whole page , That is, when the page switches again

from A Page to B page , Then its page needs to be reloaded , The loading process will be slow .

3、 If APP Yes no network 、 Sensitive to network advantages and disadvantages .（ Native ）

such as ： Offline operation 、 Online operation is more sensitive , Native is recommended here APP

although h5 It can also be realized , But the implementation is relatively complex .

4、 If APP Need to call the hardware frequently （ Native ）

Native is recommended APP, such as ： camera 、 Microphone 、 Sensors and so on

5、 If APP User common page frequency switching （h5）

such as ： Recent Taobao 、 Jingdong and other activities , Its pages are constantly changing , Need to constantly make new pages , It will take a lot of time and cost .

It is recommended to use H5, Lower cost 、 The efficiency is relatively fast .

6、 If the budget is limited （h5）

In other words, the development cost . Then we can develop a cross platform , Can be in Android Mobile phones can be used on Apple phones ,

Then we'll consider using h5, If the user experience requirements are not very high , that H5 It's our best choice .

 

Then through the following 6 spot , We will find that in developing native APP and Web APP, They have their own advantages and disadvantages ,

Can you take a way , Combine the advantages of the two together for development ？

At this time, we have a new development method ：H5 +  Native  = Hybrid development （Hybird APP）

 

I'll write the rest of the article later

2、 What is? Android And H5 Interaction ？

3、 How to achieve Android And H5 Interaction between ？

4、Android And H5 Interactive case demonstration

5、 How can we achieve Android And H5 Hybrid development between ？

6、 Native app How to communicate with h5 Framework interaction ？

Stay tuned ！！！