小程序：200知识点/速查手册

小程序：200知识点/速查手册

原创定位：入门→中级→高级小程序开发，速查+背诵手册

整体结构划分：

1. 一、小程序基础架构（1～20）

2. 二、WXML 模板语法（21～40）

3. 三、WXSS 样式规范（41～60）

4. 四、配置文件 JSON（61～80）

5. 五、生命周期与页面栈（81～100）

6. 六、组件化开发（101～120）

7. 七、路由、数据通信与 WXS（121～140）

8. 八、原生 API、网络与本地存储（141～160）

9. 九、分包、工程化与跨端框架（161～175）

10. 十、性能优化、安全与云开发（176～190）

11. 十一、手写高频、踩坑实战（191～200）

一、小程序基础架构（1～20）

1. 1、小程序定义 无需安装、微信宿主沙盒应用，融合 Web+Native 能力，即用即走，双线程隔离架构。

2. 2、小程序双线程核心架构 逻辑层 AppService (JSCore)、渲染层 WebView，两端隔离，无 DOM 直接操作。

3. 3、逻辑层职责 执行业务 JS、接口请求、生命周期、setData、全局状态、API 调用，独立线程不阻塞渲染。

4. 4、渲染层职责 WXML/WXSS 解析、页面渲染、捕获用户点击滑动事件，每个页面独立 WebView。

5. 5、双线程通信原理 经 Native JSBridge 中转，数据序列化传递；setData 是唯一同步视图方式，频繁通信会卡顿。

6. 6、原生组件机制 map/canvas/video 等脱离 WebView，原生渲染性能更高，但层级高于普通 Web 元素易遮挡。

7. 7、小程序四大基础文件 wxml (结构)、wxss (样式)、js (逻辑)、json (配置)；页面 / 组件四文件一一对应。

8. 8、app 全局文件作用 app.json 全局配置、app.wxss 全局样式、app.js 全局生命周期与 globalData。

9. 9、冷启动定义 小程序完全销毁后重新打开，下载主包、执行 onLaunch，耗时更长。

10. 10、热启动定义 切后台再切前台，仅触发 onShow，不重新下载包、不执行 onLaunch。

11. 11、页面栈规则 最多 10 层页面栈；路由 API 会新增 / 替换 / 清空页面栈，栈溢出无法跳转。

12. 12、沙箱环境限制 逻辑层无 window/document，禁止 DOM 操作，API 仅开放微信授权能力。

13. 13、Worker 多线程作用 独立子线程处理海量计算、大数据解析，不阻塞主线程，不能调用 wx 原生 API。

14. 14、Worker 通信方式 postMessage 双向传参，数据拷贝不共享内存，app.json 配置 workers 目录。

15. 15、小程序运行限制 主包上限 2M；分包单包 2M，总包上限 20M；超出无法上传发布。

16. 16、基础库作用 提供 wx 全局 API、框架底层逻辑；低版本机型基础库需做兼容降级。

17. 17、宿主环境差异微信 / 支付宝 / 百度小程序底层 API、配置字段存在差异，跨端需适配。

18. 18、页面渲染流程 下载包→解析 json→加载 wxml/wxss→执行 Page 生命周期→setData 渲染视图。

19. 19、MVVM 实现逻辑 数据驱动视图，逻辑层修改 data，setData 差分更新渲染层，无需手动操作节点。

20. 20、小程序与 H5 核心区别 双线程、沙箱隔离、原生能力、分包加载、包体积限制、无 DOM、页面栈管理。

二、WXML 模板语法（21～40）

1. 21、WXML 与 HTML 区别 标签有限、无 div/p 通用块标签、仅支持小程序内置标签、数据绑定 {{}} 语法。

2. 22、插值表达式 {{}} 渲染文本、数字、布尔、运算、对象属性；直接写对象会显示[object Object]。

3. 23、wx:if 条件渲染 销毁重建节点，适合低频切换；支持 wx:elif、wx:else 多分支判断。

4. 24、hidden 属性 仅隐藏 display:none，节点保留 DOM，适合频繁切换场景，性能优于 wx:if。

