微信小程序基础与组件（一）

本页对应 微信小程序基础与组件，共 7 段视频，约 1 小时 16 分。

学习目标

1. 能独立完成微信小程序账号注册、开发者工具安装，并创建“不使用云服务+基础模板”的小程序项目。
2. 能识别并说明小程序页面四个组成文件的作用，使用 WXML 与 WXSS 完成基础页面结构和样式布局。
3. 能使用 Page()、data、双大括号数据绑定、bindtap 事件和 setData 实现页面数据展示与点击更新。
4. 能通过页面配置和全局配置修改导航栏标题、颜色等属性，并说明页面配置与全局配置的优先级。
5. 能使用 navigator 组件以相对路径和绝对路径完成页面跳转，并正确配置页面路由。
6. 能配置下拉刷新、自定义导航栏、禁止滚动等小程序特有属性，并通过开发者工具或官方文档检索所需配置项。

知识点

开发之前，为什么先要有一个小程序账号

小程序和普通网页不一样：网页写完丢到服务器上就能访问，而小程序的代码必须挂在一个“账号”下面，由微信平台托管、审核、发布。所以正式开发前的第一件事，不是打开编辑器写代码，而是先注册一个小程序账号。

怎么想：把这个账号理解成项目的“身份证 + 容器”。后面开发者工具要扫码登录、创建项目要填 AppID、上线要提交审核，全都依赖它。没有账号，工具里连一个合法项目都建不出来。

怎么做：打开微信公众平台，找到“注册”入口，注册类型选择“小程序”。

易错点：有同学以为“我有微信就能开发”，其实个人微信只是登录凭证，不等于小程序账号；账号必须单独注册。

注册入口：别点错账号类型

微信公众平台同一个入口下，除了小程序，还有大家熟悉的订阅号、服务号。它们共用一套注册体系，但注册出来的东西完全不同。

为什么需要：选错类型，后面拿到的后台、能力、AppID 都对不上，等于白注册。

怎么做：进入注册页面后，先选“小程序”，再点“注册”，才会进入小程序的表单流程。

易错点：转写稿里特别提醒，很多同学卡在邮箱这一步，原因往往不是邮箱坏了，而是这个邮箱以前注册过订阅号或服务号——它在本平台已经“被用过了”。

邮箱：一个邮箱只能注册一个账号

为什么需要：平台用邮箱作为账号的唯一标识，所以一个邮箱只能对应一个账号，且要求这个邮箱没有申请过订阅号、服务号等公众号。

怎么做：准备一个干净的邮箱，填写基本账号信息，提交后去邮箱里点激活链接完成激活。

易错点：如果提示邮箱不可用，不要反复试，直接换一个邮箱就行，这是最快也最省事的处理方式。另外激活邮件别忘了点，没激活后面的信息登记走不下去。

主体信息：学习阶段统一选“个人”

为什么需要：主体类型决定你要提交什么材料，也决定后续能不能顺利通过验证。

怎么想：转写稿里说得很清楚——如果选企业或其他主体，就要提交相应资质，企业还要每年交 300 元认证费。学习阶段完全没必要。

怎么做：信息登记这一步，统一选择“个人”，按官方要求填写个人真实信息。转写稿强调，这些信息微信那边是会做验证的，所以不要随便编。

易错点：一是选成企业却拿不出营业执照；二是填假信息导致验证不通过。如果家里确实有企业、想用企业主体，那也可以，但要准备好上传资料，并接受认证费用。

绑定管理员微信

为什么需要：管理员微信是后续登录后台、扫码登录开发者工具、扫码预览真机的“钥匙”。

怎么做：在信息登记流程中按提示扫码，把常用的那个微信绑定为管理员。

易错点：忘记绑定，或者绑了一个不常用的微信号，后面每次扫码登录都很麻烦。这一步笔记里专门写了“不要忘记绑定管理员微信”，说明它很容易被跳过。

补充小程序信息：logo、名称、简介与类目

为什么需要：这些是小程序对外展示的信息，也是上线时必须要有的。

