使用 taro 3.5.3 框架,完全使用 hooks 语法 + ts 语言进行编写,结合 windicss 做页面布局,目前只完成了自定义 tabbar 和 navbar,当然还是有不少需要完善的地方,后期项目开展过程中,讲将新的公共组件和函数等加入进来,持续维护这个模板,作为后面开发的基石。
app.config.ts 里有自动读取 pages 的方法,会自动配置路由,不需要写一个页面配置一个页面
- 绝大部分页面都使用了 components/layout 作为布局页面
- 修改导航图标样式,都在 layout 里面修改
- layout 里写好了底部按钮,需要的话直接进行配置
// 安装依赖
yarn / npm i
// 运行
yarn dev
- 作为新项目的话,第一步应该去 tailwind.config.js 文件修改全局公共样式
- 作为一个 ts 项目,前期可以使用 any,中后期应逐步将 any 替换
- 部分公共方法和参数应使用 jsdoc 进行标记,方便调用的时候查看
- 相关业务文件应放在一个文件夹
- 尽量(非必须)使用 windi,避免自己写 css
- 尽量抽离公共组件,方便下次使用
- 公共组件分为通用组件(src/components)、个性化组件(pages/components)
- 官方核心依赖(react,taro)
- 官方组件库(componets,taro-ui)
- 自定义全局组件(Btn,Navbar)
- 自定义全局方法(utils,api 方法)
- 第三方方法库(big-js)
- 自定义页面模板(Layout)
- 本目录组件
- 变量名应使用英文名词单数形式
- 无歧义且常用的单词可省略至 3~5 位(category -> cate)
- 一般变量和函数使用小驼峰命名法
- 接口函数等公共方法使用大驼峰命名法
- 是否为某值以 is 开头,是否含有某值以 has 开头
- type 以大写 T 开头、interface 以大写 I 开头 + 大驼峰命名
- 常量使用全大写
这些都由 eslint + prettier 配合编辑器自动格式化
- 结尾去掉分号
- 使用单引号
- 括号内前后留一个空格
- 使用 2 个 tab 作为缩进
- (建议)中英文或符号间有个半角空格
- 大多数位置都需要 3 种状态【未登录,已登录有数据,无数据】
- 与用户数据相关的页面做强制登陆操作,不需要强制登陆则做请登陆提示
- 动态全局数据都放在 store 里,并暴露出刷新方法【userInfo, refreshUserInfo】
- 静态全局信息放在 storage 里,并在
utils/local.ts
里写好存取方法,方便调用
推荐使用 vscode 来进行开发,为了配合代码格式,建议安装以下插件:
- ESLint
- EditorConfig
- Prettier
- koroFileHeader
- Document This
- Color Highlight
编辑设置
"editor.quickSuggestions": {
"strings": true
},
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"eslint.validate": ["javascript", "javascriptreact", "html", "vue", "typescript"],
"eslint.codeAction.showDocumentation": {
"enable": true
},
"[typescriptreact, javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.jsxSingleQuote": true,
"prettier.bracketSameLine": true,
"prettier.printWidth": 150,
"prettier.semi": false,
"prettier.singleQuote": true,
"prettier.trailingComma": "all",
"fileheader.customMade": {
"Author": "[Your name]",
"LastEditTime": "Do not edit",
"Description": "头部注释配置模板"
},
"docthis.dateTagFormat": "yyyy/mm/dd",
"docthis.includeDescriptionTag": true,
src
├─app.config.ts
├─app.scss
├─app.tsx
├─index.html
├─utils // 公共方法
├─typings // 公共请求方法的type
| ├─methods.ts
| └request.ts
├─store // 全局状态管理文件
| ├─user // 个人用户的状态
| ├─system // 全局设备信息等
├─pages // 所有页面放在pages里
| ├─login
| | ├─components //页面内组件
| ├─index
| ├─components // 专用组件,根据不同项目调整
| | ├─layout
| | ├─formItem
| | ├─blockTitle
| ├─article
├─model // 将不同数据的interface放在这里
├─hooks // 自定hooks
├─config // 项目全局配置
├─components // 公共组件,大多数项目都可通用
| ├─tarbar
| ├─nextPage
| ├─navbar
| ├─empty
| ├─btn
├─assets
| ├─temp // 开发时临时文件
| ├─tabbar // tabbar 使用的图片
| ├─no // empty组件使用的图片
| ├─iconfont // 字体图标
| ├─home // 首页使用的图片
├─api // api接口文件