├─ dist                            // 编辑结果目录
├─ config                          // taro编译配置目录
│  ├─ dev.js                       // 开发环境配置
│  ├─ index.js                     // 默认配置
│  └─ prod.js                      // 生产环境配置
├─ src                             // 源码目录
│  ├─ apis                         // 全局接口
│  ├─ assets                       // 需要打包的静态资源
│  │  └─ iconfont                  // 字体图标
│  │  └─ style                     // style/css
│  │  └─ img                       // 图片
│  ├─ components                   // 全局通用组件 
│  ├─ constants                    // 全局常量
│  ├─ pages                        // 页面文件目录
│  │  └─ tab                       // tab-bar页面模块，后面小程序分包会讲到
│  │  │  ├─ apis                   // tab-bar页面下的接口
│  │  │  ├─ home                   // home页面
│  │  │  │  ├─ index.config.ts     // 页面配置
│  │  │  │  ├─ index.less          // 页面样式
│  │  │  └─ └─ index.tsx           // 页面逻辑
│  │  ├─ user                      // 个人中心页面模块
│  │  │  ├─ apis                   // 个人中心下的接口
│  │  │  ├─ settings               // 个人信息设置页
│  │  │  └─ address                // 个人收获地址信息页
│  │  ├─ order                     // 订单页面模块
│  │  │  ├─ apis                   // 订单下的接口
│  │  │  ├─ list                   // 订单列表页
│  │  │  └─ detail                 // 订单详情页
│  ├─ types                        // ts类型文件
│  ├─ utils                        // 工具文件目录
│  │  ├─ cookie.ts                 // cookie模块  
│  │  ├─ https.ts                  // 网络请求模块
│  │  └─ index.ts                  // 基础模块
│  ├─ app.config.ts                // taro项目入口配置
│  ├─ app.less                     // 项目总样式
│  ├─ app.ts                       // 项目入口文件
│  ├─ index.html                   // 
├─ .editorconfig
├─ .env                            // 开发环境环境变量
├─ .env.pre                        // 预发环境环境变量
├─ .env.prod                       // 生产环境环境变量
├─ .env.test                       // 测试环境环境变量
├─ .eslintrc.js                    // esLint规则配置
├─ .gitignore                      // git忽略文件    
├─ babel.config.js                 // Babel配置
├─ tsconfig.json                   // ts配置文件
├─ global.d.ts
├─ iconfont.json                   // 图片处理配置文件
├─ package.json 
├─ project.config.json
├─ project.tt.json
└─ tsconfig.json

# 使用 npm 安装 CLI
$ npm/pnpm install -g @tarojs/cli

# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli

# OR 安装了 cnpm，使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli

pnpm info @tarojs/cli

$ taro init myApp

$ npx @tarojs/cli init myApp

# 进入项目根目录
$ cd myApp

# 使用 yarn 安装依赖
$ yarn

# OR 使用 npm 安装依赖
$ npm install

# OR 使用 pnpm 安装依赖
$ pnpm install

# OR 使用 cnpm 安装依赖
$ cnpm install

pnpm add prettier li
nt-staged -D