5. 25、wx:for 列表渲染 循环数组，默认下标 index、项 item；wx:key 绑定唯一标识优化 diff。

6. 26、wx:key 禁止使用 index 数组增删中间项时节点复用错乱，优先 id、唯一业务字段。

7. 27、wx:for 自定义下标 / 项 wx:for-item="listItem" wx:for-index="idx" 重命名循环变量。

8. 28、block 空标签 仅作包裹容器，不生成真实 DOM 节点，用于批量条件 / 循环渲染。

9. 29、template 模板复用 定义模板结构，按需引入使用，纯模板无业务逻辑。

10. 30、import 模板引入 仅导入 template 模板，作用域仅限当前文件，无法递归共享。

11. 31、include 文件引入 直接复制 wxml 完整代码，不引入 template，适合公共页面片段复用。

12. 32、数据绑定分类 文本绑定、属性绑定、布尔绑定、运算绑定、对象展开绑定。

13. 33、布尔属性绑定坑 checked/disabled 等属性必须写disabled="{``{true}}"，直接写 disabled 等价 true。

14. 34、事件绑定基础 bind:tap 点击、bindinput 输入、bindchange 切换；bind 绑定冒泡事件。

15. 35、catch 事件修饰符 catch:tap 阻止事件冒泡，不再向上层父节点传递事件。

16. 36、capture 捕获型事件 capture-bind:tap，先捕获再冒泡，优先执行父级捕获逻辑。

17. 37、mutual 互斥事件 同一节点同时绑定 bind/capture，执行顺序：捕获→当前→冒泡。

18. 38、data-自定义传参 data-id="{{id}}"，通过事件源 e.target.dataset 获取自定义参数。

19. 39、wxml 不支持直接写 JS 复杂计算需放在 js 或 WXS 中，模板内仅支持简单三元、四则运算。

20. 40、内置基础标签 view 块级容器、text 文本、image 图片、button 按钮、input 输入框、scroll-view 滚动容器。

三、WXSS 样式规范（41～60）

1. 41、WXSS 特性 基于 CSS 扩展的小程序专属样式语言，新增 rpx 自适应单位，移除部分 CSS 属性，支持 @import 导入样式文件。

2. 42、rpx 自适应单位 规定 750rpx = 屏幕完整宽度，设备自动换算 px，是移动端适配首选单位。

3. 43、rpx 与 px 换算 375px 宽度设备：1rpx=0.5px；750px 设计稿可直接使用 rpx，无需手动换算。

4. 44、全局与局部样式优先级 页面自定义 wxss 样式 > app.wxss 全局样式，同权重下局部覆盖全局。

5. 45、@import 导入样式 通过 @import "common.wxss"; 导入公共样式，仅支持相对路径，必须置于文件顶部。

6. 46、选择器支持范围支持 class、id、标签、后代、伪类选择器；不支持通配符 *、复杂属性选择器。

7. 47、伪类支持 支持 :active 点击态、:disabled 禁用态，:hover 仅模拟器生效，不支持复杂伪元素。

8. 48、图片适配 object-fit image 标签通过 mode 属性控制图片裁剪缩放，包含 scaleToFill、aspectFit、aspectFill 等模式。

9. 49、scroll-view 滚动注意事项 必须设置固定高度，scroll-y 纵向滚动、scroll-x 横向滚动，需规避页面原生滚动冲突。

10. 50、原生组件层级问题 map、video、canvas 等原生组件层级最高，z-index 无效，需用 cover-view/cover-image 覆盖。

11. 51、cover-view 限制 仅支持基础文本、简单布局样式，不支持复杂动画、伪类、嵌套复杂标签。

12. 52、1px 细线解决方案 采用 rpx 缩放 + transform scale 缩放，解决 Retina 屏幕 1px 线条变粗的兼容问题。

13. 53、flex 弹性布局完全兼容 小程序全面兼容 flex 布局，官方推荐替代浮动布局，适配全机型。

14. 54、组件样式隔离 自定义组件默认开启样式隔离，仅自身 wxss 生效；可通过 addGlobalClass 开启全局样式穿透。

