This is the first day of my participation in Gwen Challenge

First, environmental preparation

  • Nodejs V14.17.0
  • Npm image sourceTaobao mirror:registry.npm.taobao.org/
  • IDE VsCode V1.56.2
  • Wechat developer tools

Two, install @taro/ CLI

npm install -g @tarojs/cli
Copy the code

After the installation is complete, run the taro -v command to check whether the installation is successful and the version is correct

Initialize the project using taroCLI

Run the following command in the directory where the project is to be stored:

taro init yourAppName
Copy the code

After the command is executed, enter or select the configuration of the project as prompted, including:

  • Project descriptiontaro demo
  • Choose the frameworkreact
  • Whether to start Typerscriptn
  • CSS preprocessor typeSaas
  • The template sourceGitee

Tarocli generates project directories and files based on the above selection, and installs project dependencies.

Iv. Start the project

Demonstrate the compilation and startup of wechat applets

4.1 Running compilation Commands

NPM run dev: appellate // NPM run build: appellate //Copy the code

After the command is executed, the generated file is located in the dist directory

4.2 Use wechat developer tools to import dist Directory

  1. Click Import, and select the Dist directory

  1. Select use “Test Number AppID”

  1. Click “New”, wait for the completion of wechat development tool compilation, you can see the page

5. Code modification experience

The initial project has a simple structure, containing only one page, with the code in the SRC \ Pages \index directory, which has three files

  • index.config.js Page Configuration items
  • index.jsx The core, which contains the view and logic of the page, is developed using the React syntax
  • index.scss Page style

JSX: Hello world: Hello Taro World

After modification, Taro will recompile and generate the wechat applet file. The wechat development tool will reload the file and refresh the page: