前言

taro学习系列一，环境搭建、项目初始化以及项目目录解读

今天是学习taro的第一天，具体任务安排是环境搭建、初始化项目以及搭建一个基于taro的hello world微信小程序

taro学习系列一，环境搭建、项目初始化以及项目目录解读

https://developers.weixin.qq.com/community/develop/article/doc/0000ea6afd0b101b3e7a5c75f5b813

安装taro官方文档如下：

1

2

本地安装：

第一步

第一步：检查node版本

node版本检查，如下图所示，当前mac node版本为12.15.0，所以满足taro开发的node最低版本要求

3

第二步

第二步：安装taro，执行的脚本为

cnpm install -g [@tarojs](/user/tarojs)/cli

4

第一次执行失败

5

第二次安装尝试

执行的脚本为

sudo cnpm install -g [@tarojs](/user/tarojs)/cli

6

输入密码后，开始正常安装taro

安装成功

第三步

第三步：taro安装成功后，查看其版本

taro当前版本号为2.2.6

完美~

项目初始化

项目初始化

2

第一次执行项目初始化，由于权限问题，执行失败

taro init myApp

3

重新执行

sudo taro init myApp

2

初始化完成

2

项目目录结构

3

4

为方便查看每次代码改动，我把该项目在码云上专门维护了一个仓库。

5

编译完成，新生成的文件如下：

通过该截图可以看到taro编译会将taro代码生成微信小程序原生代码，代码存放于根目录的dist里面

编译后生成的文件在dist目录下，该目录结构如下所示，这就很熟悉了

1、app.js

2、app.json

3、app.wxss

4、project.config.json

5

上述json文件格式化后，如下图所示，已经是原生小程序app.json代码了。

6

微信开发者工具中打开

7

一个基于Taro的hello world小程序已搭建完成。

环境及依赖检测

完美~

推荐官方新出的一个初学者课程

https://5ed4d0957668344d67c1df67–taro-docs.netlify.app/taro/docs/next/guide/

8