微信小程序全套知识点完整总结
一、小程序基础认知
1. 宿主环境核心概念
宿主环境是程序运行依赖的载体，微信App是小程序唯一宿主，依托安卓/iOS系统运行，可调用微信独有能力：扫码、支付、定位、登录等普通网页无法实现的功能。
宿主环境四大组成：通信模型、运行机制、内置组件、微信API。
2. 双层通信架构
小程序分为渲染层（WXML+WXSS）、逻辑层（JS），两层通信全部由微信Native客户端转发：
- 渲染层 ↔ 逻辑层：用户操作触发事件、数据双向更新
- 逻辑层 ↔ 第三方服务器：网络请求、数据响应，全部经过微信中转
3. 完整启动&页面渲染流程
（1）小程序整体启动步骤
- 下载小程序代码包至本地
- 解析全局配置
app.json - 执行
app.js，调用App()创建小程序全局实例 - 渲染pages数组首位页面（首页）
- 小程序启动完成
（2）单页面渲染步骤
- 解析当前页面
.json配置 - 加载页面
WXML模板 +WXSS样式 - 执行页面
.js，调用Page()创建页面实例 - 页面渲染完成
二、小程序项目文件结构与四类JSON配置
（一）项目整体目录
根目录核心文件：
app.js：全局入口逻辑app.json：全局窗口、页面路径配置app.wxss：全局公共样式project.config.json：开发者工具个性化配置sitemap.json：搜索索引配置pages/：所有页面文件夹（每个页面4文件：js/json/wxml/wxss）utils/：公共工具函数
（二）四类JSON配置详解
1. app.json（全局配置，优先级最低）
核心配置项：
pages[]：页面路径数组，数组第一项为首页；新增页面只需在此追加路径，工具自动生成页面4个文件window：全局导航栏样式navigationBarBackgroundColor：导航栏背景色（十六进制）navigationBarTitleText：导航栏文字navigationBarTextStyle：文字仅支持black/white
- 页面配置会覆盖app.json相同window属性
2. 页面page.json（单页面配置，优先级高于全局）
仅作用当前页面，可单独修改当前页导航栏颜色、标题、引入自定义组件：
{"navigationBarBackgroundColor":"#f60bb6","usingComponents":{}}3. sitemap.json（搜索SEO索引配置）
作用：控制微信爬虫是否收录页面，匹配搜索关键词后展示小程序页面。
{"rules":[{"action":"allow","page":"*"}]}action: allow允许索引；disallow禁止对应页面索引page: "*"代表全部页面
checkSiteMap 与 action 核心区别
action（sitemap.json内）：控制页面是否被爬虫收录，业务功能开关，上线生效checkSiteMap（project.config.json setting）：仅控制开发者工具控制台是否弹出索引提示，纯调试开关，设为false关闭提示，不影响线上搜索收录
4. project.config.json
工具配置，仅本地生效，存储编辑器、编译、调试设置，不参与线上发布。
三、四大核心技术栈：WXML / WXSS / JS / JSON
1. WXML（页面结构，对标HTML）
（1）WXML vs HTML 三大差异
- 标签完全不同
HTML：div、span、img、a
WXML：view、text、image、navigator - 跳转语法不同
HTML：<a href="地址">
WXML：<navigator url="/pages/xxx/xxx"> - 内置模板语法：数据绑定、条件渲染、列表渲染
（2）WXML核心模板语法
① 数据绑定 Mustache{{}}
数据定义在页面js的data对象中，双大括号渲染，支持4类场景：
- 绑定文本内容：
<view>{{info}}</view> - 绑定标签属性：
<image src="{{imgSrc}}"></image> - 三元运算：
<view>{{num>5?'大':'小'}}</view> - 算术运算：
<view>{{num*100}}</view>
调试：开发者工具AppData面板可实时查看data数据
② 事件绑定（渲染层→逻辑层通信）
事件是用户交互传递数据的唯一方式，核心事件：
| 事件 | 绑定写法 | 作用 |
|---|---|---|
| tap | bindtap | 点击（替代click） |
| input | bindinput | 输入框内容变化 |
| change | bindchange | 状态切换 |
- 事件对象event核心属性
target：触发事件的源头组件（冒泡场景）currentTarget：绑定事件的当前组件detail：input输入值、滑动数值等附加数据
- 修改data数据：
this.setData({键:值})，触发页面刷新 - 事件传参：不能直接传参，用
data-自定义名="{{值}}"，函数内e.target.dataset.自定义名获取 - 双向绑定input：input value绑定data，bindinput实时同步更新data
③ 条件渲染
wx:if / wx:elif / wx:else：动态创建/销毁节点，复杂判断推荐；多组件用<block wx:if>包裹（block无渲染）hidden="{{布尔}}"：仅CSS隐藏（display:none），频繁切换推荐- 区别：wx:if会销毁DOM，hidden只是样式隐藏
④ 列表渲染 wx:for
- 基础循环：
<view wx:for="{{数组}}">{{index}}-{{item}}</view>
index=下标，item=数组单项 - 自定义下标/项：
wx:for-index="idx" wx:for-item="obj" - wx:key：指定列表唯一标识（id/index），提升列表渲染性能
2. WXSS（页面样式，对标CSS）
WXSS 扩展&限制
- 新增
rpx自适应单位：以750rpx为屏幕满宽，自动适配所有手机，无需rem换算 - 样式分层：根目录
app.wxss全局生效；页面.wxss仅当前页面生效 - 仅支持部分CSS选择器：class、id、元素、后代、伪类after/before等，不支持复杂嵌套
3. JS逻辑文件（三类JS）
app.js：全局入口，App()初始化小程序，存储全局数据、全局生命周期- 页面
.js：页面入口，Page()创建页面实例，data存储页面数据、页面事件、生命周期 - 普通utils/js：公共工具函数，模块化引入复用
四、小程序内置九大组件
1. 视图容器组件（布局核心）
<view>：等同于div，块级布局，支持flex弹性布局<scroll-view>：滚动容器，横向scroll-x/纵向scroll-y，滚动必须设置固定高度<swiper/swiper-item>：轮播图
常用属性：indicator-dots（指示点）、autoplay自动轮播、interval间隔、circular无缝轮播
2. 基础文本组件
<text>：纯文本，selectable开启长按复制文字<rich-text>：通过nodes属性渲染HTML富文本（商品详情场景）
3. 媒体图片 image
- 默认尺寸：宽300px、高240px
- src路径：
/代表项目根目录 - mode缩放模式：scaleToFill（拉伸铺满）、aspectFit（完整显示）、aspectFill（裁剪铺满）、widthFix（宽度自适应）
4. 表单按钮 button
type：primary主色、warn警告、默认；size="mini"小尺寸；plain镂空按钮；open-type可调用微信授权、客服、转发能力
5. 导航 navigator
等同于a标签，url跳转页面
其余组件：表单、地图map、画布canvas、开放能力、无障碍组件
五、小程序API分类
小程序所有能力通过wx.xxx调用，分3大类：
- 事件监听API：以on开头（wx.onWindowResize），监听系统事件
- 同步API：以Sync结尾（wx.setStorageSync），直接返回结果，出错抛异常
- 异步API：wx.request网络请求等，通过success/fail/complete回调接收结果
六、协同开发、版本管理与发布全流程
1. 项目组织架构
项目经理统筹，四大团队：产品（需求）→设计（UI）→开发（编码）→测试（验收）
2. 两类后台成员
- 项目成员：开发者/运营/数据分析师，可登录管理后台、上传代码、配置
- 体验成员：仅内测扫码体验，无后台权限，管理员/开发者均可添加
3. 小程序4种版本
- 开发版本：开发者工具上传，本地开发提交，可删除
- 体验版本：从开发版本选取，给内测人员测试
- 审核中版本：提交腾讯官方审核，仅一份待审版本
- 线上版本：所有用户可访问，审核通过发布覆盖旧版
4. 完整发布步骤
- 开发者工具点击【上传】，填写版本号、备注，提交开发版本
- 登录小程序后台 → 管理 → 版本管理，查看上传代码
- 选中开发版本【提交审核】，填写类目、功能说明
- 腾讯审核通过后，后台点击【发布】，全量上线
5. 运营与推广
- 小程序码：辨识度高于普通二维码，后台【设置-基本信息】下载，用于线下推广
- 数据查看两种方式：
- 小程序管理后台-统计面板
- 微信搜「小程序数据助手」小程序查看实时数据
七、整体学习目标总结
- 掌握项目创建、开发者工具使用、AppID获取
- 清晰小程序完整目录与四类JSON配置优先级
- 熟练WXML模板语法：数据绑定、事件、条件/列表渲染
- 使用WXSS rpx单位完成页面布局美化
- 全局app.json、页面page.json差异化配置
- 常用内置组件（view/swiper/image/button）实战
- 小程序网络请求wx.request使用
- 团队协同、成员管理、代码上传审核发布全流程
补充：关键易混点汇总
- 首页修改：调整app.json pages数组第一项
- 页面自动生成：pages数组新增路径，工具自动创建4页面文件
- 导航栏样式：页面json > app.json window
- sitemap提示开关（checkSiteMap）≠ 页面收录开关（action）
- wx:if销毁节点，hidden仅隐藏样式；循环必须加wx:key优化性能
- 事件不能直接传参，依靠data-*自定义属性传递参数
- JS无DOM/BOM，只能通过setData驱动页面更新
- 代码发布必须经腾讯审核，审核通过才能对外提供访问
需要我把这份总结整理成PPT逐页文案（每页标题+要点+配图说明）直接可用吗？