{
  "extends": ["taro/react"],
  "rules": {
    "react/jsx-uses-react": 2,
    "react/react-in-jsx-scope": "off",
    // allow async-await
    "generator-star-spacing": "off",
    // allow debugger during development
    "no-console": "off",
    "no-debugger": "off",
    // 强制在 function的左括号之前使用一致的空格
    "space-before-function-paren": 0,
    // 引号类型
    // 禁止出现未使用过的变量
    "no-unused-vars": 0,
    // 严格的检查缩进问题
    "indent": 0,
    //引入模块没有放入顶部
    "import/first": 0,
    //后面没有空位，There should be no space after this paren
    "space-in-parens": 0,
    //已定义但是没有使用，"scope" is defined but never used
    "vue/no-unused-vars": 0,
    "@typescript-eslint/no-non-null-assertion": "off", // 允许使用非空操作符
    /**
     * 最佳实践
     */
    "eqeqeq": 2, // 强制使用 === 和 !==
    "default-case": 1, // 要求 switch 语句中有 default 分支
    "no-else-return": 1, // 禁止 if 语句中 return 语句之后有 else 块
    "no-empty-function": 0, // 禁止出现空函数
    "no-multi-spaces": 1, // 禁止使用多个空格
    "radix": 1, // 强制在parseInt()使用基数参数
    "@typescript-eslint/no-unused-vars": ["error"], // 把该条提示信息转换成警告信息
    /**
     * 变量声明
     */
    "init-declarations": ["error", "always"], // 声明变量必须赋值
    // "array-bracket-spacing": ["error", "always"], // 数组方括号内必须空格
    "array-bracket-spacing": 0, // 数组方括号内必须空格
    // 双峰驼命名格式
    "camelcase": 2,
    // 数组和对象键值对最后一个逗号， never参数：不能带末尾的逗号, always参数：必须带末尾的逗号，
    // always-multiline：多行模式必须带逗号，单行模式不能带逗号
    "comma-dangle": [2, "never"],
    // 控制逗号前后的空格
    "comma-spacing": [2, { "before": false, "after": true }],
    "comma-style": [2, "last"], // 逗号风格，换行时在行首还是行尾
    "eol-last": 2, // 要求文件末尾存在空行
    // 对象冒号前禁止空格，冒号后必须空格
    "key-spacing": ["error", { "beforeColon": false, "afterColon": true }],
    // 关键字（if、else等）前后必须有空格
    "keyword-spacing": ["error", { "before": true, "after": true }],
    // 禁止出现多行空行
    "no-multiple-empty-lines": ["error", { "max": 1 }],
    "semi": ["error", "never"], // 禁止末尾分号
    "quotes": ["error", "single"], // 单引号
    "space-infix-ops": 2, // 操作符周围必须有空格
    "spaced-comment": ["error", "always"], // 注释后面必须跟随至少一个空白
    /**
     * ECMAScript6
     */
    "arrow-spacing": ["error", { "before": true, "after": true }], // 强制箭头函数的箭头前后使用空格
    "no-var": 2, // 禁止使用 var 声明变量
    "object-shorthand": 2, // 要求使用对象方法名和属性名简写
    "prefer-arrow-callback": 2, // 要求回调函数使用箭头函数
    "prefer-const": 2, // 使用 const 声明那些声明后不再被修改的变量
    "prefer-rest-params": 2, // 要求使用剩余参数而不是 arguments
    /**
     * vue
     */
    "vue/valid-v-model": 0
  },
  "settings": {
    // 让eslint自己检测react版本
    "react": {
      "version": "detect"
    }
  }
}

"eslint.validate": [
  "javascript",
  "javascriptreact",
  "html",
  "typescriptreact"
]

"lint": "eslint --ext .tsx,.ts,.js,.jsx src --fix",

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

// 具体配置可以参考 https://prettier.io/docs/en/options.html
module.exports = {
  printWidth: 100, // 一行的字符数，如果超过会进行换行
  tabWidth: 2, // 一个tab代表几个空格数，默认就是2
  useTabs: false, // 是否启用tab取代空格符缩进，.editorconfig设置空格缩进，所以设置为false
  semi: false, // 行尾是否使用分号，默认为true
  singleQuote: true, // 字符串是否使用单引号
  trailingComma: 'none', // 对象或数组末尾是否添加逗号 none| es5| all
  jsxSingleQuote: true, // 在jsx里是否使用单引号，你看着办
  bracketSpacing: true, // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  arrowParens: "avoid", // 箭头函数如果只有一个参数则省略括号
  // jsx 标签的反尖括号需要换行
  jsxBracketSameLine: true,
  quoteProps: 'as-needed',
  htmlWhitespaceSensitivity: 'ignore', // strict, ignore
  vueIndentScriptAndStyle: true,
  endOfLine: 'lf',
  rangeStart: 0,
  proseWrap: 'never',
};