15. 55、外部样式类 externalClasses 组件自定义外部样式类，父页面可传入自定义样式，解决组件样式定制化问题。

16. 56、不支持的 CSS 特性 不支持 background-attachment、部分 calc 计算、复杂渐变、部分媒体查询属性。

17. 57、单行文本省略号代码 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

18. 58、多行文本省略 仅 webkit 内核兼容，依赖 -webkit-line-clamp 属性，低版本安卓存在兼容 bug。

19. 59、单位混用规范 页面布局统一使用 rpx，字体可用 px，1px 细线边框固定使用 px。

20. 60、动画性能优化优先使用 transform、opacity 实现动画，仅触发合成层，无回流重绘，页面滑动更流畅。

四、配置文件 JSON（61～80）

1. 61、app.json 全局配置必填字段 核心必填：pages 页面路径数组、window 窗口样式、tabBar 底部导航栏。

2. 62、pages 数组规则 数组首个路径为小程序默认首页，所有页面必须注册至 pages，否则无法正常访问。

3. 63、window 全局窗口配置 统一配置导航栏、页面背景色、是否开启下拉刷新等页面通用样式。

4. 64、navigationBar 核心配置可设置导航栏标题文字、文字黑白样式、导航栏背景颜色。

5. 65、tabBar 限制规则支持 2-5 个 tab 选项，top 顶部导航不显示图标，list 内页面必须注册在 pages 数组。

6. 66、tabBar 核心属性 包含页面列表、未选中文字色、选中文字色、图标常态/选中态路径。

7. 67、tabBar 切换逻辑 通过 switchTab 跳转，会清空所有非 tab 页面栈，仅保留当前 tab 页面。

8. 68、subpackages 分包配置 通过 root 配置分包根目录、pages 配置分包页面，实现代码拆分、按需加载。

9. 69、independent 独立分包 无需加载主包即可独立打开，适用于活动页、临时营销落地页。

10. 70、preloadRule 分包预加载 进入指定页面时后台预加载高频分包，大幅提升分包页面跳转速度。

11. 71、permission 权限配置 统一声明相机、相册、定位、麦克风等设备权限，用于用户授权弹窗展示。

12. 72、requiredBackgroundModes 后台运行 配置音频、定位后台持续运行权限，满足后台播放、持续定位需求。

13. 73、usingComponents 全局组件注册 在 app.json 统一注册公共组件，全项目页面无需重复引入即可使用。

14. 74、页面 page.json 优先级 单页面 json 配置优先级高于 app.json，可单独定制当前页面样式与配置。

15. 75、页面 json 独有配置 支持 disableScroll 禁止页面滚动、navigationStyle 自定义导航栏等独有配置。

16. 76、custom 自定义导航栏 配置 navigationStyle:"custom" 可隐藏原生导航栏，自定义顶部导航组件。

17. 77、组件 json 配置规则 组件 json 仅支持 usingComponents 注册子组件，无 pages、window、tabBar 等全局配置字段。

18. 78、lazyCodeLoading 按需注入 开启后分包 JS 代码仅在页面访问时加载，大幅缩减首屏加载代码体积。

19. 79、networkTimeout 网络超时配置 统一配置 request、WebSocket、文件上传/下载的超时时间。

20. 80、sitemap.json 站点索引配置 控制页面是否被微信搜索收录，优化小程序 SEO 曝光。

五、生命周期与页面栈（81～100）

应用生命周期（app.js）

1. 81、onLaunch小程序初始化完成触发，全局仅执行一次，用于登录鉴权、全局数据初始化、获取场景值。

2. 82、onShow 小程序由后台切前台、冷启动完成后触发，每次页面可见都会执行，用于刷新全局数据。

3. 83、onHide 小程序切换至后台时触发，用于保存临时状态、关闭定时器、暂停音视频播放。

4. 84、onError 全局捕获 JS 脚本异常、API 调用失败，可用于统一错误收集与上报。

