current position:Home>Recording the course of a multi terminal unified development survey

Recording the course of a multi terminal unified development survey

2021-08-27 04:12:25 Free front-end team

Preface

The content of this article provides a set of requirements before multi terminal unified development , Some preparations need to be done . If you happen to have relevant needs , For example, it is necessary to use a set of code to be compatible at the same time , H5/ Each end applet /App Then this article may give you some help , Let you take fewer detours . Don't talk much , We began to .

Why do you want to be multi terminal

At multiple ends of the device , And more and more application bearing methods , The era of technology isolation of major platforms , As the company's operation and technology development team , We need to find a reliable , Excellent technical solutions , To improve our efficiency in developing and realizing products , Reduce the technical cost of implementation , And achieve the best product effect .

Factors to consider before selecting a technical framework

  1. Confirm the size of your project
  2. Confirm the importance of your project in the company
  3. Confirm your project cycle
  4. Confirm your technical capabilities at this stage
  5. Confirm the function of the selected frame , performance , maturity , Maintainability , Extensibility , Community activity

At present, there are more excellent products in the market

  • uni-app DCloud
  • Taro JD.COM
  • Chameleon sound of dripping water
  • Hippy tencent
  • Weex Ali

The above are products with high frequency of code update . And meet at the same time H5、 Applet 、App Including Uniapp、Taro、Chameleon. and Hippy and Weex Just support App and H5 Compilation and conversion at both ends . It is worth mentioning that didi Chameleon The grammar of is a kind of Vue The grammar of , If you want to use Chameleon Words , Then you need to know in advance Chameleon The grammar of

uni-app That's what we're familiar with Vue Grammar and Vue file , Writing and Vue Almost consistent, except for the routing structure and the built-in api To complete .

Taro The official provided Vue(2,3) and React Two versions . It depends on which technology stack you are familiar with . however Taro In regard to App The support of is to use FaceBook Of React Native. utilize Taro convert to React Native Then integrate into the existing App in , If you want to do something in a native application , You need to consider native and React Native, And the Taro Compatibility between . And officially TaroUI It is not supported React Native Of .

since Taro Both frameworks are supported , Then the scope of coverage must be relatively large . So let's get to know Taro What can I do

Taro Characteristics of

Installation and use | Taro file

Untitled.png In the face of RN After the installation of some environments , I wrote a few little demo Take a look at Taro For wechat applets and App What are the differences in style between the two ends .

In the building RN In the process of environment , Most environments rely on downloading very slowly and have a very high failure rate , If the network agent of the terminal is sent abroad , It may increase the success rate and download speed .( Specific methods can be found by yourself )

Snipaste_2021-08-23_11-28-52.png

On the left of the above three pictures is the wechat applet , In the middle is Android, The right side is IOS

  1. The head of the Bar, Use Taro Provided getStatusBar Api When getting the height of the status bar , You can see it , The applet side performs well ,Android The end start position is not at the top of the page , In this way, there is no way to meet the requirements of immersive status bar ,IOS Terminal Bar The height and applet performance are different
  2. about RN Most of the elements inside display All are inline-block, So if it's arranged horizontally , It needs to be used flex-direction attribute , And in RN The default value of the end is column, Arrange vertically
  3. RN If you want to color a paragraph of text , It needs to be used. Text Components , Otherwise, writing color words will not take effect . There is no such problem on the applet side
  4. If the web End form to deal with a text overflow , stay RN The end is obviously not effective .RN To achieve this effect is to borrow Text In the component numberOfLine Properties of .
  5. Box-shadow stay RN The end also does not take effect , And there will be red screen error reporting

We can see the short demo in , Actually Taro For wechat applet 、Android、IOS Three terminal , The performance of the style is still a little different , If you want to be unified , Need to write some compatibility code . In the reading Taro The official documents of , I find Taro The official documentation is in the basic tutorial , Advanced guide , Community ecology and other aspects are very good , There is no doubt that Taro It is a very excellent and avant-garde framework . If your needs are not App Link , that Taro It's a very good choice .

uni-app

uni-app Official documents

uni-app The introduction on the official website is ,uni-app It's a use Vue.js Develop a framework for all front-end applications , Developers write a set of code , Can be posted to iOS、Android、Web( Response type )、 And all kinds of little programs ( WeChat / Alipay / Baidu / headlines /QQ/ Well quickly / nailing / TaoBao )、 Fast application and other platforms .

so uni-app about Vue The support is quite friendly . And Tencent classroom is also right uni-app There are corresponding video tutorials . If you are a beginner , And you just don't want to learn by reading documents uni-app, Then you can try .

uni-app There are two ways to create :

  1. Through official HBuildX The editor generates an application with one click
  2. Use scaffolding to create

At present, after I create an application with scaffolding , Wrote a static demo. Don't talk much , Let's take a look at the wechat applet and Android as well as IOS There are differences in the style of

Snipaste_2021-08-23_11-29-15.png

Still on the left is the wechat applet , In the middle is Android, The right side is IOS

In fact, from the static page ,uni-app In terms of the style performance of the three ends, it is quite good . For example, the effect of text overflow ,transition Animation , There is no difference in performance such as shadow .

uni-app There are not too complicated operations in the process of integration into native , utilize HBuildX The packaging , Operation, etc , As long as there is a corresponding environment and Simulator / Real machine . It can be very simple to run to the corresponding model for input debugging . But there is a saying uni-app Official documents are not so friendly to readers , Some problems are not as efficient as searching directly in the community . Of course, this indirectly shows uni-app The community activity is OK .

If your requirements include App Something related and you're right App And Native If you are not so familiar , presumably uni-app It's a good choice for you .

Forced to be familiar with chameleon Under the premise of grammar , The author didn't go deep into chameleon Support for each end , If you are interested in chameleon If you are very interested , Then you can also use your industrious little hand , Go and find out what's great about it .

summary

Combine your own projects , Business scenario , Technology stack and other requirements , It is right to choose a suitable technical scheme . There is no best technical solution , What suits you is the best .

Untitled 7.png

copyright notice
author[Free front-end team],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827041220627g.html

Random recommended