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技术以及组件的编写和传值等的讲解。