移动端知识点的铺垫-了解与移动端rem适配（Day12 2/2）

本页对应 day12(1)，共 5 段视频，约 2 小时 45 分。

学习目标

1. 能区分 PC 端视口、移动端布局视口（默认约 980px）与理想视口，并说明 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 对页面宽度和设备适配的影响。
2. 能解释 rem 相对根元素 font-size 的计算规则，并依据设计稿宽度推导根字号公式，实现不同设备宽度下的等比例适配。
3. 能独立注册微信小程序个人开发者账号，下载并安装对应系统的微信开发者工具，并说明个人账号与企业账号在注册材料和费用上的差异。
4. 能使用微信开发者工具创建或导入小程序项目，正确填写 AppID、选择 JS 基础模板，并使用模拟器、编辑器、调试器、编译、预览、真机调试和上传功能。
5. 能识别小程序项目目录中的配置文件与应用/页面文件，说明 app.json、project.config.json、sitemap.json、app.js、app.wxss 及页面四件套的作用。
6. 能使用 view、button、image、input 等基础组件搭建简单页面结构，使用 WXSS 编写样式，并通过 Page 的 data 与 setData 完成一次响应式数据更新。

知识点

先分清：移动端、H5与视口

为什么需要： 小程序最终跑在手机设备上，所以先要知道移动端网页是怎么发展来的。转写稿提到，2015 年 H5 让 PC 网页可以塞进手机，前端从只做 PC 页面扩展到移动端页面。
怎么想： 网页放进手机后，第一个问题是“页面按多宽排版”。PC 端视口就是浏览器可见区域，可用 document.documentElement.clientWidth 获取；手机端默认有一个布局视口。
怎么做： 先建立概念：视口是眼睛能看到的区域，不是手机物理屏幕。转写稿演示 PC 端宽度为 1366、高度 768。

document.documentElement.clientWidth

易错点： “视口”不要写成“市口/适口”；PC 视口宽度会随窗口变化，不能当成固定物理尺寸。

布局视口到理想视口

为什么需要： 手机默认把页面按约 980px 的布局视口排版，再把整页压缩进手机屏幕，结果是字太小、用户要左右滑动。
怎么想： 厂商先约定布局视口约 980，让不同手机有统一排版宽度；但体验差，于是苹果提出理想视口：让页面宽度等于设备宽度。
怎么做： 在页面中加 viewport 配置：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

开启后，页面宽度与设备宽度一致，clientWidth 会接近 320、375、414 等设备宽度。
易错点： 理想视口不是“固定 980”，而是让页面宽度跟随设备；一旦跟随设备，就必须做适配，否则同一个盒子在不同手机上比例会变。

rem适配的推导与调试

为什么需要： 设备宽度不同，但产品经理给的设计稿通常按 iPhone 6/7/8 的 375 或 750 宽出图，同一效果要等比例放大缩小。
怎么想： rem 是相对单位，参照 HTML 根元素的 font-size。转写稿用“2分之1和6分之3”说明等比例：设计稿 750、根字号 50，则元素 100px 可写成 2rem；到 375 设备时根字号算成 25，2rem 就变 50px。
怎么做： 先设根字号，再写 rem：

html { font-size: 50px; }
.box { width: 2rem; height: 2rem; }

动态计算根字号：

document.documentElement.style.fontSize =
  document.documentElement.clientWidth * 50 / 750 + 'px';

易错点： 根字号尽量取整数，别写 3.1415926；窗口变化要重新计算，可配合 window.onresize。转写稿强调：设计稿宽度、倍数不是死记的，核心是等比例。

小程序准备：账号与开发者工具

为什么需要： 小程序需要模拟器、真机调试和上传审核，VSCode 不能直接提供这些能力。
怎么想： 先注册账号，再下载微信开发者工具；工具里新建项目要填 AppID。转写稿中的“张小茹”应纠正为张小龙，小程序约 2017 年出现。
怎么做： 注册时选个人账号，企业账号涉及费用和营业执照；工具下载选稳定版、Windows 64 位。新建项目填自己的 AppID，不勾云服务，选 JS 基础模板。AppID 在后台“开发管理—开发设置”里找。
易错点： 账号别选成企业或小游戏；个人账号上线和支付能力受限，涉及支付一般要企业账号。真机调试只能扫自己的码。

目录与页面配置：app.json、页面json、setData

为什么需要： 不认目录就无法改页面。转写稿反复强调：只要是 .json 就是配置文件；app.* 是应用级，pages/index/* 是页面级。
怎么想： app.json 的 window 配全局导航，页面自己的 json 可覆盖全局；页面结构写 wxml，样式写 wxss，逻辑写 js。
怎么做： 全局配置示例：

{
  "window": {
    "navigationBarTitleText": "小程序",
    "navigationBarBackgroundColor": "#3C3F41",
    "navigationBarTextStyle": "white"
  }
}

页面配置可覆盖：

{
  "navigationBarBackgroundColor": "#666666"
}

数据更新必须用 setData：

this.setData({
  message: this.data.message + 1
});

易错点： 小程序不要写 div、img，要用 view、image、button、text 等组件；事件用 bindtap，不是 @click。转写稿调试过：直接 this.data.message++ 数据会变但页面不更新，因为修改了原数据且未触发响应式更新；必须用 setData 传入新值。

移动端为什么要先理解视口

为什么需要：微信小程序运行在手机设备里，虽然小程序帮你处理了很多适配问题，但做移动端网页、理解“页面为什么会被压缩、为什么要适配”，都绕不开视口。转写稿里先把移动端知识当作小程序铺垫：2015 年 H5 之后，前端不仅能写 PC 页面，也能把网页放进手机设备。

怎么想：视口就是“眼睛能看到的区域”。PC 端视口基本等于浏览器可视区域，可以用代码获取；移动端早期默认有一个“布局视口”，页面宽度常被固定成 980px，再塞进手机屏幕，所以字会变小、体验差。

怎么做：PC 端可先观察：

console.log(document.documentElement.clientWidth)

移动端早期页面宽度约 980px，是因为没有加理想视口配置。加入理想视口后，页面宽度才与设备宽度一致：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

易错点：不要把“布局视口 980px”当成所有手机真实宽度；iPhone 6/7/8 常见宽度是 375px，Plus 是 414px，iPhone 5 是 320px。理想视口让页面与设备同宽，但也意味着页面宽度不固定，必须做适配。

适配的本质是等比例放大缩小

为什么需要：产品经理给的设计稿通常按 iPhone 6/7/8 或 750px 宽出图。同一个盒子，在 375px 设备上刚好，换到 414px 或 320px 设备就不能写死 px，否则效果会忽大忽小。

怎么想：转写稿用“2分之1和6分之3”说明等比例：设计稿宽度与根字号的比例，要等于当前设备宽度与新根字号的比例。适配不是让元素永远 100px，而是让它在不同设备上按比例缩放。

怎么做：先明确设计稿宽度，例如 750px；再选一个基准根字号，例如 50px。公式为：

当前设备根字号 = 当前设备宽度 × 基准根字号 ÷ 设计稿宽度

易错点：基准根字号最好取整数，如 50、100，不要取 3.1415926 这类小数，否则换算麻烦。适配要改的是根字号，不是把每个盒子都写死 px。

REM 单位与根元素 font-size

为什么需要：REM 是 CSS3 新增的相对单位，相对 HTML 根元素的 font-size。只要根字号变化，所有用 rem 写的尺寸都会联动变化，适合做移动端等比例适配。

怎么想：先让根节点字号可控，再让子元素用 rem。例如根字号 100px，2rem 就是 200px；根字号变成 50px，2rem 就是 100px。转写稿提醒：body 的 font-size 仍可保持 16px，避免文字被根字号直接放大。

怎么做：

html {
  font-size: 50px;
}
.box {
  width: 2rem;
  height: 2rem;
  background: red;
}

设计稿中盒子 100×100，基准根字号 50px，所以写 2rem。
易错点：rem 参照的是 HTML 根节点，不是 body；根字号不要随便写小数；不要把所有尺寸都写成 px 后再怪 rem 不生效。

用 JS 动态计算根字号

为什么需要：设备宽度不固定，根字号也不能写死。转写稿的推导是：设计稿 750px、基准根字号 50px，到了 375px 设备，根字号应为 25px；到了 320px 设备，根字号应更小。

怎么想：页面一加载就根据当前设备宽度计算根字号；窗口尺寸变化时重新计算。获取设备宽度可用 document.documentElement.clientWidth。

怎么做：

function setRem() {
  var html = document.documentElement;
  html.style.fontSize = html.clientWidth * 50 / 750 + 'px';
}
setRem();
window.addEventListener('resize', setRem);

375px 设备下：375 × 50 ÷ 750 = 25px，盒子 2rem 就是 50px，正好是设计稿 100px 的一半，实现等比例缩小。
易错点：公式里除以的是设计稿宽度 750，不是设备宽度；结果要加 px；函数定义后要调用；加 resize 监听可让窗口变化时自动更新。调试时先看当前设备宽度，再看根节点 font-size，最后看盒子计算后的尺寸，按这个顺序排查。

先明确本节要解决的两件事

为什么需要：学微信小程序不能只停留在看概念，必须先有“开发环境”和“开发者身份”。没有工具，写不了、跑不了；没有账号，拿不到 AppID，也无法真机调试和后续上传。
怎么想：把准备工作拆成两步——先装微信开发者工具，再注册微信小程序开发者账号。工具是“写代码和模拟手机”的地方，账号是“微信识别你这个开发者/项目”的凭证。
怎么做：按转写稿顺序，先下载安装工具，再去微信公众平台注册小程序账号，最后用账号信息创建项目。
易错点：不要把“公众号注册”和“小程序注册”混在一起；不要一上来选企业账号；工具不要下预发布版/开发版，课堂环境优先稳定版 Windows 64 位。转写稿里“GS 基础模板”应理解为 JS 基础模板，“I IDD”应理解为 AppID。

下载微信开发者工具：为什么不用 VS Code

为什么需要：微信小程序需要模拟手机运行环境，VS Code 本身不能提供微信小程序模拟器，所以必须安装微信开发者工具。
怎么想：工具下载页会区分稳定版、预发布版、开发版。学习和正式开发优先稳定版；系统按自己电脑选，转写稿课堂环境是 Windows 64 位。
怎么做：进入微信小程序官方文档/开发者工具下载页，选择“稳定版”，按系统下载安装。安装成功后桌面会出现“微信开发者工具”图标。转写稿中课堂直接下载失败，说明下载会受网络影响；这时可由讲师提供安装包，但仍应以官方稳定版为准。
易错点：不要选预发布版或开发版练手；不要以为装了 VS Code 就能替代它；工具使用时必须联网，没网很多能力用不了。

注册小程序账号：为什么必须选“个人”

为什么需要：创建项目时要填 AppID，AppID 来自小程序后台；没有账号就没有合法项目身份。
怎么想：注册入口在微信公众平台，点“立即注册”，注意选择“小程序”，不是公众号。邮箱要求是未被微信公众平台注册、未被微信开放平台注册、未绑定个人微信的邮箱，QQ 邮箱、163 邮箱等可按页面要求尝试。
怎么做：填写邮箱、密码，收邮件完成验证；信息登记时选择“个人”。个人账号要填身份证等信息；企业账号需要营业执照、法人信息，大陆企业注册通常要 300 元，国外企业 99 美元。注册完成后用邮箱密码登录，或扫码登录后台。
易错点：不要注册成企业账号，学生通常没有营业执照；不要选成小游戏类型；转写稿中“张小茹”按公开常识应为微信小程序相关负责人张小龙，这里只作同音纠正，不展开无关内容。

用账号创建项目：AppID、模板和云服务

为什么需要：工具登录后要新建项目，项目需要名称、目录、AppID、模板等配置。
怎么想：AppID 相当于项目在微信侧的唯一标识。它不在工具里凭空产生，要到小程序后台“开发管理—开发设置”里复制。模板选择基础 JS 模板即可；初学不勾云开发。
怎么做：打开开发者工具扫码登录，点“+”新建；填写项目名称和本地目录；粘贴自己的 AppID；后端服务选择“不使用云服务”；模板选 JS 基础模板，确定后进入模拟器、编辑器、调试器界面。
易错点：不要粘的 AppID；不要选“云开发”；不要选成小游戏模式；如果发现是游戏模式，先检查注册账号类型。真机调试时二维码只能自己扫自己的，也可用“自动真机调试”。个人账号成员上限转写稿说为 15 人，企业账号更高；个人账号上线和支付能力受限，涉及支付一般需要企业账号。

工具界面与调试：先会跑，再看代码

为什么需要：后面要写页面、看效果、定位问题，必须认识模拟器、编辑器、调试器。
怎么想：模拟器看手机效果，编辑器写代码，调试器看控制台、网络、存储等。初学先保证项目能编译、能预览、能真机调试。
怎么做：点“编译”刷新模拟器；点“预览”扫码看效果；点“真机调试”做手机端验证；调试器里可看 Console、Network、Storage 等。
易错点：不要一上来纠结目录源码；先确认工具能登录、项目能创建、AppID 正确、模板正确。转写稿中提到的 app.json、app.js、app.wxss 和页面四文件，是下一节目录分析的内容，本节先建立“工具+账号”的入口意识。

课堂画面

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>移动端理想视口与 rem 基础</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html {
      font-size: 50px;
    }

    body {
      font-size: 16px;
    }

    .px-box {
      width: 100px;
      height: 100px;
      background: orange;
    }

    .rem-box {
      width: 2rem;
      height: 2rem;
      background: red;
      position: relative;
      left: 2rem;
      top: 2rem;
    }
  </style>
</head>
<body>
  <div class="px-box">100px 盒子</div>
  <div class="rem-box">2rem 盒子</div>

  <script>
    console.log('当前设备视口宽度：', document.documentElement.clientWidth);
    console.log('根元素 font-size：', getComputedStyle(document.documentElement).fontSize);
  </script>
</body>
</html>

要点解释：

• meta name="viewport" content="width=device-width, initial-scale=1.0"：开启移动端理想视口，让页面宽度与设备宽度一致。
• html { font-size: 50px; }：设置根元素字体大小，2rem = 2 × 50px = 100px。
• document.documentElement.clientWidth：获取当前设备视口宽度，用于观察理想视口效果。
• 易错点：rem 相对的是 HTML 根元素的 font-size，不是父元素；不加 viewport 时移动端默认布局视口约为 980px。
• 易错点：根元素 font-size 一般取整数，如 50px、100px，不要取 3.1415926 这类小数，否则计算麻烦。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>移动端 rem 适配</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      font-size: 16px;
    }

    .box {
      width: 2rem;
      height: 2rem;
      background: red;
      position: relative;
      left: 2rem;
      top: 2rem;
    }
  </style>
</head>
<body>
  <div class="box"></div>

  <script>
    function setRem() {
      const html = document.documentElement;
      const designWidth = 750;
      const baseSize = 50;

      html.style.fontSize = html.clientWidth * baseSize / designWidth + 'px';
    }

    setRem();
    window.addEventListener('resize', setRem);
  </script>
</body>
</html>

要点解释：

• designWidth = 750：假设产品经理给的原型图宽度为 750px。
• baseSize = 50：约定根元素基准值，原型图下根字体为 50px。
• html.clientWidth * baseSize / designWidth：按当前设备宽度等比例计算根元素 font-size。
• window.addEventListener('resize', setRem)：窗口尺寸变化时重新计算，实现等比例放大或缩小。
• 易错点：CSS 中不要写死 html { font-size: ... }，否则 JS 动态计算会被覆盖。
• 易错点：必须配合 meta viewport 使用；计算时不要忘记拼接 'px'；除数是原型图宽度 750，不是当前设备宽度。

常见错误

1. 现象：手机上页面仍按 980 宽显示、字很小还要缩放；原因：未开启理想视口；修法：在 head 中加 <meta name="viewport" content="width=device-width, initial-scale=1.0">。
2. 现象：按 750 设计稿写死 px，换机型后比例错、溢出；原因：没有做等比例适配；修法：用 rem + 动态根字号，按“设备宽 × 基准根字号 ÷ 设计稿宽”计算并在 resize 时更新。
3. 现象：根字号写成 3.1415 之类小数，换算费劲且易误差；原因：根字号取值不规范；修法：统一取 50、100 等整数，固定换算规则。
4. 现象：WXML 里写 div、img、input 等 HTML 标签不渲染或样式异常；原因：小程序使用内置组件而非 HTML 标签；修法：改用 view、text、image、button、input 等组件，样式优先用 class。
5. 现象：点击按钮后 this.data.count++，数据变了但页面不刷新；原因：直接改 data 不是响应式更新；修法：用 this.setData({ count: this.data.count + 1 })，以新值替换旧值。
6. 现象：事件绑定写 onclick 或回调函数找不到；原因：小程序事件机制与 DOM 不同；修法：用 bindtap="handleTap"，处理函数写在 Page({...}) 同级对象中。
7. 现象：页面导航栏颜色/标题不生效或被全局覆盖；原因：混淆 app.json 与页面 json 的优先级；修法：检查当前页面 json，页面配置优先于全局配置。
8. 现象：建项目选错模式/AppID/云服务，或体验版别人扫不了；原因：账号类型、开发模式、体验成员未配置；修法：个人账号、小程序模式、不用云服务、选 JS 模板；体验版先在成员管理中添加体验成员。
9. 现象：WXSS 用标签选择器导致样式污染；原因：小程序组件样式影响范围与预期不同；修法：统一使用 class 选择器，避免写标签选择器。
10. 现象：个人账号直接做支付类上线被拒；原因：个人账号能力与资质受限；修法：按业务要求使用企业账号并准备营业执照等资质。

练习

1. 设计稿宽 750，某盒子 100×100，根字号取 50，请写出该盒子宽高的 rem 值；设备宽 375 时动态根字号应为多少？写出计算式。
2. 写出开启理想视口的 meta 标签，并说明不加该标签时移动端布局视口默认宽度是多少。
3. 列出小程序一个页面通常包含的四个文件及各自职责；说明页面 json 与 app.json 配置同一项时谁优先。
4. 用 WXML + JS 实现点击按钮让 count 加 1，要求使用 bindtap 和 setData；并说明为什么 this.data.count++ 不行。
5. 写一段移动端适配脚本：按 750 设计稿、基准根字号 50 动态设置 html 的 font-size，并监听 resize；说明根字号为什么建议取整数。

原视频对照

#	视频	时长
1	移动端知识点的铺垫-了解	33:25
2	移动端rem适配	26:45
3	微信小程序注册账号与工具下载地址	15:20
4	微信开发者工具的使用	35:18
5	小程序项目目录的源码查看	54:52

小结

1. 移动端适配的本质是等比例缩放，不是按设计稿写死 px。
2. 理想视口是移动端布局的前提；布局视口 980 只用于理解历史方案。
3. rem 适配依赖根字号，根字号由设备宽和设计稿宽动态计算，并随 resize 同步。
4. 小程序不是 HTML：结构用 WXML 组件，样式用 WXSS 类选择器，逻辑用 JS。
5. 小程序页面数据要响应式更新，必须走 setData，直接改 data 视图不更新。
6. 配置要分层：app.json 管全局，页面 json 管局部，局部优先。
7. 开发前置要确认：个人账号、小程序模式、正确 AppID、不用云服务、JS 模板。
8. 体验与上线受成员和账号类型限制：体验成员、版本管理、企业资质要提前确认。