团队开发准备与登录（一）

本页对应团队开发准备与登录，共 8 段视频，约 56 分钟。

学习目标

能够分别用 Vue 和小程序语法实现父传子、子传父组件通信，并说明 props/properties、自定义事件、triggerEvent、bind 等关键差异。
能够在微信公众平台后台完成项目成员添加与开发权限配置，并通过体验版二维码完成体验权限申请或开通。
能够使用 git clone -b template 拉取指定分支项目，完成远程地址调整或重新初始化后推送到个人仓库。
能够将项目导入微信开发者工具，正确配置 miniprogramRoot 与编译插件（如 sass/less），使项目正常编译运行。
能够为 VSCode 安装小程序开发相关插件，配置工作区格式化规则，并创建 jsconfig.json 获得 JS API 代码提示。
能够根据项目演示、在线体验和接口文档定位业务模块与接口，说明项目业务范围及后续开发入口。

知识点

为什么团队开发要先申请权限

团队做小程序，最终上线的是同一个账号，而不是每个人各自上线一个版本。因此不能继续用个人 AppID 各写各的，而要统一使用企业（团队）AppID。这里先要区分两件事：一是“账号归谁”，二是“谁能操作这个账号”。前者由管理员持有，后者通过权限分配解决。

怎么想：把权限理解成“门禁卡”。开发者需要能进开发工具、能上传代码；测试、产品、客户只需要能扫码看体验版，不需要改代码。所以权限至少分两种：开发者权限和体验者权限。

怎么做：由管理员登录微信公众平台，在“管理 → 成员管理”里添加成员。开发者要提供自己的微信号，管理员输入微信号、勾选开发权限，点击确定后由管理员扫码确认。确认完成后，成员名单里就能看到这个人，被添加的同学也就能使用当前账号的 AppID 了。

易错点：第一，微信号要提供准确，管理员是按微信号找人；第二，权限要按角色勾选，不要图省事全开；第三，添加完成后要等管理员扫码确认，没确认前名单里可能还看不到。

开发者权限：给程序员开通

为什么需要：开发者权限是给程序员用的。没有这个权限，你只能用自己的个人 AppID，代码无法在团队账号下预览、上传，也无法使用团队账号里已经开通的能力。

怎么想：转写稿里管理员演示时提到，添加成员时可以输入成员微信号，然后开放“开发权限”，运营、数据分析等权限按情况勾选。添加成功后，其他同学就能用到当前账号的 AppID，而不是像之前那样“每个同学只能用自己的 AppID”。

怎么做：

开发者把自己的微信号发给组长或管理员。
管理员进入小程序管理后台的“成员管理”，添加成员并勾选开发权限。
管理员扫码确认。
开发者在开发者工具里选择或填入团队 AppID，确认能正常预览。

易错点：有同学添加完权限后仍然预览不了，常见原因是开发者工具里还填着个人 AppID。转写稿在导入项目时也特别提醒：项目导入后要记得把 AppID 换成自己的/团队的，否则预览不了。权限是“账号层面的门禁”，AppID 是“项目层面的入口”，两者要同时对。

体验者权限：给测试、产品、客户开通

为什么需要：体验者权限一般提供给测试人员、产品经理，或者发版前想先看效果的客户。他们不参与开发，但需要提前体验流程。转写稿里说得很清楚：体验权限“并不难参与开发”，也就是说体验者只能看，不能改代码。

怎么想：体验版的核心是“先上传、再设为体验版、最后扫码”。不是代码写完别人就能看，必须经过上传和设置体验版这一步。

怎么做：

在开发者工具里点击“上传”，填写版本号，例如 0.0.9。版本号一般分大版本、中版本、修 bug 的小版本。
回到管理后台，在“版本管理”里找到刚上传的版本，把它选为体验版本，默认打开首页。
这时会生成体验版二维码。把二维码发给测试、产品、客户。
对方扫码后提出申请，管理员会收到通知；管理员在后台点击通过，对方才能看到。转写稿演示时提到“默认是看不到，我这边需要点击给你们开通”，通过之后重新扫码就能看到体验版。
也可以由管理员在后台直接输入体验者微信号主动添加，这是第二种方式；扫码申请更方便。