5. 85、onPageNotFound 访问不存在的页面路径时触发，可自定义 404 页面、重定向至首页。

页面 Page 生命周期

1. **86、onLoad(options)**页面加载时执行一次，通过 options 接收路由参数，页面初始化、接口请求在此执行。

2. 87、onShow 页面每次显示触发，页面返回、tab 切换都会执行，用于刷新列表、校验登录态。

3. 88、onReady 页面 DOM 结构渲染完成，仅执行一次，可获取节点信息、初始化动画与 canvas。

4. 89、onHide 页面隐藏、跳转其他页面时触发，用于暂停轮询、清空定时器。

5. 90、onUnload 页面销毁卸载时执行，用于释放资源、清除监听、防止内存泄漏。

6. 91、下拉刷新 onPullDownRefresh 页面下拉触发，需手动在 json 开启配置，刷新完成后调用 stopPullDownRefresh 终止动画。

7. 92、触底加载 onReachBottom 页面滚动至底部触发，用于实现分页加载、上拉加载更多功能。

8. 93、页面滚动 onPageScroll 实时监听页面滚动距离，高频触发，需做节流处理，可实现吸顶、滚动动画。

9. 94、分享 onShareAppMessage 监听右上角转发、页面分享按钮，自定义分享标题、封面图、跳转路径。

10. 95、朋友圈分享 onShareTimeline 自定义小程序朋友圈分享的文案与封面图片。

11. 96、页面 resize 页面窗口尺寸变化触发，适配横竖屏切换、弹窗弹出场景。

组件 Component 生命周期

1. 97、created 组件实例创建完成，无 DOM 节点，无法操作视图，仅用于初始化私有数据。

2. 98、attached 组件挂载到页面 DOM 树，可调用 setData、发起接口请求。

3. 99、ready 组件 DOM 渲染完成，可查询节点、执行动画、操作 canvas。

4. 100、moved/detached moved 组件位置移动触发；detached 组件销毁触发，用于清理定时器与事件监听。

六、组件化开发（101～120）

1. 101、自定义组件定义 由独立的 json、wxml、wxss、js 四文件组成，json 中配置 "component":true 声明为组件。

2. 102、组件注册引入 在页面 json 的 usingComponents 中配置组件路径，即可在页面 wxml 中使用自定义标签。

3. 103、组件 data 与 properties 区别 data 为组件内部私有数据；properties 用于接收父组件传值，支持类型校验与默认值。

4. 104、properties 类型校验 支持 String、Number、Boolean、Array、Object 类型，可配置默认值 value，通过 observer 监听数据变化。

5. 105、observer 监听 props 父组件传值变更时触发回调，用于数据转换、联动逻辑，需避免重复 setData 造成死循环。

6. 106、组件事件通信 triggerEvent 子组件通过 this.triggerEvent 触发自定义事件，父组件通过 bind 绑定事件接收数据，等同于 Vue 的 emit。

7. 107、triggerEvent 修饰符 bubbles 开启事件冒泡、composed 允许事件穿透组件树，实现多层组件事件传递。

8. 108、组件插槽 slot 默认单插槽，多插槽需在 json 开启 multipleSlots:true，通过 name 区分命名插槽。

9. 109、组件样式隔离方案 默认样式隔离，支持 addGlobalClass 穿透全局样式、externalClasses 自定义外部样式。

10. 110、组件公共方法暴露 父组件通过 selectComponent 获取子组件实例，调用子组件 methods 中的公共方法。

11. 111、behaviors 复用组件逻辑 类似 Mixins，提取公共数据、方法、生命周期，实现多组件逻辑复用。

12. 112、behavior 执行顺序 组件自身生命周期 > 引入的 behavior，同名生命周期依次执行，同名 data 自动合并。

13. 113、wx.createSelectorQuery 节点查询 用于获取元素宽高、位置信息，必须在 onReady 渲染完成后执行。

14. 114、组件纯数据字段 pureDataPattern 标记无需渲染到视图的数据，setData 时不参与差分对比，提升渲染性能。

15. 115、组件 lifetimes 字段 集中统一声明组件生命周期，替代根节点直接编写生命周期函数，代码更规范。

