Taro multiport unified framework for learning (a)

2020 Monday, February 10th time the epidemic first day of work at home
will share out of their own front-end technology learning at home, we hope to help you learn

Taro framework of the introduction and opening presentation

Taro was launched by the laboratory of Jingdong bump framework, the purpose is to solve the multi-terminal chaos, also present a relatively new framework.
When we develop a model in accordance with one kind of code development is complete, the project will have the ability to appear in any terminal, which is a think are very interesting. That specific Taro those advantages, see the following picture.
Here Insert Picture Description

Taro is currently supported terminal

  • Small micro-channel program
  • H5 end mobile Web page
  • Baidu applet
  • Alipay applet
  • Fast Application
  • ReactNative
  • Byte beating applet
  • QQ light application
    is currently little support up front-end framework program, and supports ReactNatvie, that we can easily generate comparable APP native application. So if you want to use the company's entire network promotion, occupied most traffic entrance, then it is no problem using Taro.
    There are familiar with uni students speak uni have such similar functions, function generation multi-terminal applications, but also dedicated editor, debugger is very convenient, below put a taro and uni-app as well as others such as mpvue like comparison chart
    Here Insert Picture Description
    by the this can be seen, the power of Taro, Taro and the framework will be increasingly high proportion of technology in the front end. And with a unified framework for a unified API, a unified code and unified norms of the code structure, it is what a great development experience.
    A development can be completed layout, manpower and time costs for all major platforms of compression to a minimum, saving a one hundred million oh feeling.

We Taro below the magic veil put together Secret

Taro environment and to build a Hello World

Pre-knowledge

This front-end framework to learn, you need some pre-knowledge:

  • HTML, CSS, JavaScript these three basics, at least to learn to make simple static page
  • Understand MVVM framework, if it will be the best framework React
  • Learn ES6 relevant grammar, as well as a current popular front-end development framework in 2020 to make the code with the ES6 regulate them more convenient for project development and management

Introduction Taro compilation tools

Taro is a multiport React grammar specification to follow the development of solution using Taro, only write a code, and then by Taro compilation tools, say the source code can be compiled and then each different terminal (WeChat applet, H5, RN, etc.) run the code.

So here is Taro compilation tools is very important, here comes a picture.
Here Insert Picture Description

Taro development environment installation

1. The first step is to install @ tarojs / cli (scaffolding tools), but also to teach development tools.

You can use this yarn or globally npm install command as follows:

npm installation

npm install -g @tarojs/cli

yarn installation

yarn global add @tarojs/cli

After opening the command line, enter the top command.

2. After installation is complete, you can create a project with scaffolding, the command is as follows:
taro init taro-dome

There is a small pit that if you use npm install scaffolding when there is a great chance to fail, these failures mostly because the domestic network environment restrictions. There are two solutions, the first is linked to science and the Internet to install, and the second is to use the yarn to turn dark, I am here to use the yarn.

Hello World program

By creating a project on top of our project has been created, then the project is to run the following command:

cd taro-dome
npm run dev:h5

Here h5 running mode, if you want to run the applet understood according to the respective operating mode of package.json script provided.
Here Insert Picture Description
After running the page will appear in the browser Hello World, the default port 10086, as shown:
Here Insert Picture Description
This section mainly on the preparation of the development environment and install Taro Hello World program, continue to the next section

Published 34 original articles · won praise 5 · views 50000 +

Guess you like

Origin blog.csdn.net/jason_renyu/article/details/104250544