易错点：第一，没上传或没设为体验版就发二维码，别人扫不到内容；第二，以为扫码就能看，忽略了管理员审核；第三，体验者不能用开发者工具参与开发，也不能用开发权限，只能预览体验版。

两种权限别混用

怎么想：开发者权限面向“要写代码、要上传”的人；体验者权限面向“只看不写”的人。转写稿里明确说，体验者“用不了这里的 AppID 作为开发”，和开发者有小区别。开发者权限更多，体验者也能预览小程序，但预览的是体验版。

怎么做：团队里先列名单：谁写代码、谁做测试、谁需要给客户看。开发者走成员管理加开发权限；测试和客户走体验版二维码或后台添加体验者。

易错点：不要把客户加成开发者；也不要把开发同学只加体验权限，否则他无法正常上传和调试。权限给多了是风险，给少了会卡住开发，按角色最小化分配即可。

先看目标：为什么要调整开发环境

小程序原始的一套开发环境比较基础：业务代码、全局配置、编辑器配置都堆在根目录，项目规模变大后不易管理；原生 wxss 也不支持嵌套等写法；小程序开发者工具虽然能调试，但代码编辑体验不如 VS Code。因此本节围绕三件事做调整：优化目录结构、启用 less/sass、配置 VS Code。转写稿中演示时也强调：改完目录后项目会报错，必须同步改 project.config.json，重启或重新编译后才恢复正常。

1. 优化目录结构

为什么需要：练习阶段代码少，所有文件放根目录还能接受；进入项目后，页面、组件、工具、静态资源会越来越多，如果业务代码和非业务配置混在一起，后续维护和协作都会变乱。转写稿里把 miniprogram 类比为 Vue 项目中的 src，即主要放业务代码；根目录则放编辑器配置、.gitignore、格式化配置等非业务文件。

怎么想：先把“业务代码”和“工程配置”分开。业务代码独立到单独目录，非业务文件和目录留在根目录。目录名不是随便改的，因为它和 project.config.json 里的配置绑定。

怎么做：将涉及业务的代码独立到单独的目录当中，非业务的文件和目录直接放在根目录中。调整后小程序运行会报错，需要修改 project.config.json 中的配置项：

json

{
  "setting": {
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "miniprogramNpmDistDir": "业务代码所在目录",
        "packageJsonPath": "package.json的路径"
      }
    ]
  },
  "miniprogramRoot": "业务代码所在目录"
}

转写稿中的调试过程是：把业务代码放进 miniprogram 后，开发者工具报错；检查 project.config.json，把 miniprogramRoot 指向该目录，同时让 npm 输出目录也对应上；改完后重启工具，项目又能正常运行。若把目录名改成 src 之类，也必须同步修改 miniprogramRoot 和 miniprogramNpmDistDir，否则配置对不上。

易错点：只改文件夹名，不改 project.config.json；只改 miniprogramRoot，漏改 packNpmRelationList 里的输出目录；packageJsonPath 路径写错；改完不重启/不重新编译就误以为配置无效。

2. 启用 less/sass

为什么需要：原生微信 wxss 不支持 less/sass 的嵌套等语法，而用预处理器可以更好地管理样式，写起来更接近平时写 Vue 项目样式的习惯。转写稿明确说：希望写样式时能像 sass 一样用嵌套语法，因此要开启编译器插件。

怎么想：不是改文件后缀就自动生效，而是先在 project.config.json 的 setting 中启用编译器插件，再统一改后缀。笔记以 sass 为例；转写稿也提到，如果项目改用 less，同理配置并统一后缀为 .less。

怎么做：通过 project.config.json 启用对 less/sass 的支持：

json

{
  "setting": {
    "useCompilerPlugins": ["sass"]
  }
}

然后将 .wxss 文件后缀改换成 .scss 即可。转写稿演示了开启后可以在样式里写嵌套，例如页面选择器下嵌套 navigator 等写法。

易错点：只把 .wxss 改成 .scss，却没配 useCompilerPlugins，会编译失败；配置了 sass，却仍保留 .wxss 后缀；团队里后缀不统一，导致有人能编译、有人报错。项目里应统一约定：用 sass 就统一 .scss，用 less 就统一 .less。

