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】
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
- Confirm the size of your project
- Confirm the importance of your project in the company
- Confirm your project cycle
- Confirm your technical capabilities at this stage
- 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
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 ）
On the left of the above three pictures is the wechat applet , In the middle is Android, The right side is IOS
- 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
- 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
- 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
- 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 .
- 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 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 ：
- Through official HBuildX The editor generates an application with one click
- 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
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 .
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 .
author[Free front-end team],Please bring the original link to reprint, thank you.
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
Front end interview daily 3 + 1 - day 858
Spring Webflux tutorial: how to build reactive web applications
[golang] walk into go language lesson 24 TCP high-level operation
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
-  typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich