How to apply applet container technology to develop hybrid app

Hybrid App（ Hybrid mobile applications ） It means between Web-App、Native-App Between the two App, Both of them “Native App Advantages of a good user interaction experience ” and “Web App Advantages of cross platform development ”.

blend App Advantages of development

The demand of information security 　 blend APP You can realize dynamic permission binding and authorization mode , Able to support on specific devices 、 Choose different sub applications between specific people , And it can be adjusted at any time with the work content of users . Therefore, it can meet the security needs of enterprises .

The need for business flexibility 　 In the past, because of the adjustment of enterprise product demand , Users must update a new version or download again APP To realize its function . blend APP Development technology enables users to open APP You can get new services and functions , Realize the flexibility requirements of the business .

The need for development speed 　 Because of the mix APP Just write a set of code , Can be generated synchronously Android and IOS Two platforms APP, It can even be partially compatible with wechat official account and small programs . This saves more than just writing code , More importantly, it saves the problem of cross knowledge structure coordination among multiple technical teams , It also saves APP The time cost of debugging with the server .
Add applet container technology to the mix App Develop mainstream queues

「Native+H5」 and 「Native+ Applet 」 Two hybrid APP Compared with the development mode ,「Native+ Applet 」 The development mode of is better .

Application advantages ：

from 2017 In, wechat launched a small program for the first time , After four years of development , Major Internet giants have launched their own small program application platforms , Small programs become real “ New Internet technology standards ”. By 2021 In the first half of , Breakthrough in the number of small programs in the whole network 700 m , among , Wechat applet is the mainstream of the industry , More than 430 m , The proportion is as high as about 61.43%.
With the dividend of wechat , Convert the existing wechat applet into App, And activate and retain users , Plus the social platform application as a drainage , Enterprises can be described as low-cost （ Just have a small program ） The business will cover the whole life cycle of users .

Technical advantages ：

• Cross platform capability , A set of codes can be iOS And Android Running on both platforms ;
• Far more than H5 Experience （ Support local cache ,Webview, There are rich components and support libraries ）;
• Can get more system permissions , Complete richer product design ;
• You can avoid DOM Let the cat out of the （ Do not use commonly used window Object and the document object ）;
• Effective reduction of package size , Save traffic and storage
• Service is no longer limited by distribution , Support hot update

Back to the sub title , Why is it that small programs are mixed App The heavy benefits of development ？ Just imagine , It only needs Write a set of small program code , It can be generated synchronously at low cost Android and IOS Two platforms APP,PLUS Seamlessly connect wechat official account and applet , Truly realize from the mobile end “ Cross end operation ”, Upgrade to “ Full end operation ”.

With a small program container technology （FinClip） Take practice as an example

Applet container technology , There are also many on the market , The author investigated , Find out FinClip Its functions are quite complete , Work well , Here is a simple practical example .

1、 Business background
Our company is a small business team , Because of my love for our business , I have accumulated fast on wechat for many years 10W Users of . Last year, I received a wave of dividends from social platforms by chance , The number of users has increased greatly , Business is growing rapidly . But not for long , There will always be competition in profitable industries , Due to the increasingly fierce competition in the social platform industry , There has been a large decline in incremental users , Business development is blocked . therefore , We decided to start operating stock users , After all, users are the lifeblood of our small businesses , It is the source of business contribution .

2、 know FinClip
know FinClip It's a coincidence , All along, we only have small program R & D engineers , If you want to maintain stock , So much can't be done around App Of . So I searched the website 「 Small program transfer app」 Words like that try your luck , I really found .

3、 Practical experience
Because it has not been developed App, Also can only catch the duck on the shelf , Follow their developer documentation and video tutorials step by step .

My references are as follows ：

7 Step ！ Use small programs to quickly generate App！

There is also a schematic diagram , It's also very clear ：

4、 Operation steps

1） Put the existing wechat applet , convert to FinClip Applet .

On the blackboard ： If your wechat applet is written using wechat syntax , Then there is no need to use their FIDE To precompile , If your applet uses Flutter、RN And other mainstream front-end frameworks , It's best to use it. FIDE Compile the , See if there will be any errors .
in addition , If your login is authorized by wechat , It is recommended to operate the... First 2） Associated wechat authorized login , In this way, you don't need to disable wechat login to run .

The steps here include ： Create applet basic information >> Upload applet code package （ Mine is a small program written in wechat grammar , It's no use FIDE Previewed ）

After operating these two steps , When there is nothing wrong ,FinClip The small program code package has been produced .

2） Associated applet wechat login authorization
FinClip There is a very useful function , That is, wechat login authorization can be reused , let me put it another way , In own App Or use their small program to transfer App function , Through this function , Adjust in advance App Wechat login in , Many basic development and debugging work are reduced .

First step ： Sign in FinClip Management backstage

The second step ： stay “ Applet management ” find ： My applet >> Applet details >> Third party management .

The third step ： Will be made by FinClip The designed applet authorization page is added to the existing applet code package and submitted for review , The official authorization page has been directly placed in GitHub, You can get it directly ：

Step four ： Next step , Click add login Association on the management background page , Fill in... As prompted “ Wechat applet is original ID”、“ Wechat applet nickname and avatar authorization page path ”、“ Path to the authorization page of the applet mobile number ”.

Come here , The basic applet is already running . Let's see. App Inside the small program effect ：

3）App How to pay ？
As you can see , Our enterprise is an e-commerce application , Payment is indispensable . In wechat , We mainly use wechat to pay , After consulting Native Friends of development , Pay via wechat SDK Embedded into the generated App in , Debugging will get through the process .

The user login – Commodity flow – The whole link of the payment order runs through （ payment SDK It took a lot of time to embed and debug , After all, I don't understand Native Development ), Remove payment SDK Time for study , Probably 1 It can be done in days , Super happy ！

If you want to know more Applet container technology related content , Their official website has a detailed introduction and description .