16. 116、pageLifetimes 页面生命周期监听 组件内可监听页面 show、hide、resize 生命周期，无需页面手动传参。

17. 117、全局公共组件 在 app.json 中全局注册组件，全项目所有页面无需重复引入，直接使用。

18. 118、组件递归调用 组件 json 引入自身，可实现树形菜单、多级分类，需设置终止条件防止死循环。

19. 119、抽象组件 abstract 不生成真实 DOM 节点，仅用于封装公共布局与逻辑，精简代码结构。

20. 120、组件双向绑定 model:value 简化父子组件数据同步，无需手动触发 triggerEvent 传值，提升开发效率。

七、路由、数据通信与 WXS（121～140）

路由 API

1. 121、wx.navigateTo 保留当前页面，将新页面压入页面栈，页面栈最多10层，无法跳转 tab 页面，支持返回上一页。

2. 122、wx.redirectTo 关闭并替换当前页面，不新增页面栈，无法返回被关闭页面，不支持 tab 页面跳转。

3. 123、wx.switchTab 切换底部 tab 页面，清空所有非 tab 页面栈，跳转路径必须在 tabBar 配置列表中，不支持 url 传参。

4. 124、wx.reLaunch 关闭所有页面，全新打开指定页面，支持 tab 与普通页面，常用于登录后重定向首页。

5. 125、wx.navigateBack(delta) 页面回退，delta=1 返回上一页，delta=2 返回上两页，可实现多层页面批量回退。

6. 126、路由传参三种方式 url 拼接参数、EventChannel 事件通道、全局 globalData，适配不同传参场景。

7. 127、EventChannel 复杂传参 navigateTo 成功回调获取通信通道，支持大数据、异步通信，适用于复杂对象传参。

8. 128、页面栈获取 getCurrentPages() 获取当前所有页面栈数组，末尾为当前页面，禁止手动修改页面栈数组。

全局/跨页面通信

1. 129、globalData 全局变量 在 app.js 定义，全页面可读写，适用于简单全局状态存储，无响应式更新。

2. 130、EventBus 发布订阅 封装 on/emit/off 方法，实现跨页面、跨组件解耦通信，适配复杂事件联动场景。

3. 131、本地存储缓存 通过 wx.setStorageSync 持久化存储全局数据，适合缓存登录态、公共字典数据。

WXS 脚本

1. 132、WXS 作用 运行在渲染层的脚本语言，可在模板内完成数据计算、格式化，减少逻辑层与渲染层通信开销。

2. 133、WXS 与 JS 差异 语法受限、无 DOM/BOM 对象、无法调用 wx 原生 API，拥有独立运行环境。

3. 134、WXS 两种引入方式 外部文件 src 引入、页面内联编写，通过 module 定义模块名。

4. 135、WXS 模板调用 在插值表达式中直接调用 wxs 模块方法，完成数据格式化与计算。

5. 136、WXS 适用场景 价格格式化、时间转换、数组筛选、文本截取等纯数据、无交互的计算逻辑。

setData 核心机制

1. 137、setData 底层逻辑 对比新旧 data 数据差分，仅将变更字段同步至渲染层，频繁全量更新会造成双线程通信卡顿。

2. 138、setData 两种写法 基础对象简写、字符串路径写法，支持直接修改深层对象、数组元素数据。

3. 139、setData 异步特性 多次 setData 会批量合并执行，同步代码中读取的 data 为更新前旧值。

4. 140、setData 性能坑 循环高频调用、传输超大数组、全量更新页面 data，是长列表卡顿的核心原因。

八、原生 API、网络与本地存储（141～160）

网络请求

1. 141、wx.request 基础请求 小程序核心网络请求 API，仅支持 https/wss 协议，需在后台配置合法域名，禁止 http 明文请求。

2. 142、请求封装统一拦截 二次封装 request，统一处理 token 携带、超时重试、loading 加载、异常提示、防抖拦截重复请求。

3. 143、并发请求 Promise.all 多个接口同时请求，全部成功后再渲染页面，提升页面加载效率。

4. 144、WebSocket 实时通信 wx.connectSocket 建立长连接，适用于聊天室、实时大屏、消息推送等实时场景。

5. 145、文件上传 wx.uploadFile 支持图片、文件上传，可携带 formData 参数，监听上传进度，适配表单上传场景。

6. 146、文件下载 wx.downloadFile 下载网络资源至本地临时路径，支持保存相册、本地打开文档、图片。

本地存储

1. 147、同步存储 setStorageSync同步键值对存储，容量 5M，仅支持字符串，对象需手动 JSON 序列化。

2. 148、异步存储 setStorage 异步存储数据，不阻塞主线程渲染，适合存储大量列表、缓存数据。

3. 149、缓存清理方案 removeStorage 删除单条缓存、clearStorage 清空全部缓存，页面卸载及时清理临时数据。

4. 150、存储使用规范 禁止存储超大列表、密码密钥等敏感数据，登录 token 优先本地缓存并设置过期时间。

设备、媒体、授权 API

1. 151、授权 wx.authorize 提前申请设备权限，用户拒绝后引导跳转 wx.openSetting 开启权限设置页面。

2. 152、获取用户信息 新版通过 wx.getUserProfile 获取用户昵称、头像，废弃老旧 getUserInfo 接口。

3. 153、登录 wx.login 获取临时 code，传递给后端解密获取 openid，实现用户身份鉴权与登录。

4. 154、图片选择 wx.chooseMedia 支持拍照、相册选图，可压缩图片、限制尺寸，适配上传预览场景。

5. 155、图片预览 wx.previewImage 传入图片数组，实现全屏预览、左右滑动切换、保存图片功能。

6. 156、地图 wx.createMapContext 创建地图实例，实现定位、标记、缩放、测距等功能，原生地图性能优于 Web 地图。

7. 157、设备信息 wx.getSystemInfo 获取设备屏幕尺寸、系统版本、基础库版本、像素比，用于机型兼容适配。

8. 158、振动、提示框 API wx.showToast 轻提示、wx.showModal 确认弹窗、wx.vibrateShort 短振动反馈。

9. 159、二维码扫码 wx.scanCode 调用相机扫码，识别二维码、条形码，获取扫码内容信息。

10. 160、文件系统 fs 操作小程序本地临时文件，实现文件读写、批量处理、离线数据存储功能。

九、分包、工程化与跨端框架（161～175）

1. 161、分包加载核心目的 拆分业务代码按需加载，控制主包体积≤2M，大幅降低小程序冷启动白屏时长。

2. 162、主包包含内容 首页、tab 页面、全局配置、公共组件、登录核心业务等基础必备代码。

3. 163、普通分包规则 仅进入对应分包页面时下载代码，依赖主包加载完成，无法独立启动。

4. 164、独立分包使用场景 活动页、营销落地页，无需加载主包，可独立打开，适配临时推广场景。

5. 165、分包预加载 preloadRule 优化 访问高频页面时预下载常用分包，实现分包页面无感知秒开。

6. 166、npm 第三方依赖 支持引入小程序专用组件库、SDK，通过开发者工具构建 npm 生成 miniprogram_npm 依赖目录。

7. 167、小程序工程化工具 Weapp-Vite、Webpack、Gulp 等工具，支持 TS 编译、代码压缩、自动分包、工程化构建。

8. 168、TS 小程序配置 通过 tsconfig.json 实现类型校验、代码编译，为页面、组件、API 提供类型提示，减少报错。

9. 169、主流跨端框架 UniApp Vue 语法，一套代码编译多端（微信/支付宝小程序、H5、APP），上手门槛低。

10. 170、Mpx 跨端框架 保留小程序原生语法，轻量高效，编译多端，适配中小型项目。

11. 171、Taro 跨端框架 支持 React/Vue 语法，组件化完善、生态成熟，适配企业级大型跨端项目。

12. 172、组件库生态 Vant Weapp、TDesign Mini、uView UI 等主流组件库，快速搭建页面、统一 UI 风格。