"lint": "eslint --ext .tsx,.ts,.js,.jsx src --fix"

# https://github.com/typicode/husky
# https://typicode.github.io/husky/#/?id=articles
yarn add husky -D
# 初始化 husky
npx husky install

安装完成之后项目根目录下面会多出一个 .husky 文件，用来存放后续我们添加的 git hooks。

如果想让别人安装我们的项目依赖后，自动启用 git hooks，可以在 package.json 添加 prepare 命令：

prepare 是 npm 操作生命周期中的一环，在执行 install 的时候会按生命周期顺序执行相应钩子。

# 写入命令
# 添加 pre-commit 钩子。
npx husky add .husky/pre-commit "npx lint-staged"

  "lint-staged": {
    "*.{vue, js, ts, jsx, tsx}": "eslint --fix",
    "*.{css, less}": "stylelint --fix"
  },

pnpm add  @commitlint/cli @commitlint/config-conventional commitizen cz-customizable -D

# commitlint.config.js

module.exports = {
  // 继承的规则
  extends: ['@commitlint/config-conventional'],
  // 定义规则类型
  rules: {
    // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
    'type-enum': [
      2,
      'always',
      [
        'feat', // 新功能 feature
        'fix', // 修复 bug
        'docs', // 文档注释
        'style', // 代码格式(不影响代码运行的变动)
        'refactor', // 重构(既不增加新功能，也不是修复bug)
        'perf', // 性能优化
        'test', // 增加测试
        'chore', // 构建过程或辅助工具的变动
        'revert', // 回退
        'build', // 打包
      ],
    ],
    // subject 大小写不做校验
    'subject-case': [0],
  },
}

# 添加 commit-msg 钩子。

commit-msg 钩子用来规范提交代码时的提交信息

# 首次安装不起作用可以运行 npx husky install

module.exports = {
  // type 类型
  types: [
    { value: 'feat', name: '✨ 新增产品功能' },
    { value: 'fix', name: '🐛 修复 bug' },
    { value: 'docs', name: '📝 文档的变更' },
    {
      value: 'style',
      name: '💄 不改变代码功能的变动(如删除空格、格式化、去掉末尾分号等)'
    },
    {
      value: 'refactor',
      name: '♻ 重构代码。不包括 bug 修复、功能新增'
    },
    {
      value: 'perf',
      name: '⚡ 性能优化'
    },
    { value: 'test', name: '✅ 添加、修改测试用例' },
    {
      value: 'build',
      name: '👷‍ 构建流程、外部依赖变更，比如升级 npm 包、修改 webpack 配置'
    },
    { value: 'ci', name: '🔧 修改了 CI 配置、脚本', emoji: '🔧' },
    {
      value: 'chore',
      name: '对构建过程或辅助工具和库的更改,不影响源文件、测试用例的其他操作'
    },
    { value: 'revert', name: '⏪ 回滚 commit' }
  ],

  // scope 类型，针对 React 项目
  // scopes: [
  //   ['components'],
  //   ['deps', '项目依赖修改']
  //   // 如果选择 custom ,后面会让你再输入一个自定义的 scope , 也可以不设置此项， 把后面的 allowCustomScopes 设置为 true
  // ].map(([value, description]) => {
  //   return {
  //     value,
  //     name: `${value.padEnd(30)} (${description})`
  //   }
  // }),

  // allowTicketNumber: false,
  // isTicketNumberRequired: false,
  // ticketNumberPrefix: 'TICKET-',
  // ticketNumberRegExp: '\\d{1,5}',

  // 可以设置 scope 的类型跟 type 的类型匹配项，例如: 'fix'
  /*
    scopeOverrides: {
      fix: [
        { name: 'merge' },
        { name: 'style' },
        { name: 'e2eTest' },
        { name: 'unitTest' }
      ]
    },
   */
  // 覆写提示的信息
  messages: {
    type: '请确保你的提交遵循了原子提交规范！\n选择你要提交的类型:',
    scope: '\n 选择一个 scope (可选):',
    // 选择 scope: custom 时会出下面的提示
    customScope: '请输入自定义的 scope:',
    subject: '填写一个简短精炼的描述语句:\n',
    body:
      '添加一个更加详细的描述，可以附上新增功能的描述或 bug 链接、截图链接 (可选)。使用 "|" 换行:\n',
    breaking: '列举非兼容性重大的变更 (可选):\n',
    footer: '列举出所有变更的 ISSUES CLOSED  (可选)。 例如.: #31, #34:\n',
    confirmCommit: '确认提交?'
  },

  // 是否允许自定义填写 scope ，设置为 true ，会自动添加两个 scope 类型 [{ name: 'empty', value: false },{ name: 'custom', value: 'custom' }]
  allowCustomScopes: false,
  allowBreakingChanges: ['feat', 'fix'],
  // skip any questions you want
  // skipQuestions: [],

  // subject 限制长度
  subjectLimit: 100
  // breaklineChar: '|', // 支持 body 和 footer
  // footerPrefix : 'ISSUES CLOSED:'
  // askForBreakingChangeFirst : true,
}

