I developed an app similar to wechat runnable applet with fluent

Flutter yes Google Open source build user interface （UI） tool kit , Help developers to build multi platform beautiful applications efficiently through a set of code base , Support mobile 、Web、 Desktop and embedded platforms . Many domestic developers will Flutter、Taro、React Native、Weex Etc. are listed as the mainstream front-end framework on the market .

Flutter Advantages of frameworks

Flutter The advantages of , If you choose a cross platform framework , With many based on html Cross platform framework ,Flutter Definitely the best experience , Performance and construction ideas are almost the closest to the original development framework .

1、 Powerful and smooth .Flutter be based on dom Tree rendering native components , Rewriting their respective... Directly on the two platforms UIKit, Connect to the bottom of the platform , Reduce UI Multilayer conversion of layers ,UI Comparable performance , This advantage is particularly evident when sliding and playing animation .

2、 Route design highlights .Flutter It's very convenient to pass values by route ,push A route , Will return a Future object （ That is to say Promise object ）, Use await perhaps .then You can route at the destination pop, When you return to the current page, you receive the return value .

3、 Excellent animation design .Flutter The animation of is very simple , Animated objects will generate many per second according to the screen refresh rate （ It's usually 60 individual ） Floating point numbers , Only one component attribute needs to be passed through the part （Tween） Associate to animated objects ,Flutter It will ensure that the correct components are rendered at every frame , So as to form a coherent animation . This very violent operation in Flutter There is no obvious Caton on the , This is also Flutter One of the magic things about .

4、 Choose static language （Dart）.Dart It's a static language , This is also relative to js An advantage of .Dart Can be compiled into js, But it looks more like java. Static language can avoid errors , Get more editor tips , Greatly increase maintainability . quite a lot js The library is already in use ts Rewrote ,Vue3.0 The bottom layer of the will also be used ts To write , The advantages of static language are self-evident .

Flutter shortcoming ： Have to be familiar with the source code

Flutter The main problem is that we need to know the original environment very well .Flutter The main advantage is that the animation is smooth , Many developers react more smoothly than native Android （ In doubt ）, At least in the iOS There's no Caton in the sky , Animation on Android is also very stable , Performance shows Google The hard power of . let me put it another way ,Flutter yes UI Cross platform , Finally, it runs on the native platform .

Flutter Having the ability to call each other with native code is certainly reasonable , But there is a specialization in art , How can a front-end engineer know what is UIViewController, What is? Activity Well ？ Think in this direction , If a front-end engineer , Both the front-end framework and the source grammar should be familiar , So learning Flutter It seems to be a very contradictory point .

Flutter+ When the applet runs , New idea of mobile cross end development technology combination ？

Since the contradiction is so obvious , And irreconcilable within its own framework , Why not try the assembled technical idea ？

Flutter The front-end animation design of is so excellent , In China, small programs are very important technology platform , Whether as “ There are specialized skills ” take Flutter The framework is applied to the applet side ？ Then by enabling the applet to run in App Runtime technical solution （ Such as FinClip） etc. , Combine into 「 Applet +App」 Of Hybird Development plan ？

I found the following information , Compared with 「H5+App」 Of Hybird programme ,「 Applet +App」 The advantages of our technical solution are obvious ：

1. Cross platform capability , A set of codes can be iOS And Android Running on both platforms ;
2. Far more than H5 Experience （ Support local cache ,Webview, There are rich components and support libraries ）;
3. 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 ）;
4. Effective reduction of package size , Save traffic and storage Service is no longer limited by distribution , Support hot update

Flutter Practice on applet side , Some big factories have also joined , We can see its prospects ：

JD.COM ： hold Flutter The exploration extended to wechat applet end

Jd.com launched Flutter_mp Open source projects for , This framework mainly does two things ： 1. Need basis Flutter Generate relevant applets wxml Template file . 2. collect wxml Render the required data , Place... On the widget component data Field . flutter_mp It is still in the early experimental stage , Many functions are still under exploration and planning , Only support Center,Column,Container,Expanded,Image.asset,ListView,Row,Text These are basic Widget, Temporary does not support Customize Widget, And their own Flutter Code can only appear in lib/main.dart In file .

Meituan ： Based on cross platform framework Flutter Dynamic platform construction

Both wechat and salted fish emphasize Flutter cross-platform , And meituan emphasized Flutter Dynamic , And we know that ,Flutter Online dynamic is not supported , Therefore, the sharing of meituan mainly focuses on the dynamics of logic layer and rendering layer . Meituan has a preset in the dynamic engine JSC modular , That is to say JsCore, adopt JSC To execute JavaScript So as to realize the dynamic of logic layer , Rendering layer dynamics is achieved by xml+css To show , Then parse the generated layout tree and finally pass Flutter To render .

Applet Flutter There are many dry goods on all major technology platforms , I won't repeat it here .

In fact, it's simpler here , Is based on Flutter Turn the applet into App, The following is mainly about what I found , use FinClip Turn the applet to App Practical operation of . Let's first look at the final practical effect ：

It seems that the next small program will turn App Overall schematic diagram of , It's still very clear ：

As a front-end Developer , Do not understand source development , So we can only catch the ducks on the shelves , Follow their developer documentation and video tutorials step by step .

I also refer to their other content , as follows ：
The seven steps use small programs to quickly generate App_ Bili, Bili _bilibili

Operation steps

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

On the blackboard ： If the applet uses Flutter And other mainstream front-end frameworks , The official suggestion is to use 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 generated .

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 ：https://github.com/finogeeks/wechat-auth-page

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 ”.

At the end

Now some big guys practice （ For example, Jingdong's flutter_mp Open source project ） indicate , Completely put Flutter It's impossible to render all the features to an applet , Generally, enterprises need to have choices when developing 、 Some pages are flutter Rendering of , Some functions run on applets .

Cross end development of applet , Some big guys also recommend mature RN Transfer to applet project Alita, Interested partners can try .