preface

This article provides some of the preparatory work that needs to be done if you want to do a set of multi-terminal unified development. If you happen to have a need, such as a code that is compatible with H5/ applets/apps, then this article may help you avoid some of the pitfalls. Without further ado, let’s begin.

Why do it all

In equipment, as well as the application of carrying way more and more, each big platform technology isolated era, as the company’s operational and technical development team, we need to find a reliable, excellent technical solution, to enhance our development efficiency is achieved, and implementation of technology to reduce costs, and achieve the best effect of products.

Factors to consider before selecting a technology framework

  1. Identify the size of your project
  2. Determine how important your project is to the company
  3. Identify your project cycle
  4. Identify your current technical capabilities
  5. Identify the functionality, performance, maturity, maintainability, extensibility, and community activity of the selected framework

More outstanding products on the current market

  • uni-app DCloud
  • Taro jingdong
  • The Chameleon drip
  • Hippy tencent
  • Weex ali.

These are products with high code update frequency. And meet H5, small program, App including Uniapp, Taro, Chameleon. Hippy and Weex only support App and H5 compilation and conversion. It is worth mentioning that the syntax of Chameleon is a kind of Vue syntax. If you want to use Chameleon after investigating, you need to know the syntax of Chameleon in advance

Uni-app is a Vue syntax and Vue file that we are familiar with. It is written almost the same as Vue except for the structure of the route and the use of built-in API when jumping.

Taro officially provides two versions: Vue (2,3) and React. It depends on which stack you are familiar with. However, Taro uses FaceBook’s React Native to support the App. Convert Taro into React Native and integrate it into existing apps. If you want to do something in Native apps, consider the compatibility between Native and React Native, as well as Taro. The official TaroUI does not support React Native.

Since Taro supports both frameworks, the scope of the project must be quite large. Taro: What can you do

The characteristics of Taro

Installation and use | Taro document

After installing some RN environments, I wrote several small demos to see the differences between Taro’s style and the styles of wechat applet and App.

In the process of building RN environment, most of the environment depends on the download is quite slow and the failure rate is very high. If the terminal network agent is sent abroad, it may increase the success rate and download speed. (Specific methods can be found by yourself)

In the above three pictures, the far left is wechat mini program, the middle is Android, and the right is IOS

  1. Taro provides the getStatusBar Api to obtain the height of the status Bar in the header. It can be seen that the small application side is performing well. The starting position of the Android side is not at the top of the page, so there is no way to achieve the requirements of the immersive status Bar. The height of Bar on IOS terminal and performance of small program terminal are different
  2. For most elements in RN, display is inline-block, so if you’re looking horizontally, you need to use flex-direction, and the default value in RN is column, vertically
  3. RN if you want to color Text, you need to use the Text component, otherwise it won’t work. The applets don’t have this problem
  4. Handling a text overflow on the Web side obviously doesn’t work on the RN side either. The RN side does this by borrowing the numberOfLine property in the Text component.
  5. Box-shadow also does not work on RN and causes red screen error

We can see from the short demo that Taro has a little bit of difference in the performance of styles in wechat mini program, Android and IOS. If you want to achieve unity, you need to write some compatibility code. When reading the official documents of Taro, I find that the official documents of Taro are very good in basic courses, progressive guides, community ecology and other aspects. There is no doubt that Taro is an excellent and avant-garde framework. If you don’t need an App, Taro is a great choice.

uni-app

Uni-app official documentation

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

Uni-app is Vue friendly. Tencent Classes also have video tutorials for UNI-App. If you’re a beginner and you just don’t want to learn Uni-App by reading the documentation, try it.

Uni-app can be created in two ways:

  1. The application is generated with one click through the official HBuildX editor
  2. Using scaffolding to create

So far I have created an application with scaffolding and written a static demo. Without further ado, let’s take a look at the differences in style performance between wechat applet and Android and IOS

It is still wechat small program on the left, Android in the middle and IOS on the right

Uni-app does a pretty good job of looking at the three ends of a static page. For example, text overflow, transition animation, and shadows are all the same.

Uni-app can be integrated into native without too many complicated operations, using HBuildX packaging, running and other operations, as long as the corresponding environment and simulator/real machine is available. It can be very simple to run to the corresponding model above input debugging. But uni-App’s official documentation is not as user-friendly for readers, and some questions are not as efficient as digging through the community. Of course, this indirectly shows that uni-App’s community is still active.

Uni-app is a good choice for you if your needs involve apps and you are not familiar with apps and Native apps.

Under the premise of being familiar with The grammar of Chameleon, the author did not thoroughly understand the support degree of each end of Chameleon. If you are very interested in Chameleon, you can also use your hardworking hands to understand the strong point of it.

conclusion

It is correct to choose a suitable technical solution based on your own project, business scenario, technology stack and other requirements. There is no best technical solution, suitable for their own is the best.