Native small program cross-platform implementation (wechat/Alipay/Baidu)?

preface

Since wechat launched the small program platform, domestic companies have followed it one after another, bringing the prosperity of small programs. From the perspective of developers, we see more small program developers, all kinds of small program technology constantly appear.

• The emergence of applets enhanced development frameworks
• Applets native framework capabilities expansion, typical wepy/ MPvue
• The emergence of cross-end development frameworks for applets * By writing a single set of code to run multiple applets, typically taro/ UNIApp
• * Due to the great differences between applets/Web/Native platforms, many frameworks have been tried, but it is still in the wild age, and no universally recognized solution has emerged

Behind the boom there is confusion, affecting developers’ choice of suitable technology solutions. Based on this, we did a survey on the cross-platform development direction of small programs, and came to the following suggestions:

How to implement native applets on multiple platforms?

From our understanding, the current small program market, most or wechat small program applications, followed by Alipay small program, Baidu small program. At present, the fusion of these terminals is also more suitable for demand scenarios. Based on this, we investigated the conversion from wechat applets to other end, to help you understand how to quickly realize the migration of wechat applets to other applets.

Note: The following test results are based on the official wechat mini program demo survey

Antmove applet converter

• Liverpoolfc.tv: ant – move. Making. IO/guide /
• Github:github.com/ant-move/An…

Antmove is currently the most mature open source solution for applets conversion. Through Antmove converter, we can convert wechat applets to other applets with one click, and we can also convert Alipay applets to other applets. Currently, it is still being maintained and updated.

Here is an introduction to antMove-based multi-terminal development

taro

Taro is a multi-terminal development solution that follows the React syntax specification.

Making: github.com/NervJS/taro…

Taro is essentially a set of cross-terminal development solutions with custom syntax. However, the official website provides a tool to convert wechat applet into Taro code. Based on this, users can use Taro to convert wechat applet into Taro code, and then convert them into the corresponding applet code of the corresponding platform.

insufficient

• It takes two conversions to get the code for the platform

• The function support is not very ideal. The following is the test situation of converting wechat small program official demo to taro and then converting other platforms

• Transfer to Alipay:

  • At present, the click event after transcoding is invalid. After transcoding, there is an error in the function on the framework, and the logic needs to be rewritten
  • The setData function failed. The project cannot use it

• Turn to Baidu small program

  • Interface (unsupported, needs to be modified)
    • Flex related style Settings failed
    • Button error, getLaunchOptionsSync not handled
    • map
    • Show hide compass
    • Enable the view function
  • Interface (unsupported, needs to be modified)
    • landing
    • pay
    • The news of the service
    • Biometric authentication
    • bluetooth
    • iBeacon
    • Search the WIFI
    • Upload videos and pictures
    • Dynamically loaded fonts
    • Error saving data
    • Multithreaded computing

• Turn a small program

  • At present, the click event after transcoding is invalid. After transcoding, there is an error in the function on the framework, and the logic needs to be rewritten
  • The setData function failed. The project cannot use it

Note: the current transcoding tool initialization wechat program to taro code will have picture path processing error, need to manually modify

conclusion

• The overall experience of the tool is smooth. The core of its design is to use the REACT syntax to complete project development using the API and components provided by the tool, and then generate multi-terminal applets with one click
• At present, there are many problems in transferring native small programs (wechat) to Taro, but the overall transcoding can be completed, but it takes some effort to re-deal with various problems after transcoding

uniapp

Uni-app is a framework for developing all front-end applications using vue.js. Developers write a set of code that can be published to iOS, Android, H5, and various small programs (wechat/Alipay/Baidu/Toutiao /QQ/ Dingding) and other platforms

Making: github.com/dcloudio/un…

Wechat applet conversion uniAPP code guide

conclusion

• Need to manually transform the micro channel applets into UNIAPP applications
• The unofficial version has a conversion tool, but the conversion is not ideal, test wechat official demo conversion error
• Simple development of multi-terminal small program this framework is relatively easy to use, but transcoding wechat small program does not have the function of one-key transcoding, need to manually configure a large number of files, its development cost is relatively high

mpx

Github: github.com/didi/mpx.gi… Github: github.com/didi/mpx.gi… Github: github.com/didi/mpx.gi…

conclusion

• Different small programs need to build different development environment, and do the corresponding configuration,
• Native applet conversion is not supported, but native applet components/pages are supported, which is costly for full applet conversion

Note: besides Antmove converter, the purpose of the other package solution is based on the react/vue or custom syntax to achieve, so full WeChat applet to this transformation process does not contain all the ability and advantage to these frameworks, for native applet migrated to other platform in this paper, the research results can be reference.

Comparison of non-applets syntax multiterminal schemes

This mainly refers to the development of applets using non-applets syntax. There have been many studies and explanations of business code development schemes with non-applets syntax, which can be found in the following links:

• Applets: Native or framework (WEpy/MPvue /uni-app/taro)?
• Chameleon
• A week of in-depth testing, mainstream multi-terminal framework big competition ~by DCloud

Ideas about cross-platform development of small programs

Existing problems

From the above we can see that with the boom in applets, the concept of cross-end fusion has been mentioned more and more, and many frameworks have emerged to solve this problem. But does this really represent a boom in cross-end development?

I don’t think so. There are natural differences between small programs and Web, and between small programs and native apps, which is difficult to make up. Although there are many solutions on the community, they are not mature yet.

Considering only the small program platform, the difference will be a little bit smaller, but to achieve a complete set of code, multiple small program platform is still difficult to run. Here are a few reasons:

• It is difficult to standardize the small program technology framework adopted by various manufacturers
• Small programs will have their own manufacturer genes, ability differentiation

Although there are differences like above, there is still a certain possibility of cross-platform between small programs, which is the reason why there are so many cross-end programs for small programs.

Looking to the future

Despite the disadvantages mentioned above, the advantages of cross-platform development still exist, and the temptation to run a single set of code in multiple places is always present. When we reduce the overall requirements and only consider certain platforms, mature solutions have emerged.

In most cases, what we need is the integration of one end or several ends. As shown in taro’s statistical example, we can find that 90% of wechat applet applications are developed by taro only. Uniapp also mentions that most apps only use it to develop one side of the app. In Antmove statistics, the vast majority of users are only micro channel small program and Alipay small program at both ends of the fusion requirements.

Multiterminal convergence was mentioned before applets, and react has been successful in this area in the front end. Under the concept of learning react once and writing in multiple places, multi-end requirements such as react- Web /react-native/react- Sketch are realized at a low cost, thus building a rich React ecosystem.

In addition to the React system, the following solutions effectively implement some platform cross-ends

• Flutter – High performance mobile platform framework
• Electron – PC application cross-platform development tool
• QT
• Small program
  • taro/uniapp/Antmove/rax/mpx/cml

Imagine the future, equipment complexity is an inevitable trend, which also tests whether the cross-end technology solution is mature enough.