"import/no-commonjs": "off"

// package.json
"scripts": {
    "build:weapp": "taro build --type weapp",
    "build:h5": "taro build --type h5",
    "dev:weapp": "npm run build:weapp -- --watch",
    "dev:h5": "npm run build:h5 -- --watch",
    "build-pre:weapp": "cross-env APP_ENV=pre taro build --type weapp",
    "build-pre:h5": "cross-env APP_ENV=pre taro build --type h5",
    "dev-pre:weapp": "cross-env APP_ENV=pre npm run build:weapp -- --watch",
    "dev-pre:h5": "cross-env APP_ENV=pre npm run build:h5 -- --watch",
    "build-test:weapp": "cross-env APP_ENV=test taro build --type weapp",
    "build-test:h5": "cross-env APP_ENV=test taro build --type h5",
    "dev-test:weapp": "cross-env APP_ENV=test npm run build:weapp -- --watch",
    "dev-test:h5": "cross-env APP_ENV=test npm run build:h5 -- --watch",
    "build-prod:weapp": "cross-env APP_ENV=prod taro build --type weapp",
    "build-prod:h5": "cross-env APP_ENV=prod taro build --type h5",
    "dev-prod:weapp": "cross-env APP_ENV=prod npm run build:weapp -- --watch",
    "dev-prod:h5": "cross-env APP_ENV=prod npm run build:h5 -- --watch"
}

// config/dev.js ｜ config/prod.js
process.env.APP_ENV = process.env.APP_ENV || 'dev'

require('dotenv-flow').config({
  // node_dev表示.env.{node_env}文件
  node_env: process.env.APP_ENV
})

module.exports = {
  env: {
    NODE_ENV: '"development"',
    APP_VERSION: `"${process.env.npm_package_version}"`,
    APP_ENV: `"${process.env.APP_ENV}"`,
    APP_API: `"${process.env.APP_API}"`
  }
}

pnpm add cross-env dotenv-flow -D

npm i taro-iconfont-cli -D

npx iconfont-init

{
  // 直接复制[iconfont](http://iconfont.cn/)官网提供的项目链接
  "symbol_url": "http://at.alicdn.com/t/font_1373348_kk9y3jk2omq.js",
  // 根据iconfont图标生成的组件存放的位置。每次生成组件之前，该文件夹都会被清空。
  "save_dir": "./src/assets/iconfont",
  // 如果您的项目使用Typescript编写，请设置为true。这个选项将决定生成的图标组件是`.tsx`还是`.js`后缀。
  "use_typescript": true,
  // 选择需要支持的平台，默认是`*`，意味着所有平台都需要支持（如果有）。如果你只想支持部分平台，也可以设置成数组：
  "platforms": ["weapp", "h5"],
  // 是否使用[尺寸单位rpx]还是普通的像素单位`px`。默认值为true，与Taro保持一致的缩放。您也可以设置为false，强制使用`px`
  "use_rpx": true,
  "trim_icon_prefix": "icon",
  "default_icon_size": 18,
  "design_width": 750
}