3. 配置 VS Code

为什么需要：小程序开发者工具的代码编辑器功能相较 VS Code 有些不足，而 VS Code 插件更丰富，也方便使用 AI 辅助和已有配置。转写稿的建议是：编写小程序代码时使用 VS Code，调试小程序仍然用小程序开发者工具。

怎么想：把“写代码”和“预览调试”分开。VS Code 负责编辑、提示、格式化；开发者工具负责编译、预览、真机调试。这样既不放弃开发者工具的调试能力，又提升编码效率。

怎么做：安装用于小程序开发的一些插件：

WXML - Language Service：小程序代码语法高亮和提示。装好后鼠标悬停 WXML 标签能看到提示，并可跳转微信官方文档。
Prettier - Code Formatter：格式化代码。转写稿提醒，如果 Prettier 被禁用或没安装，保存格式化会不生效。
其它按需安装。

在项目工作区的 .vscode/settings.json 中配置，等价于在 VS Code 的“工作区”设置里调整；转写稿说项目模板里已提前放好该文件，直接粘贴即可：

json

{
  "minapp-vscode.wxmlFormatter": "prettier",
  "minapp-vscode.prettier": {
    "useTabs": false,
    "tabWidth": 2,
    "printWidth": 80,
    "singleQuote": false
  },
  "[wxml]": {
    "editor.defaultFormatter": "qiu8310.minapp-vscode"
  },
  "minapp-vscode.formatMaxLineCharacters": 80,
}

转写稿还补充了一个调试点：装完插件后，WXML 有提示，但 JS 文件里鼠标悬停可能只显示 any，生命周期也没有提示。此时需要手动创建 jsconfig.json 来补 JS 类型提示；这个文件以前可由插件自动生成，现在需要手动补。创建后再悬停 JS，能看到类型提醒，写生命周期时也有代码提示。

易错点：把配置写到全局设置而不是当前项目的工作区设置；Prettier 插件未安装或被禁用；只装 WXML 插件却忽略 JS 提示缺失；以为 VS Code 能替代开发者工具调试。实际仍是 VS Code 写代码、开发者工具做预览和调试。

先把目标说清楚：启动项目不是“打开文件”，而是把开发环境跑通

这一节的核心任务，是把已经完成的享+社区小程序静态页面拉到本地，导入微信开发者工具，换成自己的 AppID，配置好 VS Code，然后能正常预览、调试，为后续联调接口和补业务逻辑做准备。为什么需要先做这些？因为项目不是从零写页面，而是从代码仓库拉取静态结构继续开发；如果权限、目录、编辑器任一环节没配好，后面写业务会被环境问题反复卡住。怎么想？按“团队权限 → 拉代码 → 导入工具 → 配编辑器 → 看资料跑项目”的顺序走。易错点是：不要拿到代码就急着写业务，先确认项目能编译、能预览，再开始联调。

团队开发先配权限：成员管理和体验权限

为什么需要？团队最终要共用一个小程序账号和同一个 AppID，不可能每个人各用各的号上线。怎么想？开发者需要“开发权限”，测试、产品、客户只需要“体验权限”，两者不是一回事。怎么做？管理员登录微信公众平台，进入“管理 → 成员管理”，添加成员微信号，勾选开发权限，管理员扫码确认；成员加入后就能使用当前账号的 AppID。体验权限则是先上传版本，在“版本管理”里把某个版本选为体验版本，生成二维码；别人扫码申请，管理员通过后即可体验，也可以主动添加体验者微信号。易错点：体验者只能看体验版，不能参与开发，也不能像开发者一样完整使用 AppID；开发者权限才适合写代码和联调。

拉取代码：clone 指定 template 分支

为什么需要？企业项目通常不是从零创建，而是从远程仓库拉取已有结构。转写稿里的“get”要纠正为“git”。怎么想？普通 git clone 默认拉默认分支，这里要拉指定分支，所以用 -b 指定分支名。原笔记中的仓库地址位置如下，实际以课程页面提供的地址为准：

bash

