小程序200知识点/速查手册原创定位入门→中级→高级小程序开发速查背诵手册整体结构划分一、小程序基础架构120二、WXML 模板语法2140三、WXSS 样式规范4160四、配置文件 JSON6180五、生命周期与页面栈81100六、组件化开发101120七、路由、数据通信与 WXS121140八、原生 API、网络与本地存储141160九、分包、工程化与跨端框架161175十、性能优化、安全与云开发176190十一、手写高频、踩坑实战191200一、小程序基础架构1201、小程序定义无需安装、微信宿主沙盒应用融合 WebNative 能力即用即走双线程隔离架构。2、小程序双线程核心架构逻辑层 AppService (JSCore)、渲染层 WebView两端隔离无 DOM 直接操作。3、逻辑层职责执行业务 JS、接口请求、生命周期、setData、全局状态、API 调用独立线程不阻塞渲染。4、渲染层职责WXML/WXSS 解析、页面渲染、捕获用户点击滑动事件每个页面独立 WebView。5、双线程通信原理经 Native JSBridge 中转数据序列化传递setData 是唯一同步视图方式频繁通信会卡顿。6、原生组件机制map/canvas/video 等脱离 WebView原生渲染性能更高但层级高于普通 Web 元素易遮挡。7、小程序四大基础文件wxml (结构)、wxss (样式)、js (逻辑)、json (配置)页面 / 组件四文件一一对应。8、app 全局文件作用app.json 全局配置、app.wxss 全局样式、app.js 全局生命周期与 globalData。9、冷启动定义小程序完全销毁后重新打开下载主包、执行 onLaunch耗时更长。10、热启动定义切后台再切前台仅触发 onShow不重新下载包、不执行 onLaunch。11、页面栈规则最多 10 层页面栈路由 API 会新增 / 替换 / 清空页面栈栈溢出无法跳转。12、沙箱环境限制逻辑层无 window/document禁止 DOM 操作API 仅开放微信授权能力。13、Worker 多线程作用独立子线程处理海量计算、大数据解析不阻塞主线程不能调用 wx 原生 API。14、Worker 通信方式postMessage 双向传参数据拷贝不共享内存app.json 配置 workers 目录。15、小程序运行限制主包上限 2M分包单包 2M总包上限 20M超出无法上传发布。16、基础库作用提供 wx 全局 API、框架底层逻辑低版本机型基础库需做兼容降级。17、宿主环境差异微信 / 支付宝 / 百度小程序底层 API、配置字段存在差异跨端需适配。18、页面渲染流程下载包→解析 json→加载 wxml/wxss→执行 Page 生命周期→setData 渲染视图。19、MVVM 实现逻辑数据驱动视图逻辑层修改 datasetData 差分更新渲染层无需手动操作节点。20、小程序与 H5 核心区别双线程、沙箱隔离、原生能力、分包加载、包体积限制、无 DOM、页面栈管理。二、WXML 模板语法214021、WXML 与 HTML 区别标签有限、无 div/p 通用块标签、仅支持小程序内置标签、数据绑定 {{}} 语法。22、插值表达式 {{}}渲染文本、数字、布尔、运算、对象属性直接写对象会显示[object Object]。23、wx:if 条件渲染销毁重建节点适合低频切换支持 wx:elif、wx:else 多分支判断。24、hidden 属性仅隐藏 display:none节点保留 DOM适合频繁切换场景性能优于 wx:if。25、wx:for 列表渲染循环数组默认下标 index、项 itemwx:key 绑定唯一标识优化 diff。26、wx:key 禁止使用 index数组增删中间项时节点复用错乱优先 id、唯一业务字段。27、wx:for 自定义下标 / 项wx:for-itemlistItem wx:for-indexidx 重命名循环变量。28、block 空标签仅作包裹容器不生成真实 DOM 节点用于批量条件 / 循环渲染。29、template 模板复用定义模板结构按需引入使用纯模板无业务逻辑。30、import 模板引入仅导入 template 模板作用域仅限当前文件无法递归共享。31、include 文件引入直接复制 wxml 完整代码不引入 template适合公共页面片段复用。32、数据绑定分类文本绑定、属性绑定、布尔绑定、运算绑定、对象展开绑定。33、布尔属性绑定坑checked/disabled 等属性必须写disabled{{true}}直接写 disabled 等价 true。34、事件绑定基础bind:tap 点击、bindinput 输入、bindchange 切换bind 绑定冒泡事件。35、catch 事件修饰符catch:tap 阻止事件冒泡不再向上层父节点传递事件。36、capture 捕获型事件capture-bind:tap先捕获再冒泡优先执行父级捕获逻辑。37、mutual 互斥事件同一节点同时绑定 bind/capture执行顺序捕获→当前→冒泡。38、data-自定义传参data-id{{id}}通过事件源 e.target.dataset 获取自定义参数。39、wxml 不支持直接写 JS复杂计算需放在 js 或 WXS 中模板内仅支持简单三元、四则运算。40、内置基础标签view 块级容器、text 文本、image 图片、button 按钮、input 输入框、scroll-view 滚动容器。三、WXSS 样式规范416041、WXSS 特性基于 CSS 扩展的小程序专属样式语言新增 rpx 自适应单位移除部分 CSS 属性支持 import 导入样式文件。42、rpx 自适应单位规定 750rpx 屏幕完整宽度设备自动换算 px是移动端适配首选单位。43、rpx 与 px 换算375px 宽度设备1rpx0.5px750px 设计稿可直接使用 rpx无需手动换算。44、全局与局部样式优先级页面自定义 wxss 样式 app.wxss 全局样式同权重下局部覆盖全局。45、import 导入样式通过 import common.wxss; 导入公共样式仅支持相对路径必须置于文件顶部。46、选择器支持范围支持 class、id、标签、后代、伪类选择器不支持通配符 *、复杂属性选择器。47、伪类支持支持 :active 点击态、:disabled 禁用态:hover 仅模拟器生效不支持复杂伪元素。48、图片适配 object-fitimage 标签通过 mode 属性控制图片裁剪缩放包含 scaleToFill、aspectFit、aspectFill 等模式。49、scroll-view 滚动注意事项必须设置固定高度scroll-y 纵向滚动、scroll-x 横向滚动需规避页面原生滚动冲突。50、原生组件层级问题map、video、canvas 等原生组件层级最高z-index 无效需用 cover-view/cover-image 覆盖。51、cover-view 限制仅支持基础文本、简单布局样式不支持复杂动画、伪类、嵌套复杂标签。52、1px 细线解决方案采用 rpx 缩放 transform scale 缩放解决 Retina 屏幕 1px 线条变粗的兼容问题。53、flex 弹性布局完全兼容小程序全面兼容 flex 布局官方推荐替代浮动布局适配全机型。54、组件样式隔离自定义组件默认开启样式隔离仅自身 wxss 生效可通过 addGlobalClass 开启全局样式穿透。55、外部样式类 externalClasses组件自定义外部样式类父页面可传入自定义样式解决组件样式定制化问题。56、不支持的 CSS 特性不支持 background-attachment、部分 calc 计算、复杂渐变、部分媒体查询属性。57、单行文本省略号代码white-space:nowrap; overflow:hidden; text-overflow:ellipsis;58、多行文本省略仅 webkit 内核兼容依赖 -webkit-line-clamp 属性低版本安卓存在兼容 bug。59、单位混用规范页面布局统一使用 rpx字体可用 px1px 细线边框固定使用 px。60、动画性能优化优先使用 transform、opacity 实现动画仅触发合成层无回流重绘页面滑动更流畅。四、配置文件 JSON618061、app.json 全局配置必填字段核心必填pages 页面路径数组、window 窗口样式、tabBar 底部导航栏。62、pages 数组规则数组首个路径为小程序默认首页所有页面必须注册至 pages否则无法正常访问。63、window 全局窗口配置统一配置导航栏、页面背景色、是否开启下拉刷新等页面通用样式。64、navigationBar 核心配置可设置导航栏标题文字、文字黑白样式、导航栏背景颜色。65、tabBar 限制规则支持 2-5 个 tab 选项top 顶部导航不显示图标list 内页面必须注册在 pages 数组。66、tabBar 核心属性包含页面列表、未选中文字色、选中文字色、图标常态/选中态路径。67、tabBar 切换逻辑通过 switchTab 跳转会清空所有非 tab 页面栈仅保留当前 tab 页面。68、subpackages 分包配置通过 root 配置分包根目录、pages 配置分包页面实现代码拆分、按需加载。69、independent 独立分包无需加载主包即可独立打开适用于活动页、临时营销落地页。70、preloadRule 分包预加载进入指定页面时后台预加载高频分包大幅提升分包页面跳转速度。71、permission 权限配置统一声明相机、相册、定位、麦克风等设备权限用于用户授权弹窗展示。72、requiredBackgroundModes 后台运行配置音频、定位后台持续运行权限满足后台播放、持续定位需求。73、usingComponents 全局组件注册在 app.json 统一注册公共组件全项目页面无需重复引入即可使用。74、页面 page.json 优先级单页面 json 配置优先级高于 app.json可单独定制当前页面样式与配置。75、页面 json 独有配置支持 disableScroll 禁止页面滚动、navigationStyle 自定义导航栏等独有配置。76、custom 自定义导航栏配置 navigationStyle:custom 可隐藏原生导航栏自定义顶部导航组件。77、组件 json 配置规则组件 json 仅支持 usingComponents 注册子组件无 pages、window、tabBar 等全局配置字段。78、lazyCodeLoading 按需注入开启后分包 JS 代码仅在页面访问时加载大幅缩减首屏加载代码体积。79、networkTimeout 网络超时配置统一配置 request、WebSocket、文件上传/下载的超时时间。80、sitemap.json 站点索引配置控制页面是否被微信搜索收录优化小程序 SEO 曝光。五、生命周期与页面栈81100应用生命周期app.js81、onLaunch小程序初始化完成触发全局仅执行一次用于登录鉴权、全局数据初始化、获取场景值。82、onShow小程序由后台切前台、冷启动完成后触发每次页面可见都会执行用于刷新全局数据。83、onHide小程序切换至后台时触发用于保存临时状态、关闭定时器、暂停音视频播放。84、onError全局捕获 JS 脚本异常、API 调用失败可用于统一错误收集与上报。85、onPageNotFound访问不存在的页面路径时触发可自定义 404 页面、重定向至首页。页面 Page 生命周期86、onLoad(options)页面加载时执行一次通过 options 接收路由参数页面初始化、接口请求在此执行。87、onShow页面每次显示触发页面返回、tab 切换都会执行用于刷新列表、校验登录态。88、onReady页面 DOM 结构渲染完成仅执行一次可获取节点信息、初始化动画与 canvas。89、onHide页面隐藏、跳转其他页面时触发用于暂停轮询、清空定时器。90、onUnload页面销毁卸载时执行用于释放资源、清除监听、防止内存泄漏。91、下拉刷新 onPullDownRefresh页面下拉触发需手动在 json 开启配置刷新完成后调用 stopPullDownRefresh 终止动画。92、触底加载 onReachBottom页面滚动至底部触发用于实现分页加载、上拉加载更多功能。93、页面滚动 onPageScroll实时监听页面滚动距离高频触发需做节流处理可实现吸顶、滚动动画。94、分享 onShareAppMessage监听右上角转发、页面分享按钮自定义分享标题、封面图、跳转路径。95、朋友圈分享 onShareTimeline自定义小程序朋友圈分享的文案与封面图片。96、页面 resize页面窗口尺寸变化触发适配横竖屏切换、弹窗弹出场景。组件 Component 生命周期97、created组件实例创建完成无 DOM 节点无法操作视图仅用于初始化私有数据。98、attached组件挂载到页面 DOM 树可调用 setData、发起接口请求。99、ready组件 DOM 渲染完成可查询节点、执行动画、操作 canvas。100、moved/detachedmoved 组件位置移动触发detached 组件销毁触发用于清理定时器与事件监听。六、组件化开发101120101、自定义组件定义由独立的 json、wxml、wxss、js 四文件组成json 中配置 component:true 声明为组件。102、组件注册引入在页面 json 的 usingComponents 中配置组件路径即可在页面 wxml 中使用自定义标签。103、组件 data 与 properties 区别data 为组件内部私有数据properties 用于接收父组件传值支持类型校验与默认值。104、properties 类型校验支持 String、Number、Boolean、Array、Object 类型可配置默认值 value通过 observer 监听数据变化。105、observer 监听 props父组件传值变更时触发回调用于数据转换、联动逻辑需避免重复 setData 造成死循环。106、组件事件通信 triggerEvent子组件通过 this.triggerEvent 触发自定义事件父组件通过 bind 绑定事件接收数据等同于 Vue 的 emit。107、triggerEvent 修饰符bubbles 开启事件冒泡、composed 允许事件穿透组件树实现多层组件事件传递。108、组件插槽 slot默认单插槽多插槽需在 json 开启 multipleSlots:true通过 name 区分命名插槽。109、组件样式隔离方案默认样式隔离支持 addGlobalClass 穿透全局样式、externalClasses 自定义外部样式。110、组件公共方法暴露父组件通过 selectComponent 获取子组件实例调用子组件 methods 中的公共方法。111、behaviors 复用组件逻辑类似 Mixins提取公共数据、方法、生命周期实现多组件逻辑复用。112、behavior 执行顺序组件自身生命周期 引入的 behavior同名生命周期依次执行同名 data 自动合并。113、wx.createSelectorQuery 节点查询用于获取元素宽高、位置信息必须在 onReady 渲染完成后执行。114、组件纯数据字段 pureDataPattern标记无需渲染到视图的数据setData 时不参与差分对比提升渲染性能。115、组件 lifetimes 字段集中统一声明组件生命周期替代根节点直接编写生命周期函数代码更规范。116、pageLifetimes 页面生命周期监听组件内可监听页面 show、hide、resize 生命周期无需页面手动传参。117、全局公共组件在 app.json 中全局注册组件全项目所有页面无需重复引入直接使用。118、组件递归调用组件 json 引入自身可实现树形菜单、多级分类需设置终止条件防止死循环。119、抽象组件 abstract不生成真实 DOM 节点仅用于封装公共布局与逻辑精简代码结构。120、组件双向绑定 model:value简化父子组件数据同步无需手动触发 triggerEvent 传值提升开发效率。七、路由、数据通信与 WXS121140路由 API121、wx.navigateTo保留当前页面将新页面压入页面栈页面栈最多10层无法跳转 tab 页面支持返回上一页。122、wx.redirectTo关闭并替换当前页面不新增页面栈无法返回被关闭页面不支持 tab 页面跳转。123、wx.switchTab切换底部 tab 页面清空所有非 tab 页面栈跳转路径必须在 tabBar 配置列表中不支持 url 传参。124、wx.reLaunch关闭所有页面全新打开指定页面支持 tab 与普通页面常用于登录后重定向首页。125、wx.navigateBack(delta)页面回退delta1 返回上一页delta2 返回上两页可实现多层页面批量回退。126、路由传参三种方式url 拼接参数、EventChannel 事件通道、全局 globalData适配不同传参场景。127、EventChannel 复杂传参navigateTo 成功回调获取通信通道支持大数据、异步通信适用于复杂对象传参。128、页面栈获取 getCurrentPages()获取当前所有页面栈数组末尾为当前页面禁止手动修改页面栈数组。全局/跨页面通信129、globalData 全局变量在 app.js 定义全页面可读写适用于简单全局状态存储无响应式更新。130、EventBus 发布订阅封装 on/emit/off 方法实现跨页面、跨组件解耦通信适配复杂事件联动场景。131、本地存储缓存通过 wx.setStorageSync 持久化存储全局数据适合缓存登录态、公共字典数据。WXS 脚本132、WXS 作用运行在渲染层的脚本语言可在模板内完成数据计算、格式化减少逻辑层与渲染层通信开销。133、WXS 与 JS 差异语法受限、无 DOM/BOM 对象、无法调用 wx 原生 API拥有独立运行环境。134、WXS 两种引入方式外部文件 src 引入、页面内联编写通过 module 定义模块名。135、WXS 模板调用在插值表达式中直接调用 wxs 模块方法完成数据格式化与计算。136、WXS 适用场景价格格式化、时间转换、数组筛选、文本截取等纯数据、无交互的计算逻辑。setData 核心机制137、setData 底层逻辑对比新旧 data 数据差分仅将变更字段同步至渲染层频繁全量更新会造成双线程通信卡顿。138、setData 两种写法基础对象简写、字符串路径写法支持直接修改深层对象、数组元素数据。139、setData 异步特性多次 setData 会批量合并执行同步代码中读取的 data 为更新前旧值。140、setData 性能坑循环高频调用、传输超大数组、全量更新页面 data是长列表卡顿的核心原因。八、原生 API、网络与本地存储141160网络请求141、wx.request 基础请求小程序核心网络请求 API仅支持 https/wss 协议需在后台配置合法域名禁止 http 明文请求。142、请求封装统一拦截二次封装 request统一处理 token 携带、超时重试、loading 加载、异常提示、防抖拦截重复请求。143、并发请求 Promise.all多个接口同时请求全部成功后再渲染页面提升页面加载效率。144、WebSocket 实时通信wx.connectSocket 建立长连接适用于聊天室、实时大屏、消息推送等实时场景。145、文件上传 wx.uploadFile支持图片、文件上传可携带 formData 参数监听上传进度适配表单上传场景。146、文件下载 wx.downloadFile下载网络资源至本地临时路径支持保存相册、本地打开文档、图片。本地存储147、同步存储 setStorageSync同步键值对存储容量 5M仅支持字符串对象需手动 JSON 序列化。148、异步存储 setStorage异步存储数据不阻塞主线程渲染适合存储大量列表、缓存数据。149、缓存清理方案removeStorage 删除单条缓存、clearStorage 清空全部缓存页面卸载及时清理临时数据。150、存储使用规范禁止存储超大列表、密码密钥等敏感数据登录 token 优先本地缓存并设置过期时间。设备、媒体、授权 API151、授权 wx.authorize提前申请设备权限用户拒绝后引导跳转 wx.openSetting 开启权限设置页面。152、获取用户信息新版通过 wx.getUserProfile 获取用户昵称、头像废弃老旧 getUserInfo 接口。153、登录 wx.login获取临时 code传递给后端解密获取 openid实现用户身份鉴权与登录。154、图片选择 wx.chooseMedia支持拍照、相册选图可压缩图片、限制尺寸适配上传预览场景。155、图片预览 wx.previewImage传入图片数组实现全屏预览、左右滑动切换、保存图片功能。156、地图 wx.createMapContext创建地图实例实现定位、标记、缩放、测距等功能原生地图性能优于 Web 地图。157、设备信息 wx.getSystemInfo获取设备屏幕尺寸、系统版本、基础库版本、像素比用于机型兼容适配。158、振动、提示框 APIwx.showToast 轻提示、wx.showModal 确认弹窗、wx.vibrateShort 短振动反馈。159、二维码扫码 wx.scanCode调用相机扫码识别二维码、条形码获取扫码内容信息。160、文件系统 fs操作小程序本地临时文件实现文件读写、批量处理、离线数据存储功能。九、分包、工程化与跨端框架161175161、分包加载核心目的拆分业务代码按需加载控制主包体积≤2M大幅降低小程序冷启动白屏时长。162、主包包含内容首页、tab 页面、全局配置、公共组件、登录核心业务等基础必备代码。163、普通分包规则仅进入对应分包页面时下载代码依赖主包加载完成无法独立启动。164、独立分包使用场景活动页、营销落地页无需加载主包可独立打开适配临时推广场景。165、分包预加载 preloadRule 优化访问高频页面时预下载常用分包实现分包页面无感知秒开。166、npm 第三方依赖支持引入小程序专用组件库、SDK通过开发者工具构建 npm 生成 miniprogram_npm 依赖目录。167、小程序工程化工具Weapp-Vite、Webpack、Gulp 等工具支持 TS 编译、代码压缩、自动分包、工程化构建。168、TS 小程序配置通过 tsconfig.json 实现类型校验、代码编译为页面、组件、API 提供类型提示减少报错。169、主流跨端框架 UniAppVue 语法一套代码编译多端微信/支付宝小程序、H5、APP上手门槛低。170、Mpx 跨端框架保留小程序原生语法轻量高效编译多端适配中小型项目。171、Taro 跨端框架支持 React/Vue 语法组件化完善、生态成熟适配企业级大型跨端项目。172、组件库生态Vant Weapp、TDesign Mini、uView UI 等主流组件库快速搭建页面、统一 UI 风格。173、代码规范工具ESLint 校验代码语法、Prettier 统一格式化规范团队开发代码风格。174、CI/CD 小程序自动化实现代码提交校验、自动构建、自动上传、版本提审提升迭代效率。175、自定义插件独立分包插件封装通用功能多项目复用有效缩减主包体积。十、性能优化、安全与云开发176190性能优化176、冷启动优化分包拆分瘦身、主包精简、分包预加载、JS 懒加载、图片压缩全方位缩短启动时间。177、setData 渲染优化仅更新变动字段、合并多次 setData、组件拆分局部更新、减少数据传输体积。178、长列表优化虚拟滚动、分页懒加载、图片懒加载、精简单屏 DOM 节点解决万级列表卡顿。179、图片全套优化采用 WebP 压缩格式、压缩尺寸、开启图片懒加载、CDN 分发、小图标转 base64。180、网络请求优化接口合并、数据缓存、重复请求防抖、超时重试、页面预拉取核心数据。181、渲染流畅度优化滚动、resize 高频事件节流减少频繁节点查询动画优先使用 transform/opacity。182、内存泄漏规避页面卸载时销毁定时器、清空事件监听、释放大数组资源、解绑 Worker 线程。183、包体积瘦身合理分包、tree-shaking 剔除冗余代码、剥离无用 SDK、压缩静态资源。小程序安全184、前端安全风险接口参数篡改、敏感数据缓存、分享路径伪造、WXML XSS 注入风险。185、XSS 防御文本内容优先使用 text 标签谨慎使用 rich-text过滤用户输入特殊字符。186、接口鉴权安全openid、敏感凭证由后端存储前端不留存接口增加签名校验防参数篡改。187、合法域名规范生产环境必须配置 HTTPS 合法域名禁止关闭域名校验规避接口请求风险。188、本地存储安全禁止存储密码、密钥等敏感数据token 设置过期时间退出登录清空缓存。云开发189、云开发能力提供云数据库、云存储、云函数三大核心能力无需自建后端快速实现业务 CRUD、文件上传。190、云函数优势后端逻辑运行在微信服务器可安全获取用户 openid规避前端鉴权漏洞保障数据安全。十一、手写高频、踩坑实战191200191、手写封装 wx.request实现 token 自动携带、全局 loading、超时拦截、重复请求防抖、统一异常提示。192、手写防抖节流函数适配搜索输入、页面滚动、窗口 resize 高频事件降低函数执行频次优化性能。193、手写 EventBus 发布订阅实现 on 监听、emit 触发、off 销毁、once 单次监听适配跨页面跨组件通信。194、手写本地存储封装自动完成 JSON 序列化与反序列化统一同步/异步缓存方法简化业务调用。195、长列表虚拟列表简易实现计算可视区域范围仅渲染屏幕内列表项彻底解决大数据列表渲染卡顿问题。196、页面登录鉴权路由拦截封装路由跳转方法未登录用户自动拦截跳转登录页缓存目标路径登录后自动回跳。197、图片上传分片断点续传大文件切片拆分上传支持进度监听、失败重试、分片缓存适配大文件上传场景。198、小程序高频踩坑汇总覆盖 setData 异步坑、页面栈溢出、tab 传参失效、原生组件遮挡、分包体积超限等常见问题。199、全局异常监控上报全局捕获 JS 运行错误、接口异常、路由 404统一收集日志并上报后台便于线上问题排查。200、小程序高阶成长总结吃透双线程底层原理、精通分包与性能优化、熟练使用跨端框架、掌握云开发与安全规范、具备线上问题独立排查能力。 小程序：200知识点/速查手册
小程序200知识点/速查手册原创定位入门→中级→高级小程序开发速查背诵手册整体结构划分一、小程序基础架构120二、WXML 模板语法2140三、WXSS 样式规范4160四、配置文件 JSON6180五、生命周期与页面栈81100六、组件化开发101120七、路由、数据通信与 WXS121140八、原生 API、网络与本地存储141160九、分包、工程化与跨端框架161175十、性能优化、安全与云开发176190十一、手写高频、踩坑实战191200一、小程序基础架构1201、小程序定义无需安装、微信宿主沙盒应用融合 WebNative 能力即用即走双线程隔离架构。2、小程序双线程核心架构逻辑层 AppService (JSCore)、渲染层 WebView两端隔离无 DOM 直接操作。3、逻辑层职责执行业务 JS、接口请求、生命周期、setData、全局状态、API 调用独立线程不阻塞渲染。4、渲染层职责WXML/WXSS 解析、页面渲染、捕获用户点击滑动事件每个页面独立 WebView。5、双线程通信原理经 Native JSBridge 中转数据序列化传递setData 是唯一同步视图方式频繁通信会卡顿。6、原生组件机制map/canvas/video 等脱离 WebView原生渲染性能更高但层级高于普通 Web 元素易遮挡。7、小程序四大基础文件wxml (结构)、wxss (样式)、js (逻辑)、json (配置)页面 / 组件四文件一一对应。8、app 全局文件作用app.json 全局配置、app.wxss 全局样式、app.js 全局生命周期与 globalData。9、冷启动定义小程序完全销毁后重新打开下载主包、执行 onLaunch耗时更长。10、热启动定义切后台再切前台仅触发 onShow不重新下载包、不执行 onLaunch。11、页面栈规则最多 10 层页面栈路由 API 会新增 / 替换 / 清空页面栈栈溢出无法跳转。12、沙箱环境限制逻辑层无 window/document禁止 DOM 操作API 仅开放微信授权能力。13、Worker 多线程作用独立子线程处理海量计算、大数据解析不阻塞主线程不能调用 wx 原生 API。14、Worker 通信方式postMessage 双向传参数据拷贝不共享内存app.json 配置 workers 目录。15、小程序运行限制主包上限 2M分包单包 2M总包上限 20M超出无法上传发布。16、基础库作用提供 wx 全局 API、框架底层逻辑低版本机型基础库需做兼容降级。17、宿主环境差异微信 / 支付宝 / 百度小程序底层 API、配置字段存在差异跨端需适配。18、页面渲染流程下载包→解析 json→加载 wxml/wxss→执行 Page 生命周期→setData 渲染视图。19、MVVM 实现逻辑数据驱动视图逻辑层修改 datasetData 差分更新渲染层无需手动操作节点。20、小程序与 H5 核心区别双线程、沙箱隔离、原生能力、分包加载、包体积限制、无 DOM、页面栈管理。二、WXML 模板语法214021、WXML 与 HTML 区别标签有限、无 div/p 通用块标签、仅支持小程序内置标签、数据绑定 {{}} 语法。22、插值表达式 {{}}渲染文本、数字、布尔、运算、对象属性直接写对象会显示[object Object]。23、wx:if 条件渲染销毁重建节点适合低频切换支持 wx:elif、wx:else 多分支判断。24、hidden 属性仅隐藏 display:none节点保留 DOM适合频繁切换场景性能优于 wx:if。25、wx:for 列表渲染循环数组默认下标 index、项 itemwx:key 绑定唯一标识优化 diff。26、wx:key 禁止使用 index数组增删中间项时节点复用错乱优先 id、唯一业务字段。27、wx:for 自定义下标 / 项wx:for-itemlistItem wx:for-indexidx 重命名循环变量。28、block 空标签仅作包裹容器不生成真实 DOM 节点用于批量条件 / 循环渲染。29、template 模板复用定义模板结构按需引入使用纯模板无业务逻辑。30、import 模板引入仅导入 template 模板作用域仅限当前文件无法递归共享。31、include 文件引入直接复制 wxml 完整代码不引入 template适合公共页面片段复用。32、数据绑定分类文本绑定、属性绑定、布尔绑定、运算绑定、对象展开绑定。33、布尔属性绑定坑checked/disabled 等属性必须写disabled{{true}}直接写 disabled 等价 true。34、事件绑定基础bind:tap 点击、bindinput 输入、bindchange 切换bind 绑定冒泡事件。35、catch 事件修饰符catch:tap 阻止事件冒泡不再向上层父节点传递事件。36、capture 捕获型事件capture-bind:tap先捕获再冒泡优先执行父级捕获逻辑。37、mutual 互斥事件同一节点同时绑定 bind/capture执行顺序捕获→当前→冒泡。38、data-自定义传参data-id{{id}}通过事件源 e.target.dataset 获取自定义参数。39、wxml 不支持直接写 JS复杂计算需放在 js 或 WXS 中模板内仅支持简单三元、四则运算。40、内置基础标签view 块级容器、text 文本、image 图片、button 按钮、input 输入框、scroll-view 滚动容器。三、WXSS 样式规范416041、WXSS 特性基于 CSS 扩展的小程序专属样式语言新增 rpx 自适应单位移除部分 CSS 属性支持 import 导入样式文件。42、rpx 自适应单位规定 750rpx 屏幕完整宽度设备自动换算 px是移动端适配首选单位。43、rpx 与 px 换算375px 宽度设备1rpx0.5px750px 设计稿可直接使用 rpx无需手动换算。44、全局与局部样式优先级页面自定义 wxss 样式 app.wxss 全局样式同权重下局部覆盖全局。45、import 导入样式通过 import common.wxss; 导入公共样式仅支持相对路径必须置于文件顶部。46、选择器支持范围支持 class、id、标签、后代、伪类选择器不支持通配符 *、复杂属性选择器。47、伪类支持支持 :active 点击态、:disabled 禁用态:hover 仅模拟器生效不支持复杂伪元素。48、图片适配 object-fitimage 标签通过 mode 属性控制图片裁剪缩放包含 scaleToFill、aspectFit、aspectFill 等模式。49、scroll-view 滚动注意事项必须设置固定高度scroll-y 纵向滚动、scroll-x 横向滚动需规避页面原生滚动冲突。50、原生组件层级问题map、video、canvas 等原生组件层级最高z-index 无效需用 cover-view/cover-image 覆盖。51、cover-view 限制仅支持基础文本、简单布局样式不支持复杂动画、伪类、嵌套复杂标签。52、1px 细线解决方案采用 rpx 缩放 transform scale 缩放解决 Retina 屏幕 1px 线条变粗的兼容问题。53、flex 弹性布局完全兼容小程序全面兼容 flex 布局官方推荐替代浮动布局适配全机型。54、组件样式隔离自定义组件默认开启样式隔离仅自身 wxss 生效可通过 addGlobalClass 开启全局样式穿透。55、外部样式类 externalClasses组件自定义外部样式类父页面可传入自定义样式解决组件样式定制化问题。56、不支持的 CSS 特性不支持 background-attachment、部分 calc 计算、复杂渐变、部分媒体查询属性。57、单行文本省略号代码white-space:nowrap; overflow:hidden; text-overflow:ellipsis;58、多行文本省略仅 webkit 内核兼容依赖 -webkit-line-clamp 属性低版本安卓存在兼容 bug。59、单位混用规范页面布局统一使用 rpx字体可用 px1px 细线边框固定使用 px。60、动画性能优化优先使用 transform、opacity 实现动画仅触发合成层无回流重绘页面滑动更流畅。四、配置文件 JSON618061、app.json 全局配置必填字段核心必填pages 页面路径数组、window 窗口样式、tabBar 底部导航栏。62、pages 数组规则数组首个路径为小程序默认首页所有页面必须注册至 pages否则无法正常访问。63、window 全局窗口配置统一配置导航栏、页面背景色、是否开启下拉刷新等页面通用样式。64、navigationBar 核心配置可设置导航栏标题文字、文字黑白样式、导航栏背景颜色。65、tabBar 限制规则支持 2-5 个 tab 选项top 顶部导航不显示图标list 内页面必须注册在 pages 数组。66、tabBar 核心属性包含页面列表、未选中文字色、选中文字色、图标常态/选中态路径。67、tabBar 切换逻辑通过 switchTab 跳转会清空所有非 tab 页面栈仅保留当前 tab 页面。68、subpackages 分包配置通过 root 配置分包根目录、pages 配置分包页面实现代码拆分、按需加载。69、independent 独立分包无需加载主包即可独立打开适用于活动页、临时营销落地页。70、preloadRule 分包预加载进入指定页面时后台预加载高频分包大幅提升分包页面跳转速度。71、permission 权限配置统一声明相机、相册、定位、麦克风等设备权限用于用户授权弹窗展示。72、requiredBackgroundModes 后台运行配置音频、定位后台持续运行权限满足后台播放、持续定位需求。73、usingComponents 全局组件注册在 app.json 统一注册公共组件全项目页面无需重复引入即可使用。74、页面 page.json 优先级单页面 json 配置优先级高于 app.json可单独定制当前页面样式与配置。75、页面 json 独有配置支持 disableScroll 禁止页面滚动、navigationStyle 自定义导航栏等独有配置。76、custom 自定义导航栏配置 navigationStyle:custom 可隐藏原生导航栏自定义顶部导航组件。77、组件 json 配置规则组件 json 仅支持 usingComponents 注册子组件无 pages、window、tabBar 等全局配置字段。78、lazyCodeLoading 按需注入开启后分包 JS 代码仅在页面访问时加载大幅缩减首屏加载代码体积。79、networkTimeout 网络超时配置统一配置 request、WebSocket、文件上传/下载的超时时间。80、sitemap.json 站点索引配置控制页面是否被微信搜索收录优化小程序 SEO 曝光。五、生命周期与页面栈81100应用生命周期app.js81、onLaunch小程序初始化完成触发全局仅执行一次用于登录鉴权、全局数据初始化、获取场景值。82、onShow小程序由后台切前台、冷启动完成后触发每次页面可见都会执行用于刷新全局数据。83、onHide小程序切换至后台时触发用于保存临时状态、关闭定时器、暂停音视频播放。84、onError全局捕获 JS 脚本异常、API 调用失败可用于统一错误收集与上报。85、onPageNotFound访问不存在的页面路径时触发可自定义 404 页面、重定向至首页。页面 Page 生命周期86、onLoad(options)页面加载时执行一次通过 options 接收路由参数页面初始化、接口请求在此执行。87、onShow页面每次显示触发页面返回、tab 切换都会执行用于刷新列表、校验登录态。88、onReady页面 DOM 结构渲染完成仅执行一次可获取节点信息、初始化动画与 canvas。89、onHide页面隐藏、跳转其他页面时触发用于暂停轮询、清空定时器。90、onUnload页面销毁卸载时执行用于释放资源、清除监听、防止内存泄漏。91、下拉刷新 onPullDownRefresh页面下拉触发需手动在 json 开启配置刷新完成后调用 stopPullDownRefresh 终止动画。92、触底加载 onReachBottom页面滚动至底部触发用于实现分页加载、上拉加载更多功能。93、页面滚动 onPageScroll实时监听页面滚动距离高频触发需做节流处理可实现吸顶、滚动动画。94、分享 onShareAppMessage监听右上角转发、页面分享按钮自定义分享标题、封面图、跳转路径。95、朋友圈分享 onShareTimeline自定义小程序朋友圈分享的文案与封面图片。96、页面 resize页面窗口尺寸变化触发适配横竖屏切换、弹窗弹出场景。组件 Component 生命周期97、created组件实例创建完成无 DOM 节点无法操作视图仅用于初始化私有数据。98、attached组件挂载到页面 DOM 树可调用 setData、发起接口请求。99、ready组件 DOM 渲染完成可查询节点、执行动画、操作 canvas。100、moved/detachedmoved 组件位置移动触发detached 组件销毁触发用于清理定时器与事件监听。六、组件化开发101120101、自定义组件定义由独立的 json、wxml、wxss、js 四文件组成json 中配置 component:true 声明为组件。102、组件注册引入在页面 json 的 usingComponents 中配置组件路径即可在页面 wxml 中使用自定义标签。103、组件 data 与 properties 区别data 为组件内部私有数据properties 用于接收父组件传值支持类型校验与默认值。104、properties 类型校验支持 String、Number、Boolean、Array、Object 类型可配置默认值 value通过 observer 监听数据变化。105、observer 监听 props父组件传值变更时触发回调用于数据转换、联动逻辑需避免重复 setData 造成死循环。106、组件事件通信 triggerEvent子组件通过 this.triggerEvent 触发自定义事件父组件通过 bind 绑定事件接收数据等同于 Vue 的 emit。107、triggerEvent 修饰符bubbles 开启事件冒泡、composed 允许事件穿透组件树实现多层组件事件传递。108、组件插槽 slot默认单插槽多插槽需在 json 开启 multipleSlots:true通过 name 区分命名插槽。109、组件样式隔离方案默认样式隔离支持 addGlobalClass 穿透全局样式、externalClasses 自定义外部样式。110、组件公共方法暴露父组件通过 selectComponent 获取子组件实例调用子组件 methods 中的公共方法。111、behaviors 复用组件逻辑类似 Mixins提取公共数据、方法、生命周期实现多组件逻辑复用。112、behavior 执行顺序组件自身生命周期 引入的 behavior同名生命周期依次执行同名 data 自动合并。113、wx.createSelectorQuery 节点查询用于获取元素宽高、位置信息必须在 onReady 渲染完成后执行。114、组件纯数据字段 pureDataPattern标记无需渲染到视图的数据setData 时不参与差分对比提升渲染性能。115、组件 lifetimes 字段集中统一声明组件生命周期替代根节点直接编写生命周期函数代码更规范。116、pageLifetimes 页面生命周期监听组件内可监听页面 show、hide、resize 生命周期无需页面手动传参。117、全局公共组件在 app.json 中全局注册组件全项目所有页面无需重复引入直接使用。118、组件递归调用组件 json 引入自身可实现树形菜单、多级分类需设置终止条件防止死循环。119、抽象组件 abstract不生成真实 DOM 节点仅用于封装公共布局与逻辑精简代码结构。120、组件双向绑定 model:value简化父子组件数据同步无需手动触发 triggerEvent 传值提升开发效率。七、路由、数据通信与 WXS121140路由 API121、wx.navigateTo保留当前页面将新页面压入页面栈页面栈最多10层无法跳转 tab 页面支持返回上一页。122、wx.redirectTo关闭并替换当前页面不新增页面栈无法返回被关闭页面不支持 tab 页面跳转。123、wx.switchTab切换底部 tab 页面清空所有非 tab 页面栈跳转路径必须在 tabBar 配置列表中不支持 url 传参。124、wx.reLaunch关闭所有页面全新打开指定页面支持 tab 与普通页面常用于登录后重定向首页。125、wx.navigateBack(delta)页面回退delta1 返回上一页delta2 返回上两页可实现多层页面批量回退。126、路由传参三种方式url 拼接参数、EventChannel 事件通道、全局 globalData适配不同传参场景。127、EventChannel 复杂传参navigateTo 成功回调获取通信通道支持大数据、异步通信适用于复杂对象传参。128、页面栈获取 getCurrentPages()获取当前所有页面栈数组末尾为当前页面禁止手动修改页面栈数组。全局/跨页面通信129、globalData 全局变量在 app.js 定义全页面可读写适用于简单全局状态存储无响应式更新。130、EventBus 发布订阅封装 on/emit/off 方法实现跨页面、跨组件解耦通信适配复杂事件联动场景。131、本地存储缓存通过 wx.setStorageSync 持久化存储全局数据适合缓存登录态、公共字典数据。WXS 脚本132、WXS 作用运行在渲染层的脚本语言可在模板内完成数据计算、格式化减少逻辑层与渲染层通信开销。133、WXS 与 JS 差异语法受限、无 DOM/BOM 对象、无法调用 wx 原生 API拥有独立运行环境。134、WXS 两种引入方式外部文件 src 引入、页面内联编写通过 module 定义模块名。135、WXS 模板调用在插值表达式中直接调用 wxs 模块方法完成数据格式化与计算。136、WXS 适用场景价格格式化、时间转换、数组筛选、文本截取等纯数据、无交互的计算逻辑。setData 核心机制137、setData 底层逻辑对比新旧 data 数据差分仅将变更字段同步至渲染层频繁全量更新会造成双线程通信卡顿。138、setData 两种写法基础对象简写、字符串路径写法支持直接修改深层对象、数组元素数据。139、setData 异步特性多次 setData 会批量合并执行同步代码中读取的 data 为更新前旧值。140、setData 性能坑循环高频调用、传输超大数组、全量更新页面 data是长列表卡顿的核心原因。八、原生 API、网络与本地存储141160网络请求141、wx.request 基础请求小程序核心网络请求 API仅支持 https/wss 协议需在后台配置合法域名禁止 http 明文请求。142、请求封装统一拦截二次封装 request统一处理 token 携带、超时重试、loading 加载、异常提示、防抖拦截重复请求。143、并发请求 Promise.all多个接口同时请求全部成功后再渲染页面提升页面加载效率。144、WebSocket 实时通信wx.connectSocket 建立长连接适用于聊天室、实时大屏、消息推送等实时场景。145、文件上传 wx.uploadFile支持图片、文件上传可携带 formData 参数监听上传进度适配表单上传场景。146、文件下载 wx.downloadFile下载网络资源至本地临时路径支持保存相册、本地打开文档、图片。本地存储147、同步存储 setStorageSync同步键值对存储容量 5M仅支持字符串对象需手动 JSON 序列化。148、异步存储 setStorage异步存储数据不阻塞主线程渲染适合存储大量列表、缓存数据。149、缓存清理方案removeStorage 删除单条缓存、clearStorage 清空全部缓存页面卸载及时清理临时数据。150、存储使用规范禁止存储超大列表、密码密钥等敏感数据登录 token 优先本地缓存并设置过期时间。设备、媒体、授权 API151、授权 wx.authorize提前申请设备权限用户拒绝后引导跳转 wx.openSetting 开启权限设置页面。152、获取用户信息新版通过 wx.getUserProfile 获取用户昵称、头像废弃老旧 getUserInfo 接口。153、登录 wx.login获取临时 code传递给后端解密获取 openid实现用户身份鉴权与登录。154、图片选择 wx.chooseMedia支持拍照、相册选图可压缩图片、限制尺寸适配上传预览场景。155、图片预览 wx.previewImage传入图片数组实现全屏预览、左右滑动切换、保存图片功能。156、地图 wx.createMapContext创建地图实例实现定位、标记、缩放、测距等功能原生地图性能优于 Web 地图。157、设备信息 wx.getSystemInfo获取设备屏幕尺寸、系统版本、基础库版本、像素比用于机型兼容适配。158、振动、提示框 APIwx.showToast 轻提示、wx.showModal 确认弹窗、wx.vibrateShort 短振动反馈。159、二维码扫码 wx.scanCode调用相机扫码识别二维码、条形码获取扫码内容信息。160、文件系统 fs操作小程序本地临时文件实现文件读写、批量处理、离线数据存储功能。九、分包、工程化与跨端框架161175161、分包加载核心目的拆分业务代码按需加载控制主包体积≤2M大幅降低小程序冷启动白屏时长。162、主包包含内容首页、tab 页面、全局配置、公共组件、登录核心业务等基础必备代码。163、普通分包规则仅进入对应分包页面时下载代码依赖主包加载完成无法独立启动。164、独立分包使用场景活动页、营销落地页无需加载主包可独立打开适配临时推广场景。165、分包预加载 preloadRule 优化访问高频页面时预下载常用分包实现分包页面无感知秒开。166、npm 第三方依赖支持引入小程序专用组件库、SDK通过开发者工具构建 npm 生成 miniprogram_npm 依赖目录。167、小程序工程化工具Weapp-Vite、Webpack、Gulp 等工具支持 TS 编译、代码压缩、自动分包、工程化构建。168、TS 小程序配置通过 tsconfig.json 实现类型校验、代码编译为页面、组件、API 提供类型提示减少报错。169、主流跨端框架 UniAppVue 语法一套代码编译多端微信/支付宝小程序、H5、APP上手门槛低。170、Mpx 跨端框架保留小程序原生语法轻量高效编译多端适配中小型项目。171、Taro 跨端框架支持 React/Vue 语法组件化完善、生态成熟适配企业级大型跨端项目。172、组件库生态Vant Weapp、TDesign Mini、uView UI 等主流组件库快速搭建页面、统一 UI 风格。173、代码规范工具ESLint 校验代码语法、Prettier 统一格式化规范团队开发代码风格。174、CI/CD 小程序自动化实现代码提交校验、自动构建、自动上传、版本提审提升迭代效率。175、自定义插件独立分包插件封装通用功能多项目复用有效缩减主包体积。十、性能优化、安全与云开发176190性能优化176、冷启动优化分包拆分瘦身、主包精简、分包预加载、JS 懒加载、图片压缩全方位缩短启动时间。177、setData 渲染优化仅更新变动字段、合并多次 setData、组件拆分局部更新、减少数据传输体积。178、长列表优化虚拟滚动、分页懒加载、图片懒加载、精简单屏 DOM 节点解决万级列表卡顿。179、图片全套优化采用 WebP 压缩格式、压缩尺寸、开启图片懒加载、CDN 分发、小图标转 base64。180、网络请求优化接口合并、数据缓存、重复请求防抖、超时重试、页面预拉取核心数据。181、渲染流畅度优化滚动、resize 高频事件节流减少频繁节点查询动画优先使用 transform/opacity。182、内存泄漏规避页面卸载时销毁定时器、清空事件监听、释放大数组资源、解绑 Worker 线程。183、包体积瘦身合理分包、tree-shaking 剔除冗余代码、剥离无用 SDK、压缩静态资源。小程序安全184、前端安全风险接口参数篡改、敏感数据缓存、分享路径伪造、WXML XSS 注入风险。185、XSS 防御文本内容优先使用 text 标签谨慎使用 rich-text过滤用户输入特殊字符。186、接口鉴权安全openid、敏感凭证由后端存储前端不留存接口增加签名校验防参数篡改。187、合法域名规范生产环境必须配置 HTTPS 合法域名禁止关闭域名校验规避接口请求风险。188、本地存储安全禁止存储密码、密钥等敏感数据token 设置过期时间退出登录清空缓存。云开发189、云开发能力提供云数据库、云存储、云函数三大核心能力无需自建后端快速实现业务 CRUD、文件上传。190、云函数优势后端逻辑运行在微信服务器可安全获取用户 openid规避前端鉴权漏洞保障数据安全。十一、手写高频、踩坑实战191200191、手写封装 wx.request实现 token 自动携带、全局 loading、超时拦截、重复请求防抖、统一异常提示。192、手写防抖节流函数适配搜索输入、页面滚动、窗口 resize 高频事件降低函数执行频次优化性能。193、手写 EventBus 发布订阅实现 on 监听、emit 触发、off 销毁、once 单次监听适配跨页面跨组件通信。194、手写本地存储封装自动完成 JSON 序列化与反序列化统一同步/异步缓存方法简化业务调用。195、长列表虚拟列表简易实现计算可视区域范围仅渲染屏幕内列表项彻底解决大数据列表渲染卡顿问题。196、页面登录鉴权路由拦截封装路由跳转方法未登录用户自动拦截跳转登录页缓存目标路径登录后自动回跳。197、图片上传分片断点续传大文件切片拆分上传支持进度监听、失败重试、分片缓存适配大文件上传场景。198、小程序高频踩坑汇总覆盖 setData 异步坑、页面栈溢出、tab 传参失效、原生组件遮挡、分包体积超限等常见问题。199、全局异常监控上报全局捕获 JS 运行错误、接口异常、路由 404统一收集日志并上报后台便于线上问题排查。200、小程序高阶成长总结吃透双线程底层原理、精通分包与性能优化、熟练使用跨端框架、掌握云开发与安全规范、具备线上问题独立排查能力。