// package.json
"scripts": {
    "icon": "npx iconfont-taro"
}

//xx.tsx
import { resolve } from 'path'
;<IconFont name='user' size={40} color='#333' />

// src/constants/index.ts
export const CDN_IMG = 'https://www.baidu.com/img/'

// xx.tsx
import { Image } from '@tarojs/components'
import { CDN_IMG } from '@/constants'
;<Image src={`${CDN_IMG}PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png`} />

// config/index.js
const config = {
  ...
  // 设计稿尺寸
  designWidth: 750,
  // 设计稿尺寸换算规则
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2,
    350: 2 / 1
  },
  ...
}

// config/index.js
const config = {
  ...
  h5: {
    publicPath: '/',
    staticDirectory: 'static',
    postcss: {
      autoprefixer: {
        enable: true
      },
      pxtransform: {
        enable: true,
        config: {
          onePxTransform: false // H5配置 1px 不需要被转换
        }
      }
    }
  },
  ...
}

export default {
  // 主包
  pages: [
    "pages/tab/home/index",        // 首页
    "pages/tab/mine/index"         // 我的
  ],
  // 子包
  subpakages: [                    // 子包：user，个人中心
    {
      root: 'pages/user/',
      pages: [
        "address/index",           // 个人地址信息页
        "settings/index"           // 个人信息设置页
      ]
    },
    {
      root: 'pages/order/',        // 子包：order，订单中心
      pages: [
        "list/index",              // 订单列表
        "detail/index"             // 订单详情
      ]
    }
  ],
  window: {
    backgroundTextStyle: "light",
    navigationBarBackgroundColor: "#fff",
    navigationBarTitleText: "WeChat",
    navigationBarTextStyle: "black",
  },
};

// redux及工具包
pnpm add @reduxjs/toolkit react-redux
pnpm add @types/react-redux -D

pnpm add @types/redux-logger redux-logger -D //日志包
pnpm add redux-persist //数据缓存

//1.使用taro自带的
import  {useDidShow} from "@tarojs/taro";
useDidShow (() => {
   console.log('页面展示时的回调 ')
})
//2.使用react的hooks
import {useEffect} from 'react'
useEffect(() => {
   console.log('页面加载、更新、卸载的回调 ')
})

Taro.switchTab  //跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
Taro.reLaunch	//关闭所有页面，打开到应用内的某个页面
Taro.redirectTo	//关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
Taro.navigateTo //保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。 
Taro.navigateBack //关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
EventChannel	//触发一个事件

//1.在app.config.ts中配置页面路由
pages: [
   'pages/demo/demo'
 ],



 //2.在组件中实现跳转
Taro.navigateTo({
   url:"/pages/demo/demo",
   success(){
       console.log('跳转成功')
   }
})

Taro.navigateTo({
   url:"/pages/demo/demo?id=2&age=18",
   success(){
       console.log('跳转成功')
   }
})


//接受传过来的参数
const Param: any = getCurrentInstance()?.router?.params;
useDidShow(() => {
    console.log(Param)
})

useReachBottom		//上拉触底加载
usePullDownRefresh	//下拉刷新

usePullDownRefresh(() => {
   console.log('usePullDownRefresh')
})

Taro.showToast({
 title: '成功',
 icon: 'success',
})

npm i taro-ui@next

h5: {
 esnextModules: ['taro-ui']
}

import { AtButton } from 'taro-ui'
import 'taro-ui/dist/style/index.scss'
render () {
   return (
     <View className='index'>
        <AtButton type='primary'>按钮</AtButton>
     </View>
   )
 }

import "taro-ui/dist/style/components/icon.scss";

<View className="at-icon at-icon-chevron-right" />