# 课程提供的代码仓库地址（原笔记此处为空，按课程页面填写）

完整命令可以写成：

bash

git clone -b template <仓库地址>

下载后可以改分支名，例如把 template 改为 master：

bash

git branch -m template master

如果练习时要推送到自己的仓库，可以改远程地址：

bash

git remote set-url origin <自己的仓库地址>

也可以删除默认 .git 后重新初始化：

bash

git init
git add .
git commit -m "初始化"
git remote add origin <自己的仓库地址>
git push -f origin master

易错点：-f 是强制推送，会覆盖远程历史，练习时用过，但实际工作不要随便加；另外没有权限时推不到原仓库，必须换成自己的仓库。

导入微信开发者工具：换 AppID、认目录

为什么需要？代码拉下来只是文件，必须导入开发者工具才能编译预览。怎么做？打开微信开发者工具，点“加号”导入项目，选择项目文件夹；AppID 要换成自己的，否则预览不了；后端服务选择“不使用云服务”。转写稿里说目录结构做了调整：业务代码放在 mini-program 下，它相当于以前 Vue 项目的 src，app.json、app.js、全局样式等都在里面。为什么不能随意改这个目录名？因为 project.config.json 里的小程序源码目录配置和它绑定。怎么做？如果真要改名，必须同步修改 miniprogramRoot 以及 npm 输出目录相关配置。易错点：只改文件夹不改配置，项目会跑不起来；工具偶尔报奇怪错误，刷新后消失，通常可先判断为工具自身问题。

配置 VS Code：高亮、JS 提示、保存格式化

为什么需要？微信开发者工具内置的 VS Code 版本较老，很多插件装不了；用 VS Code 写代码更顺手。怎么想？换编辑器就要补语法识别和类型提示。怎么做？先安装语法高亮插件和微信小程序相关插件，打开项目后鼠标悬停能看到组件说明和官方文档链接。若 JS 文件没有提示，要手动创建固定文件 jsconfig.json，补上类型提示；这样写生命周期时会有代码提示。格式化则用 Prettier，在项目 .vscode/settings.json 中配置工作区规则，例如缩进、单引号、保存自动格式化。易错点：Prettier 被禁用或没安装时格式化不生效；工作区配置只对当前项目生效，不要和全局设置混淆。

跑通项目再看资料：静态页面是“壳”，业务要自己补

这个项目是生活类小程序，涉及报修、访客门禁、房屋管理、报修管理等模块，会用到 Vant 组件库。在线版可以扫码体验，登录时手机号可复制，验证码统一用 123456。接口文档在在线笔记的“资料说明”里，包含接口和状态码。为什么需要先看资料？因为静态结构里的业务是假的，后续要按接口补逻辑。怎么做？先导入项目、改 AppID、确认能编译，再对照接口文档逐个模块联调。易错点：不要把在线体验版当成源码；静态页面能点不代表业务已完成，联调时要以接口文档和实际返回为准。

课件图示

课件第5页：多⼀句没有，少⼀句不⾏，用更短时间，教会更实用的技术！⾼级软件⼈才培训专家 l

课件第6页：多⼀句没有，少⼀句不⾏，用更短时间，教会更实用的技术！⾼级软件⼈才培训专家享

课件第7页：多⼀句没有，少⼀句不⾏，用更短时间，教会更实用的技术！⾼级软件⼈才培训专家享

课件第9页：多⼀句没有，少⼀句不⾏，用更短时间，教会更实用的技术！⾼级软件⼈才培训专家享

课件第10页：多⼀句没有，少⼀句不⾏，用更短时间，教会更实用的技术！⾼级软件⼈才培训专家享

课件第12页：多⼀句没有，少⼀句不⾏，用更短时间，教会更实用的技术！⾼级软件⼈才培训专家享

课件第13页：多⼀句没有，少⼀句不⾏，用更短时间，教会更实用的技术！⾼级软件⼈才培训专家享

课件第15页：多⼀句没有，少⼀句不⾏，用更短时间，教会更实用的技术！⾼级软件⼈才培训专家享

代码示例

示例 1：`project.config.json` —— 目录结构调整 + 启用 Sass + 手动构建 npm

json

{
  "description": "享+社区小程序",
  "miniprogramRoot": "miniprogram/",
  "setting": {
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "miniprogramNpmDistDir": "./miniprogram/",
        "packageJsonPath": "./package.json"
      }
    ],
    "useCompilerPlugins": ["sass"]
  }
}

关键行说明

miniprogramRoot：指定小程序业务代码（WXML/WXSS/JS/JSON）所在的目录。转写稿中讲师把业务代码统一收进 miniprogram/（相当于 Vue 项目的 src），非业务文件（.gitignore、.eslintrc、格式化配置等）留在根目录。
packNpmManually：开启手动构建 npm，配合下面 packNpmRelationList 使用。
packNpmRelationList[].miniprogramNpmDistDir：npm 包构建产物输出的位置，必须指向业务代码目录（转写稿：“我们的 npm 输出的位置也是 ./src”），否则 miniprogram_npm 会生成到错误的地方。
packNpmRelationList[].packageJsonPath：package.json 的路径，一般在项目根目录。
useCompilerPlugins: ["sass"]：开启 sass 预处理器，之后把 .wxss 后缀改成 .scss 即可使用嵌套等语法；若团队想用 less，就改成 ["less"] 并把后缀统一换成 .less。

易错点

改了业务目录名（比如改成 src/），miniprogramRoot 和 miniprogramNpmDistDir 两处都要同步改，只改一处开发者工具会直接报错、项目跑不起来（转写稿中讲师现场改坏再改回演示过）。
miniprogramRoot 的目录名不要随意起，它和配置文件是绑定关系。
改完配置后需要重启/重新编译开发者工具才能生效。

示例 2：`.vscode/settings.json` —— VS Code 工作区配置（WXML 格式化走 Prettier）

json

{
  "minapp-vscode.wxmlFormatter": "prettier",
  "minapp-vscode.prettier": {
    "useTabs": false,
    "tabWidth": 2,
    "printWidth": 80,
    "singleQuote": false
  },
  "[wxml]": {
    "editor.defaultFormatter": "qiu8310.minapp-vscode"
  },
  "minapp-vscode.formatMaxLineCharacters": 80
}

关键行说明

该文件放在项目根目录的 .vscode/settings.json，等价于 VS Code 的“工作区设置”（小齿轮 → 工作区），只对当前项目生效，不影响全局设置。
minapp-vscode.wxmlFormatter: "prettier"：让 WXML - Language Service 插件用 Prettier 来格式化 WXML。
minapp-vscode.prettier：格式化细节，2 空格缩进、不用 tab、单行超 80 字符换行、不使用单引号。
[wxml].editor.defaultFormatter：把 WXML 语言的默认格式化器指定为该插件，保存时才不会走错格式化器。
前置条件：VS Code 需安装 WXML - Language Service（qiu8310.minapp-vscode）和 Prettier - Code Formatter 两个插件；Prettier 若被禁用需重新启用，否则格式化不生效。

易错点

转写稿中特别补充：新版本插件不再自动生成 jsconfig.json，需要手动在根目录创建该文件（文件名固定），否则 App()、Page()、生命周期函数在 JS 文件里没有类型提示和补全。
VS Code 只负责写代码，预览和调试仍然要用微信开发者工具；VS Code 内置的编辑器版本较老，部分插件装不上。
插件未安装或 Prettier 被禁用时，配置写了也不会生效。

示例 3：拉取项目模板并推送到自己的仓库（Git 命令）

bash

# 1. 克隆指定分支（-b = branch，拉 template 分支而不是默认分支）
git clone -b template https://example.com/xxx/miniprogram-template.git

# 2. 进入项目目录
cd miniprogram-template

# 3. 把分支名改为 master（-M = modify）
git branch -M master

# 4. 清空原远程地址，换成自己的仓库（练习用；企业里拉完分支直接开发即可）
git remote remove origin
git remote add origin https://example.com/你的用户名/你的仓库.git

# 5. 推送到自己的远程仓库
git push -u origin master

如果选择“删掉 .git 重新初始化”的方式：

bash