怎么想：转写稿给了一个很实用的建议——不用一注册完就急着填。因为名称一年有修改次数限制，每次改名还会留下历史记录；而且很多同学此刻还不知道自己最终要做什么类型的小程序。等学完整个阶段、有想法要上线时再设，更稳妥。

怎么做：登录后台后按提示补充 logo、名称、简介，并选择小程序类目。笔记里明确写着：类目不要选择游戏。

易错点：名称随手起、类目随手选，后期修改受次数限制；类目选游戏则偏离了本阶段的学习方向。

找到 AppID：开发必须的唯一标识

为什么需要：AppID 是小程序在微信平台里的唯一标识，开发者工具创建项目时必须用到它。

怎么做：注册成功并登录后台后，进入“开发管理 → 开发设置”，就能看到这串唯一标识。转写稿也提到，因为开发者工具是扫码登录的，工具本身可以自动帮你获取到，不一定非要手抄。

易错点：把 AppID 复制错或复制成别的内容，创建项目时会报错。认准“开发设置”里的那一个即可。

到这里，账号、主体、管理员、AppID 都齐了，才算真正具备了进入下一步——下载开发者工具、创建第一个小程序项目的条件。

先理解这一节要解决什么

为什么需要： 微信小程序不是打开浏览器就能写的普通网页，它依赖微信开发者工具、小程序账号和 AppID 才能创建、调试、预览。环境没搭好，后面写 WXML、WXSS、JS 都会卡在“项目建不出来”或“真机看不到效果”上。
怎么想： 把这一节看成一条链路：下载安装工具 → 扫码登录 → 准备 AppID → 创建项目 → 真机预览。每一步都为下一步服务。
怎么做： 按笔记顺序完成四步，并在创建项目时特别确认“不使用云服务”和“基础模板”。
易错点： 不要跳过账号准备直接创建；不要把“模拟器能看”当成“真机没问题”。

下载并安装微信开发者工具

为什么需要： 开发者工具集成了代码编辑、模拟器、调试器、真机预览等能力，是后续开发的主入口。
怎么想： 先拿到稳定版安装包，再按系统引导安装；安装本身不复杂，关键是安装后能正常启动并扫码。
怎么做： 打开下载微信开发者工具，下载后双击安装程序，根据引导完成安装。
易错点： 电脑需要联网；如果安装后打不开，先检查是否安装完成、系统是否拦截，再重新启动程序。

扫码登录开发者工具

为什么需要： 工具要绑定你的微信账号，才能读取你名下的小程序账号、AppID，并支持预览到手机微信。
怎么想： 登录不是“随便登个微信”，而是用后续要预览、要管理小程序的微信扫码。
怎么做： 启动安装后的程序，使用微信扫码登录。转写稿中演示时也是扫码后选择对应账号登录。
易错点： 电脑必须联网；扫码后如果界面没有账号信息，先确认微信是否登录成功，再重新扫码。

创建前准备：AppID 从哪里来

为什么需要： 创建小程序要填 AppID，它是小程序账号的唯一标识。没有它，项目无法正确关联到你的小程序账号。
怎么想： AppID 不需要手写记忆。注册小程序账号后，在微信公众平台的“开发管理 → 开发设置”里能看到唯一标识；开发者工具扫码登录后也可以直接选择账号获取。
怎么做： 先注册小程序账号。转写稿提醒：注册时如果邮箱不能用，可能是该邮箱已在同一平台注册过订阅号或服务号，换一个邮箱即可；信息登记学习阶段统一选“个人”，企业等主体需要资质，企业还涉及每年 300 元认证费用。注册完成后回到工具创建项目。
易错点： 不要拿订阅号/服务号的邮箱硬注册；不要随意选企业主体；AppID 不要填错或填成别的账号。

创建小程序项目

为什么需要： 只有正确创建项目，工具才会生成页面目录和基础文件，后续代码才有地方写。
怎么想： 创建表单里每一项都影响目录结构。转写稿特别强调：“不使用云服务”和“基础模板”必须选对，否则目录结构会和课堂不一致。
怎么做： 在工具中点击加号新建小程序。先选择代码位置：选到目标目录后，在路径末尾追加一个文件夹名，工具会自动新建该文件夹，项目名称也会自动带出。填写 AppID；开发模式选择“小程序”；后端服务选择“不使用云服务”；模板选择“基础模板”。点击确定后等待初始化。
易错点： 如果误选云服务，会多出后端相关代码，目录结构不同；如果模板不是基础模板，先删掉重建，不要在错误模板上继续改。初始化完成后若界面没有授权，可点击头像授权账号信息。

真机预览查看效果

为什么需要： 模拟器只能近似展示，真机才能确认页面在手机微信里的实际效果。
怎么想： 预览是把当前代码推送到手机微信里打开，不是重新下载一个 App。
怎么做： 在开发者工具中点击“预览”，可以自动预览推送到当前登录的微信，也可以扫码查看。转写稿中演示了点击预览后把当前界面推送到手机微信。
易错点： 手机微信要和工具登录账号对应；首次预览可能需要授权；如果真机打不开，先检查项目是否创建成功、AppID 是否关联正确。

环境搭建检查清单

为什么需要： 环境问题越早发现越省时间。
怎么想： 按“工具能登录、项目能创建、模拟器能显示、真机能预览”四件事检查。
怎么做： 确认工具已安装并扫码登录；确认 AppID 来源正确；确认创建时选了“不使用云服务”和“基础模板”；确认点击预览后手机微信能看到页面。
易错点： 转写稿里反复强调的两个选项不要选错；不要用错账号扫码；不要跳过真机预览。

课件图示

代码示例

示例一：页面结构与样式（WXML + WXSS）

<!-- pages/index/index.wxml -->
<view class="box">
  <text>精选</text>
  <text>手机</text>
  <text class="active">食品</text>
  <text>生鲜</text>
  <text>母婴</text>
</view>

/* pages/index/index.wxss */
.box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 60rpx;
  background-color: pink;
  font-size: 28rpx;
}

.active {
  color: #07c160;
}

要点解释：

• 小程序里没有 div / span，块级容器用 view，行内文本用 text。写 div 不会报错，但它是小程序的“不支持标签”，view 上的属性你也用不了，所以别图省事直接套网页标签。
• view 是块级、text 是行内，所以默认情况下几个 text 会水平排在一行。
• 页面同级的 4 个文件（.wxml / .wxss / .js / .json）加载页面时会自动加载，样式不需要像网页那样手动 <link> 引入，写完保存即可生效。
• WXSS 的类选择器、后代选择器、属性写法与 CSS 完全一致，display: flex、justify-content、align-items 这些都可以照搬，学习成本主要在“组件名替换”上。
• 尺寸建议用 rpx（小程序专属适配单位），而不是网页里的 px。
• 易错点：类名用 class（和 HTML 一样），但别把样式写进 .js 或 .json 里；写错文件名（如 index.wxsss）样式会静默不生效。

示例二：页面逻辑与交互（JS + WXML）

// pages/index/index.js
Page({
  data: {
    msg: 'hello world'
  },

  changeMessage() {
    console.log('按钮被点击了')
    this.setData({
      msg: '乾坤未定'
    })
  }
})

<!-- pages/index/index.wxml -->
<view class="box">
  <text>{{msg}}</text>
</view>

<button type="primary" bindtap="changeMessage">点击修改</button>

要点解释：

• 注册页面必须调用 Page({})，P 是大写，很多同学写成 page 之后页面直接出不来；参数必须是对象，哪怕什么都不写也要传 {}。
• data 在小程序里是对象，不是 Vue 选项式 API 里的函数，所以直接写 msg: 'hello world'，不要写 return。
• 视图层用 {{ }} 插值绑定，这一点和 Vue 一致，改完 data 保存页面会自动更新。
• 事件绑定用 bindtap，小程序没有 click，写 click 是绑不上的；bindtap 表示手指触摸后离开。
• 事件处理函数与 data 同级书写，不需要 Vue 那样的 methods 包裹。
• 改数据必须走 this.setData({...})，它同时做两件事：更新 data 里的值 + 更新视图。直接 this.data.msg = 'xxx' 视图不会变。
• 调试：打开“调试器 → AppData”面板可以看到当前页面 data 里的所有值，开发阶段在这里改值也能实时反映到界面。
• 易错点：setData 传的也是对象格式；函数名要和 bindtap 里的字符串完全一致，大小写敏感。

示例三：页面配置、全局配置与 navigator 跳转（JSON + WXML）

// pages/index/index.json
{
  "navigationBarTitleText": "首页",
  "navigationBarBackgroundColor": "#07c160",
  "navigationBarTextStyle": "white",
  "enablePullDownRefresh": true,
  "backgroundColor": "#f5f5f5",
  "backgroundTextStyle": "dark"
}

// app.json
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTitleText": "黑马程序员",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black"
  },
  "style": "v2"
}

<!-- pages/index/index.wxml -->
<navigator url="/pages/logs/logs">跳转到日志页</navigator>

要点解释：

• .json 是严格 JSON：不能写注释（写了立刻标红）、key 必须带双引号、不能用单引号，这点和 JS 对象完全不同，是最容易踩的坑。
• 页面配置（index.json）与全局配置（app.json 的 window）有同名项时，以页面配置为准；页面没写才走全局。可以先把页面的标题删掉保存，验证是否回落到了全局的“黑马程序员”。
• navigationBarTextStyle 只支持 black 和 white，因为它控制的是微信原生导航栏，不是页面里你自己写的结构，所以颜色受限。
• pages 数组是页面路由注册表：没注册的页面无法访问；数组第一项就是首页（也可用 entryPagePath 指定启动页）。在 pages 里写一个不存在的路径并保存，开发者工具会自动帮你生成该页面的 4 个文件。
• style 只能写 "v2" 或不写（不写会走旧版组件库），写 v1 是无效的。
• enablePullDownRefresh: true 开启下拉刷新，默认是 false（拉不动）；backgroundColor 改的是下拉露出的那层背景，不是页面背景，别和页面自己的 background-color 搞混；backgroundTextStyle 只有 dark / light。
• 跳转用 navigator 组件，属性是 url 而不是 href；推荐用 /pages/logs/logs 这种绝对路径（斜杠开头直达项目根目录），比 ../../logs/logs 相对路径更耐改目录；路径不要带后缀名，因为它加载的是这一组 4 个文件。
• 易错点：navigator 是块级元素，默认独占一行且没有下划线，和网页 <a> 表现不同；navigator 跳转后左上角会自动出现返回箭头。
• 属性名又长又多（如 navigationBarBackgroundColor），不要手拼，用 Ctrl + I 唤起代码提示选择，避免拼错导致配置静默失效。

常见错误

1. 注册时提示邮箱已被占用 现象：填完邮箱点注册，提示该邮箱已注册/不可用。 原因：同一个邮箱在微信公众平台只能绑定一个账号，之前注册过订阅号、服务号也会占用。 修法：换一个从未在公众平台使用过的邮箱重新注册。

2. 创建的项目目录结构和的不一样 现象：项目里多出 cloudfunctions、miniprogram 等目录，后续代码无处安放。 原因：创建时勾选了"云服务"或选错模板。 修法：删除项目重新创建，后端服务选"不使用云服务"，模板选"基础模板"。

3. 清空 JS 后页面直接白屏 现象：模拟器一片空白，控制台也不报明显错误。 原因：删掉了 Page({}) 页面注册函数，页面没有注册成功。 修法：补回 Page({})，注意 P 大写；Page() 的实参必须是对象。

4. 改了 data 但界面不更新 现象：this.data.msg = 'xxx' 执行后，视图层毫无变化。 原因：小程序不是 Vue 的响应式，直接赋值只改了逻辑层数据。 修法：统一用 this.setData({ msg: 'xxx' })，同时更新数据与视图。

5. 照搬 HTML 标签和事件，点击没反应 现象：写了 <div>、<span>、bindclick，样式正常但交互失效。 原因：小程序只认自己的组件与事件名，div/span 不生效，且没有 click 事件。 修法：容器换 view、文本换 text，点击事件换成 bindtap。

6. json 文件一片红波浪线 现象：写了注释或单引号，配置不生效甚至报错。 原因：.json 是严格 JSON，不允许注释、单引号、无引号的键名。 修法：删掉注释，键和字符串一律双引号，键值之间用逗号分隔且最后一项不加逗号。

7. navigator 点击不跳转 现象：写了 <navigator href="..."> 或把路径带上 .wxml 后缀，点击无反应。 原因：跳转地址属性是 url 而非 href；页面路径是路由，不带文件后缀。 修法：改为 url="/pages/logs/logs"，优先用 / 开头的绝对路径，避免页面移动后相对路径失效。

8. 新建了页面文件却访问不到 现象：目录里有文件，跳转时报页面不存在。 原因：app.json 的 pages 里没有注册该路由，未注册的页面不可访问。 修法：在 pages 数组中补上路径；顺带确认数组第一项就是期望的首页。

9. 配置项单词拼错导致不生效 现象：写了半天没效果，回头发现 navigationBar 拼成了 navgationBar。 原因：配置项名称长且驼峰多，手写极易出错。 修法：用 Ctrl + I 唤起代码提示选择，不靠手敲；值有固定枚举的（如 black/white、v2）也从提示里选。

练习

1. 用一个未注册过公众平台的邮箱完成小程序账号注册，进入"开发管理 → 开发设置"找到 AppID 并记录下来；随后创建一个"不使用云服务 + 基础模板"的项目，用"预览"扫码在真机微信中打开初始页面。

2. 只用 view 和 text 两个组件 + flex 布局，复刻课上那张四列（精选、手机、食品、生鲜、母婴）导航条，要求整体水平均分、文字垂直居中、其中一项用 active 类做成微信绿高亮。

3. 在页面 data 中初始化一个 msg，用 {{}} 渲染到界面；再加一个按钮，通过 bindtap + setData 点击后把文案改为"乾坤未定"，并在调试器的 AppData 面板中观察数据同步变化。

4. 在 app.json 的 pages 中新增一个页面路由（观察工具是否自动生成四个文件），然后在首页放一个 navigator 用绝对路径跳过去；给新页面单独配置标题和 enablePullDownRefresh，再验证它与 app.json 中 window 配置的优先级关系。

5. 把页面 json 中的导航栏文字颜色分别试写为 black、white 和一个自定义颜色，记录哪种生效、哪种不生效；再用 Ctrl + I 查阅页面配置项，找出一个课上没讲过的配置并说明它的作用。

原视频对照

#	视频	时长
1	小程序简介	07:06
2	准备工作-注册账号-创建项目	10:58
3	小程序页面结构+样式	10:51
4	小程序逻辑交互	14:00
5	小程序配置	14:31
6	小程序页面跳转-navigator	08:12
7	小程序其他配置项和文档查阅	11:04

小结

1. 小程序账号是开发的前置条件，AppID 是项目的身份证；邮箱唯一性、主体信息真实性、类目非游戏这三条是注册阶段的硬约束。
2. 创建项目时"不使用云服务 + 基础模板"必须一次选对，否则后续目录结构与教学不一致，纠错成本远高于重建。
3. 一个页面由 wxml / wxss / js / json 四个同名文件组成，框架会自动加载，无需手动引入——这是与网页开发最直观的差异。
4. 小程序的学习成本主要不在新概念，而在"写法替换"：div→view、span→text、a→navigator、click→bindtap、href→url，写错不报错但就是不生效，需要建立条件反射。
5. 数据流的铁律只有一条：改数据必须走 setData，直接赋值不会驱动视图。
6. 配置是小程序特有的能力，优先级是"页面配置 > 全局 window 配置"；页面必须先在 pages 中注册才可访问，数组首项即首页。
7. 遇到不认识的配置项或组件，第一时间查官方文档（工具内置搜索 / 组件悬停跳转），而不是凭记忆手写长单词。
8. 调试三件套要养成习惯：模拟器看效果、调试器 AppData 看数据、预览扫码看真机，三者缺一容易误判。