Taro 2.x 项目模版
说明:master 分支同步taro最新稳定版本更新,且会持续添加新功能,测试通过后会合并至release分支,当前版本基于taro 2.2.3;
基于 taro 1.x 的项目模板请前往 release-1.0.0 分支获取,点此前往
导航
功能列表
基础功能支持
TypeScript
Sass,全局注入公用样式文件
UI库(taro-ui)
状态管理(mobx)
异步编程(async/await)
引入字体(iconfont)
接口请求
request类
拦截器
url拦截器
header拦截器
param拦截器
data拦截器
开发环境本地代理(h5端)
jsonp支持(h5端)
调试
vconsole(h5端)
工程化
全局变量
插件
环境变量检查
扫描components文件夹生成入口文件
扫描pages文件夹生成路由列表及app.tsx文件
根据不同的环境变量生成不同的project.config.json(小程序端)
通过plop插件一键生成模版文件(页面、组件、样式、服务类、mobx状态管理)
底层组件,用于页面和组件继承,实现类似vue原型绑定的功能
git hooks
eslint
stylelint
prettier
commit lint
引入自建组件库(taro-cui,适配taro2.0版本开发中)
引入自建工具类库(wtils)
组件
Card 卡片组件 提供圆角、阴影功能,可自定义类名、样式(圆角及内外边距)
Countdown 倒计时组件,可自定义结束时间、自定义倒计时长、是否展示天,自定义item样式
Divider 分割线,可自定义高度
Nodata 缺省组件 可自定义图片、文字、宽高
Paging 分页提示组件 将scrollerLoader, scrollerEndMessage合并成一个组件,减少判断
Modal 基础弹窗组件,可选择弹窗位置,包括中间弹窗、底部弹窗,抛出关闭回调
Tabs 标签页
TButton 按钮组件,可自定义类名、自定义宽高、背景色、圆角、positionType
TImage 图片组件 提供错误处理、loading过渡、查看大图等功能
TImageUploader 图片上传组件 基于image 提供上传图片、图片数量限制、删除图片、查看大图等功能
工具类
img.ts 图片处理类(如拼接url、预览等)
mp.ts 小程序独有api封装(如检查更新)
page.ts 页面工具类,实现获取页面路由、跳转等功能
toast.ts loading/toast api封装简化
validator.ts 表单验证
meta.ts meta相关功能
体验工程
骨架屏
项目结构
以下是项目结构的缩略图
开始
# 获取模版
git clone https://github.com/cathe-zhang/taro_template.git
# 进入项目文件夹
cd taro_template
# 安装依赖
yarn