rm -rf .git
git init
git add .
git commit -m "初始化"
git remote add origin https://example.com/你的用户名/你的仓库.git
git push -f origin master

关键行说明

git clone -b template：-b 是 branch 的缩写，用于克隆指定分支；不加 -b 则克隆默认分支。
git branch -M master：-M 是 modify 的意思，把当前分支重命名为主分支。
git remote remove origin + git remote add origin：原来的远程地址没有提交权限，必须换成自己的仓库地址才能 push。
拉取完成后，用微信开发者工具「导入项目」选择该文件夹，记得把 AppID 换成自己的（或团队分配的企业 AppID），后端服务选“不使用云服务”。

易错点

git push -f 是强制推送，会覆盖远程已有提交；企业里一般会关闭强制推送，练习时也尽量别加 -f。
不删除/不修改原远程地址，push 会因无权限而失败。
团队开发时用的是同一个企业 AppID：开发者需提供微信号由管理员在「成员管理」中添加并勾选开发权限，体验者则扫码申请、管理员审核通过；体验者只能用体验版，不能参与开发。

常见错误

导入项目后编译报错，提示找不到 app.json，或页面全部空白
- 原因：只移动了目录，没有同步修改 project.config.json 中的路径配置；如果使用 npm，packNpmRelationList 里的 miniprogramNpmDistDir 和 packageJsonPath 也还指向旧位置。
- 修法：把 miniprogramRoot 改成业务代码所在目录；npm 的两项一并改，然后重启开发者工具。只改其中一处，仍然会报错。
.wxss 改成 .scss 后样式全部失效，或编译直接报错
- 原因：setting.useCompilerPlugins 没配置，或配置成 less 却写 .scss；也可能同一个页面两种后缀混用。
- 修法：确认 useCompilerPlugins: ["sass"]，把后缀统一改完；改完要重启工具；以后切换预处理器时，后缀和插件配置必须成对修改。
在 VSCode 里写 wxml 没有高亮，写 js 时鼠标悬停只显示 any，没有生命周期提示
- 原因：缺少 WXML 语法插件；并且旧版本会自动生成的 jsconfig.json 现在不再自动生成，导致 JS 类型提示丢失。
- 修法：安装 WXML - Language Service 和微信开发者工具插件；在项目根目录手动创建 jsconfig.json，重新加载窗口后验证悬停提示。
保存后没有自动格式化，或 wxml 被格式化成很乱的样子
- 原因：没有把 [wxml] 的 editor.defaultFormatter 指定为小程序插件；Prettier 被禁用或没有安装；配置写进了用户设置，而没有写进工作区设置。
- 修法：把配置放进项目里的 .vscode/settings.json（工作区级）；检查 Prettier 是否已启用；改完保存一个文件，验证是否按 2 空格缩进。
代码拉下来后 git push 被拒绝，或推上去覆盖了别人的提交
- 原因：remote 仍指向模板仓库（没有权限）；或者直接用 -f 强制推送，覆盖了原有历史。
- 修法：git remote set-url 换成自己的仓库，或者删掉 .git 后重新 init、add、commit、push；练习阶段尽量不用 -f，企业仓库通常也禁用了强推。
扫码体验版打不开，或提示没有权限
- 原因：体验版二维码虽然能扫，但扫码后只是提交了申请，管理员没有点通过；或者对方只被加成了“体验者”，却想用 AppID 做开发。
- 修法：让管理员在后台的体验成员列表里点通过，或主动录入微信号；明确区分两种角色：开发者的权限能拉代码、改 AppID，体验者只能预览。

练习

目录结构改造：把业务代码整体移动到 src 目录，修改 project.config.json 中相关的三项配置，使项目能正常编译；再故意只改 miniprogramRoot，观察报错现象并记录下来，然后恢复。
预处理器切换：把任意一个页面的样式文件改成 .scss，用嵌套语法写一段样式，验证编译结果；然后改成 less，看需要同步改动哪两处配置，最后改回 sass。
VSCode 工作区配置：安装两个插件，手动创建 jsconfig.json，在 .vscode/settings.json 中配置 wxml 格式化和保存自动格式化；验证三件事：标签高亮、js 生命周期悬停提示、保存后自动格式化。
仓库迁移全流程：用 git clone -b template <地址> 拉取模板，清空默认历史后推送到自己的远程仓库；再模拟“新同学”，把你自己的仓库克隆下来，改成他自己的 AppID 后运行起来。
权限实战：两人一组，互相把微信号加为开发者；再把其中一人加为体验者，上传一个版本并设为体验版，让对方扫码申请、由你审批；最后对比两人在开发者工具里能做什么、不能做什么。

