[uni app advanced practice] take you hand-in-hand to learn the development of a purely practical complex project 2/100

Project description ：
Technical contents include ：
1、uni-app And Taro Comparison and usage scenario analysis of multi end frameworks
2、uni-app Solution to multi terminal adaptation problem
3. Abstract encapsulation of multi terminal components

Positioning the crowd ：
Already there. uni-app Basic knowledge of , And want to learn more uni-app Classmate

difficulty ：
Middle and high

=============================== Gorgeous dividing line ===========================

uni-app And Taro Comparison and usage scenario analysis of multi end frameworks ？Taro and uni-app Selection comparison ？

One .Taro and uni-app Introduction to

1.Taro What is it? ？taro Introduction to ？

Taro Is an open, cross end, cross framework solution , Support use React、Vue.js、Nerv Wait for the framework to develop Applet 、H5、react Native And so on .

2.uni-app Introduction to

uni-app It's a use Vue.js Develop a front-end framework for cross platform applications , Developers write a set of code , Can be compiled to iOS、Android、H5、 Small programs and other platforms .

Two .Taro and ni-app Characteristics

website ：

1. website taro Characteristics ：

（1） Multi terminal operation ： One click generation can be found in wechat applet /H5/ReactNative Code running at the other end .

（2） Grammar style ： use React Grammar standards , Support JSX Writing , Make the code more expressive .

（3） Componentization ： Support component development , Make code reusable , Make function development more clear .

（4）TypeScript： Full support TypeScript, Provide greater productivity .

（5） Development experience ： Intimate code intelligent tips , Real time code checking , Greatly improve the efficiency of development .

（6） Modern development process ： Supporting development tools Taro CLI Automate the development process , It all starts with one line of command

2. website uni-app Characteristics ：

（1） More cross-border ; A set of code , Can be published to IOS,Android, Applet ,H5 Wait for multiple platforms .

（2） Platform capabilities are not limited ： At the same time of crossing the ends , Compile by recommendation + Platform specific API call , Can write personalized code for a platform gracefully , Call proprietary capabilities without affecting other platforms ; Support native code writing and native sdk Generate .

（3） Excellent performance experience ： Experience better Hybrid frame , Load new pages faster

（4） The surrounding ecology is rich ： Support NPM Package management , Compatible with wechat applet custom components and JS,SDK, Support mpvue Items and components ,APP End support and native mixed coding ; It is equivalent to the rich three parties in wechat applet sdk G is directly used for cross platform development .

（5） The cost of learning is low ： Based on the front-end technology stack , use vue grammar + Wechat applet api, No additional learning costs .

（6） Low development cost ： The labor cost is greatly saved , Recruitment , Human resources , management , Research and development , The cost of all aspects of testing has been greatly reduced ;HbuildX It is a powerful tool for efficient development , The R & D effect will at least double after mastering it （ Even if it is worth developing a platform ）.

3、 ... and . The contrast between the two

1. Common ground :

（1） Both are developed with mainstream frameworks

（2） Can support wechat 、 Baidu 、 Alipay 、 Today's headlines and other small programs ,H5, as well as iOS and Android Of App

（3） Both support the use of npm/yarn Third party installation management relies on

（4） Both support the use of ES6 Even newer ES standard

（5） Both support the use of less/scss/ts Wait for precompiler

（6） Both support application state management ,taro Support Redux/Mobx,uni-app Support vuex

2. Dimensional considerations :

Technology stack ： The technical framework used , Compare the technical differences
development tool : Tools for developers , It can bring icing on the cake effect to the development
Span end degree ： Actually run the project to each platform , Compare the smoothing degree of platform differences
Operational performance ： Whether the framework brings additional performance overhead , Reduce the user experience
Development experience ： Whether it supports modern development process , Whether to provide efficient and friendly assistance to engineers
Community ecology ： Whether the community is prosperous , Is there a large number of wheels available ？
Quality comparison : Through some cases, we can further understand the advantages and disadvantages of the two development functions

Four . summary

Take it all into consideration , Decide to choose uni-app, The specific reasons are as follows :

1.uni-app It works better on different platforms ;

2.uni-app It has its own IDE, Can help us quickly build projects and package projects ;

3. How to handle more platforms with a limited number of front-end teams , Is our first consideration , No one wants to step on too many holes to complete the task , And across the end uni-app The more mature ;

4. Study uni-app（vue） The cost of learning is lower , Lower development time and risk .
 

at present Taro Supported terminals

Wechat applet
H5 Mobile Web page
Baidu applet
· Alipay applet
· Apply it quickly
·ReactNative
· Bytedance applet
·QQ Light application
It is currently the front-end framework that supports most applets , And support ReactNatvie, It shows that we can easily generate comparable to native APP application . So if the application of the company wants to be promoted throughout the network , Take up the most traffic entry , Use Tro No problem at all .
As a programmer , You use a unified framework , A unified AP sichuan , Unified code specification , Unified code structure , What a great development experience . In terms of enterprises , One development can complete the layout of all mainstream platforms , Labor and time costs are minimized , The boss felt that he had saved 100 million .