微信小程序 完整独立技术文档

一、微信小程序是什么

微信小程序是微信生态内的轻量级应用，无需下载安装、扫码即用、内嵌在微信里运行，不用下载 APP，不占手机内存。

定位：

介于 H5 网页 和 原生 APP 中间的一种形态

• 比普通 H5体验更好、更流畅、有原生质感
• 比原生 APP开发成本低、不用应用商店上架、依托微信流量

属于大前端范畴，会 Vue 就能快速上手小程序。

二、为什么会出现微信小程序

1. 原生 APP 安装麻烦、占用存储空间、推广成本高
2. 普通手机 H5 权限弱：没法获取微信登录、支付、通讯录、定位等能力
3. H5 在微信里性能差、页面卡顿、体验不如原生
4. 线下门店、商家、工具类应用没必要做独立 APP，小程序刚好够用
5. 微信要构建自身生态，把服务全部留在微信内部

三、小程序底层架构（核心重点）

小程序不是浏览器网页，不是 HTML + DOM 那套。

双线程分离架构

1. 渲染层

   负责页面结构、样式、展示

   对应文件：WXML + WXSS

2. 逻辑层

   负责业务逻辑、接口请求、数据处理

   对应文件：JS

两层完全隔离，没有 DOM、没有 BOM，不能操作 document /window

靠数据驱动视图，和 Vue 思想一模一样。

四、小程序页面四大文件（必记）

每个小程序页面固定 4 个文件：

表格

文件	作用	对标 Web 前端
.wxml	页面结构标签	等价 HTML
.wxss	页面样式	等价 CSS / SCSS
.js	业务逻辑、生命周期、接口	等价 Vue 的 script
.json	页面配置（标题、导航栏、颜色）	页面单独配置文件

五、小程序语法 和 Vue 对比

你现在会 Vue3，小程序对你几乎零学习成本：

1. 模板语法高度相似

表格

功能	小程序	Vue
插值渲染	{{ name }}	{{ name }}
条件渲染	wx:if / wx:else	v-if / v-else
列表循环	wx:for	v-for
绑定点击事件	bindtap	@click
动态属性	src="{{ url }}"	:src="url"

2. 数据驱动

和 Vue 一样：修改数据自动更新页面，不用操作 DOM。

3. 生命周期

小程序也有：页面加载、显示、隐藏、卸载，逻辑和 Vue 生命周期思想一致。

唯一区别

小程序没有 DOM 和 BOM，不能操作节点，只能数据驱动；

标签不是 div/p/span，是小程序专属标签 view/text/image。

六、小程序独有核心特性

1. 独有单位 rpx

• 适配手机神器
• 设计稿统一按 750px 基准
• 自动适配所有手机屏幕，不用自己写媒体查询、vw

2. 微信原生能力

自带封装好的官方 API：

• 微信一键登录
• 微信支付
• 获取定位、摄像头、相册
• 分享好友 / 朋友圈
• 授权、手机号获取

普通 H5 拿不到这些权限，小程序可以。

3. 双线程更流畅

渲染层和逻辑层分离，JS 逻辑阻塞不会卡死页面渲染，比普通 H5 流畅。

4. 分包加载

大项目拆分成多个包，打开先加载首页，其他页面按需加载，启动速度快。

七、开发小程序的两种方式

方式 1：原生微信小程序

用官方语法、官方标签、微信开发者工具开发

适合：简单小项目、学习原理

缺点：语法独立、不能复用 Vue 技术、多端难兼容

方式 2：框架开发（企业主流⭐推荐）

UniApp / Taro

• 用Vue 语法写代码

• 一套代码同时编译成：

  微信小程序 + 支付宝小程序 + H5 网页 + 安卓 /iOS APP

• 支持 Vite、SCSS、组件化、Pinia 同类状态管理

你现在学的 Vue3 + Vite + SCSS + pnpm

直接无缝上手 UniApp，不用学新语法。

企业 90% 小程序项目都是用 UniApp 基于 Vue 开发，没人手写原生小程序了。

八、小程序 vs H5 vs 原生 APP

表格

对比	微信小程序	手机 H5	原生 APP
是否安装	无需安装	无需安装	需要下载安装
开发难度	中等（会 Vue 就会）	低	高
微信权限	全开放	受限	原生权限
流畅度	接近原生	一般、容易卡顿	最好
推广成本	极低（微信流量）	一般	高
适用场景	商家、工具、商城、预约	官网、活动页	大型高频应用

九、前端为什么必须会小程序

1. 市场需求大：几乎所有线下门店、商家、公司都要有小程序
2. 技术复用：会 Vue = 会 UniApp 小程序，学习成本极低
3. 求职加分：前端简历必备技能点
4. 可接私活：小程序私活单价高、单子多
5. 大前端必经之路：网页 → Vue → 小程序 → 跨端 APP

十、你现在的学习优势

你已经掌握：

• HTML / CSS / SCSS
• JavaScript ES6
• Vue3 / Vite / Pinia / 路由
• 浏览器 DOM/BOM/ HTTP

直接可以学 UniApp 开发小程序，不用重新学新语法，一两天就能上手写项目。

十一、总结一句话

微信小程序是微信生态内免安装的轻应用，采用双线程数据驱动架构；

不用浏览器 DOM，语法和 Vue 高度相似，企业现在都用 UniApp + Vue 开发小程序，一套代码多端发布，是前端必学、求职刚需技能。

需要我给你整理一份：UniApp 快速入门 + 和 Vue 差异对照表，你可以直接开始练小程序吗？