13. 173、代码规范工具 ESLint 校验代码语法、Prettier 统一格式化，规范团队开发代码风格。

14. 174、CI/CD 小程序自动化 实现代码提交校验、自动构建、自动上传、版本提审，提升迭代效率。

15. 175、自定义插件独立分包插件，封装通用功能，多项目复用，有效缩减主包体积。

十、性能优化、安全与云开发（176～190）

性能优化

1. 176、冷启动优化 分包拆分瘦身、主包精简、分包预加载、JS 懒加载、图片压缩，全方位缩短启动时间。

2. 177、setData 渲染优化 仅更新变动字段、合并多次 setData、组件拆分局部更新、减少数据传输体积。

3. 178、长列表优化 虚拟滚动、分页懒加载、图片懒加载、精简单屏 DOM 节点，解决万级列表卡顿。

4. 179、图片全套优化采用 WebP 压缩格式、压缩尺寸、开启图片懒加载、CDN 分发、小图标转 base64。

5. 180、网络请求优化 接口合并、数据缓存、重复请求防抖、超时重试、页面预拉取核心数据。

6. 181、渲染流畅度优化 滚动、resize 高频事件节流，减少频繁节点查询，动画优先使用 transform/opacity。

7. 182、内存泄漏规避 页面卸载时销毁定时器、清空事件监听、释放大数组资源、解绑 Worker 线程。

8. 183、包体积瘦身 合理分包、tree-shaking 剔除冗余代码、剥离无用 SDK、压缩静态资源。

小程序安全

1. 184、前端安全风险 接口参数篡改、敏感数据缓存、分享路径伪造、WXML XSS 注入风险。

2. 185、XSS 防御 文本内容优先使用 text 标签，谨慎使用 rich-text，过滤用户输入特殊字符。

3. 186、接口鉴权安全 openid、敏感凭证由后端存储，前端不留存，接口增加签名校验防参数篡改。

4. 187、合法域名规范生产环境必须配置 HTTPS 合法域名，禁止关闭域名校验，规避接口请求风险。

5. 188、本地存储安全 禁止存储密码、密钥等敏感数据，token 设置过期时间，退出登录清空缓存。

云开发

1. 189、云开发能力 提供云数据库、云存储、云函数三大核心能力，无需自建后端，快速实现业务 CRUD、文件上传。

2. 190、云函数优势 后端逻辑运行在微信服务器，可安全获取用户 openid，规避前端鉴权漏洞，保障数据安全。

十一、手写高频、踩坑实战（191～200）

1. 191、手写封装 wx.request 实现 token 自动携带、全局 loading、超时拦截、重复请求防抖、统一异常提示。

2. 192、手写防抖节流函数 适配搜索输入、页面滚动、窗口 resize 高频事件，降低函数执行频次，优化性能。

3. 193、手写 EventBus 发布订阅 实现 on 监听、emit 触发、off 销毁、once 单次监听，适配跨页面跨组件通信。

4. 194、手写本地存储封装 自动完成 JSON 序列化与反序列化，统一同步/异步缓存方法，简化业务调用。

5. 195、长列表虚拟列表简易实现 计算可视区域范围，仅渲染屏幕内列表项，彻底解决大数据列表渲染卡顿问题。

6. 196、页面登录鉴权路由拦截 封装路由跳转方法，未登录用户自动拦截跳转登录页，缓存目标路径，登录后自动回跳。

7. 197、图片上传分片断点续传 大文件切片拆分上传，支持进度监听、失败重试、分片缓存，适配大文件上传场景。

8. 198、小程序高频踩坑汇总 覆盖 setData 异步坑、页面栈溢出、tab 传参失效、原生组件遮挡、分包体积超限等常见问题。

9. 199、全局异常监控上报 全局捕获 JS 运行错误、接口异常、路由 404，统一收集日志并上报后台，便于线上问题排查。

10. 200、小程序高阶成长总结 吃透双线程底层原理、精通分包与性能优化、熟练使用跨端框架、掌握云开发与安全规范、具备线上问题独立排查能力。