项目初始化

01. 创建项目与项目初始化

创建项目

在微信开发者工具的开始界面左侧检查项目类型，需要为 [小程序]

然后在右侧点击 [+] 开始新建项目

最后在弹出的界面中输入项目相关的信息，点击确定即可

📌 注意：
在新建项目的时候，[填写的 AppId 需要是自己的 AppId]
不能填写老师的 AppId，因为同学们不是当前小程序的开发成员

项目初始化

重置 app.js 中的代码
删除 app.json 中 pages 下的 "pages/logs/logs" 路径，同时删除 pages/logs 文件夹
删除 app.json 中 pages 下的 "rendererOptions" 以及 "componentFramework" 字段
重置 app.wxss 中的代码
删除 components 中的自定义组件
重置 pages/index 文件夹下的 index.js 、index.wxss、 index.html 以及 index.json 文件
更新 utils 下 util.js 的文件名为 formatTime.js

02. 自定义构建 npm + 集成Sass

随着项目的功能越来越多、项目越来越复杂，文件目录也变的很繁琐，为了方便进行项目的开发，开发人员通常会对目录结构进行调整优化，在慕尚花坊项目中，我们就需要将小程序源码放到 miniprogram 目录下。

自定义构建

首先在 project.config.json 配置 miniprogramRoot 选项，指定小程序源码的目录

然后配置 project.config.json 的 setting.packNpmManually 为 true，开启自定义 node_modules 和 miniprogram_npm 位置的构建 npm 方式

最后配置 project.config.json 的 setting.packNpmRelationList 项，指定 packageJsonPath 和 miniprogramNpmDistDir 的位置
- packageJsonPath 表示 node_modules 源对应的 package.json
- miniprogramNpmDistDir 表示 node_modules 的构建结果目标位置

安装 vant ，然后进行 npm 构建，测试是否能够正常 vant 构建成功
```
npm i @vant/weapp
```

📌 注意：
配置后如果没有生效，需要 [ 重启微信开发者工具 ] ❗ ❗

集成 Sass

在 project.config.json 文件中，修改 setting 下的 useCompilerPlugins 字段为 ["sass"]，即可开启工具内置的 sass 编译插件。

03. 集成项目页面文件

思路分析：

打开 [慕尚花坊项目素材] 中的 [模板文件] 文件夹

复制该文件中全部的文件和文件夹，在项目的 miniprogram 目录下进行粘贴

代码分析：

app.json 中配置了 pages、window、tabBar
app.json 中对项目中会使用到的 Vant 组件进行了全部的注册
app.wxss 文件中导入了阿里巴巴使用图标库
components 文件夹中定义了两个公共的组件
pages 目录下存放了项目中所有页面的文件，后续我们会进行分包的处理

04. VsCode 开发小程序项目

知识点：

在进行项目开发的时候，部分同学可能不习惯微信开发者工具进行开发，而是习惯使用 VSCode 等编辑器

但是 VsCode 对小程序开发支持的不是非常友好，如果想通过 VSCode 开发小程序项目，需要安装以下插件：

WXML - Language Service
prettier
微信小程序开发工具
微信小程序助手-Y
小程序开发助手(可选)
其他......

💡 Tip：
使用 VsCode 开发小程序项目时，如果需要预览、调试小程序，依然需要借助微信开发者工具

安装插件：

配置详细插件：

在【项目的根目录】下创建 .vscode 文件夹，注意：文件夹名字前面带 . 点❗
在 .vscode 文件夹下，创建 settings.json，用来对安装的插件属性进行设置，具体属性设置从下面复制即可
- **注意：`.vscode` 文件夹下的 `settings.json` 文件只对当前一个项目生效**

在【项目的根目录】下创建 .prettierrc 文件，进行 Prettier 代码规则的配置，规则从下面复制即可
为了让 Prettier 配置项在微信开发者工具生效，需要在微信开发者工具中也安装 Prettier 扩展插件。

➡️ .vscode/settings.json

{
  // 保存文件时是否自动格式化
  "editor.formatOnSave": true,

  // ---------------- 以下是 [ prettier ] 插件配置 ----------------

  // 指定 javascript、wxss、scss、less、json、jsonc 等类型文件使用 prettier 进行格式化
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "[wxss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // Prettier 的一个配置项，用于指定哪些文件类型需要使用 Prettier 进行格式化
  "prettier.documentSelectors": ["**/*.wxml", "**/*.wxss", "**/*.wxs"],

  // ---------------- 以下是 [ WXML - Language Service ] 插件配置 ----------------

  // wxml 文件使用 prettier 进行格式化
  "[wxml]": {
    // "qiu8310.minapp-vscode" 是 WXML - Language Service 插件提供的配置项
    // 此插件主要是针对小程序的 wxml 模板语言，可以自动补全所有的组件、组件属性、组件属性值等等

    // 如果是 VsCode 需要开启这个配置
    "editor.defaultFormatter": "qiu8310.minapp-vscode"

    // 如果是微信小程序，需要开启这个配置，通过 esbenp.prettier-vscode 对代码进行格式化
    // "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // 创建组件时使用的 css 后缀
  "minapp-vscode.cssExtname": "scss", // 默认 wxss，支持 styl sass scss less css

  // 指定 WXML 格式化工具
  "minapp-vscode.wxmlFormatter": "prettier",
  // 配置 prettier 代码规范
  "minapp-vscode.prettier": {
    "useTabs": false,
    "tabWidth": 2,
    "printWidth": 80
  },

  // ---------------- 以下是 [ 微信小程序助手-Y ] 插件配置 ----------------

  // 新增、删除小程序页面时，是否自动同步 app.json pages 路径配置，默认为 false
  "wechat-miniapp.sync.delete": true,
  // 设置小程序页面 wxss 样式文件的扩展名
  "wechat-miniapp.ext.style": "scss",

  // ---------------- 其他配置项 ----------------

  // 配置语言的文件关联，运行 .json 文件时写注释
  // 但在 app.json 和 page.json 中无法使用
  "files.associations": {
    "*.json": "jsonc"
  }
}

➡️ .prettierrc

{
  "semi": false,
  "singleQuote": true,
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 180,
  "trailingComma": "none",
  "overrides": [
    {
      "files": "*.wxml",
      "options": { "parser": "html" }
    },
    {
      "files": "*.wxss",
      "options": { "parser": "css" }
    },
    {
      "files": "*.wxs",
      "options": { "parser": "babel" }
    }
  ]
}

配置项	配置项含义
"semi": false	不要有分号
"singleQuote": true	使用单引号
"useTabs": false	缩进不使用 tab,使用空格
"tabWidth": 2	tab缩进为4个空格字符
"printWidth": 80	一行的字符数，如果超过会进行换行，默认为80
"trailingComma": "none"	尾随逗号问题，设置为none 不显示逗号
"overrides": []	overrides 解析器：默认情况下，Prettier 会根据文件文件拓展名推断要使用的解析器

📌：注意事项：
项目根目录 .vscode 文件夹中 settings.json 文件只对当前项目生效❗
如果想配置项生效，还需要注意：
在 VsCode 中只能打开当前一个小程序项目，不能同时打开多个小程序项目❗ 且项目目录请勿嵌套打开 ❗