原视频对照

#	视频	时长
1	反馈-复习	09:24
2	团队开发准备-成员管理	05:56
3	团队开发准备-申请体验权限	05:50
4	项目准备-拉取项目代码	08:53
5	项目准备-项目目录结构	10:40
6	项目准备-VSCode配置	09:33
7	项目准备-补充JS代码提示	02:26
8	项目配套资料和项目演示mp4	03:25

小结

团队开发的第一步不是写代码，而是拿到企业 AppID 对应的权限；没有权限，后面所有配置都无法生效。
开发者与体验者是两种不同的角色，前者可以开发调试，后者只能预览，把两者混为一谈会浪费大量排查时间。
目录结构一改，project.config.json 就是唯一依据：miniprogramRoot 与 npm 相关路径必须同时对齐。
预处理器只是配置层面的开关，插件名、文件后缀、配置项三者必须一致，改一处漏一处必然报错。
VSCode 负责写代码，开发者工具负责预览和调试，两者的分工要尽早固定下来，不要来回切换。
老版本“自动生成”的东西（如 jsconfig.json）现在要手动补，遇到“以前能用现在不能用”的问题，先怀疑版本变化。
真实项目多数是从仓库拉下来的，因此 clone、改 remote、重新初始化这套动作是必备技能，而不是可选项。
所有配置类问题都有共同规律：改配置 → 重启 → 验证现象；跳过验证这一步，问题就会积累到联调阶段才暴露。

团队开发准备与登录（一） ​

学习目标 ​

知识点 ​

为什么团队开发要先申请权限 ​

开发者权限：给程序员开通 ​

体验者权限：给测试、产品、客户开通 ​

两种权限别混用 ​

先看目标：为什么要调整开发环境 ​

1. 优化目录结构 ​

2. 启用 less/sass ​

3. 配置 VS Code ​

先把目标说清楚：启动项目不是“打开文件”，而是把开发环境跑通 ​

团队开发先配权限：成员管理和体验权限 ​

拉取代码：clone 指定 template 分支 ​

导入微信开发者工具：换 AppID、认目录 ​

配置 VS Code：高亮、JS 提示、保存格式化 ​

跑通项目再看资料：静态页面是“壳”，业务要自己补 ​

课件图示 ​

代码示例 ​

示例 1：project.config.json —— 目录结构调整 + 启用 Sass + 手动构建 npm ​

示例 2：.vscode/settings.json —— VS Code 工作区配置（WXML 格式化走 Prettier） ​

示例 3：拉取项目模板并推送到自己的仓库（Git 命令） ​

常见错误 ​

练习 ​

原视频对照 ​

小结 ​

团队开发准备与登录（一）

学习目标

知识点

为什么团队开发要先申请权限

开发者权限：给程序员开通

体验者权限：给测试、产品、客户开通

两种权限别混用

先看目标：为什么要调整开发环境

1. 优化目录结构

2. 启用 less/sass

3. 配置 VS Code

先把目标说清楚：启动项目不是“打开文件”，而是把开发环境跑通

团队开发先配权限：成员管理和体验权限

拉取代码：clone 指定 template 分支

导入微信开发者工具：换 AppID、认目录

配置 VS Code：高亮、JS 提示、保存格式化

跑通项目再看资料：静态页面是“壳”，业务要自己补

课件图示

代码示例

示例 1：`project.config.json` —— 目录结构调整 + 启用 Sass + 手动构建 npm

示例 2：`.vscode/settings.json` —— VS Code 工作区配置（WXML 格式化走 Prettier）

示例 3：拉取项目模板并推送到自己的仓库（Git 命令）

常见错误

练习

原视频对照

小结