Taro生成小程序代码并预览
Taro可以生成多端代码，在上一节只生成了h5的显示，这次我们就先来进行生成小程序代码，并进行预览。
生成微信小程序的代码
npm run dev:weapp
输入完命令后，taro编译器自动为我们生成小程序代码到dist目录中。
这里边的app.js、app.json以及app.wxss 这都是微信小程序所对应的文件，有过微信小程序开发的肯定觉得很熟悉，这就是Taro的强大之处，也是Taro框架的开发者肯定是个webpack开发的大牛，编译生成对应的终端的代码，而不是一个壳子嵌套。
在微信开发者工具中预览项目
开发小程序的肯定知道微信开发者工具，如果你是初学的这里给你一个下载的链接，方便下载学习：
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
下载后安装步骤很简单，跟安装QQ几乎一样。
安装完成后，你需要注册一个账号，这个自己按照提示注册就可以了。
注册后导入一个小程序项目
需要注意的是这不是新建，而是导入一个项目。目录选择的是你的taro项目刚才编译后生成的dist目录
AppId如果有在公众平台注册可以填，没有默认是一个测试号直接导入即可。
导入后你就可以看到在微信开发者工具中显示Hello World！了。
注意坑点
千万不要在微信开发者工具中修改dist目录，因为这个文件是由taro编译而来的；
如果要修改在taro的原项目修改，然后通过编译将修改的内容编译到dist文件中
Taro的目录介绍
在目录介绍前肯定会有疑惑，Taro是多端统一框架，前边我们利用编译工具生成了h5和微信小程序的代码，那么其他的支付宝小程序、百度小程序等又是如何生成？
这些的答案都在项目的package.json文件中的scripts部分当中：
"scripts": {
"build:weapp": "taro build --type weapp",
"build:swan": "taro build --type swan",
"build:alipay": "taro build --type alipay",
"build:tt": "taro build --type tt",
"build:h5": "taro build --type h5",
"build:rn": "taro build --type rn",
"build:qq": "taro build --type qq",
"build:quickapp": "taro build --type quickapp",
"dev:weapp": "npm run build:weapp -- --watch",
"dev:swan": "npm run build:swan -- --watch",
"dev:alipay": "npm run build:alipay -- --watch",
"dev:tt": "npm run build:tt -- --watch",
"dev:h5": "npm run build:h5 -- --watch",
"dev:rn": "npm run build:rn -- --watch",
"dev:qq": "npm run build:qq -- --watch",
"dev:quickapp": "npm run build:quickapp -- --watch"
},
我们就以dev为例解释下dev: 后边的都是哪一个平台的
- weapp 微信小程序
- h5 手机web用于公众号和浏览器等
- swan 百度小程序
- alipay 支付宝小程序
- tt 字节跳动小程序
- qq QQ小程序
- jd 京东小程序
- quickapp 快应用
- rn React Native
这些类型执行都和微信小程序的一样，都是将: 后的改成相对应的模式即可
npm run dev:weapp
或
yarn dev:weapp
下边就介绍下Taro的项目目录结构
dist目录
这个目录在上边生成微信小程序代码时已经见到了，是我们在预览时自动生成的，每次进行预览都会根据我们预览的终端不同，编译成不同代码。
每次编译时都会删除以前的代码，这个小伙伴么要注意一下。
config目录
这个就是项目的一些配置，这些配置以后会不断深入学习，但是现在还不了解，可以先不进行配置。否则会影响项目的运行。
node_modules
项目所需的依赖包，就是使用npm install进行安装的包，一般不需要修改。
src目录
这个是最重要的，这个是我们的源码目录，开发的所有代码都在这个里边。
下边给一个官方的目录结构说明
├── dist 编译结果目录
├── config 配置目录
| ├── dev.js 开发时配置
| ├── index.js 默认配置
| └── prod.js 打包时配置
├── src 源码目录
| ├── pages 页面文件目录
| | ├── index index 页面目录
| | | ├── index.js index 页面逻辑
| | | └── index.css index 页面样式
| ├── app.css 项目总通用样式
| └── app.js 项目入口文件
└── package.json
这一节就到这里，这一节和上一节都是Taro基础的内容，下一节将开始对Taro中使用React Hooks技术以及组件的编写和传值等的讲解。
