MODULE 01 · 入门 / 环境搭建

微信小程序入门与环境搭建(第 1-4 集)

认识"即用即走、依托微信生态"的小程序,完成账号申请与开发者工具安装,看懂目录结构与四类文件分工,跑通第一个小程序。

四步入门路径
1
认识小程序定位与前景
即用即走
2
申请账号公众平台注册
获取 AppID
3
装工具微信开发者工具
扫码登录
4
看结构四类文件分工
Hello World
小程序 vs 网页 vs 原生 App

微信小程序

运行在微信内,无需安装、即用即走;可调用微信原生能力(登录/支付/分享),受平台规范约束。

网页 H5

运行在浏览器,跨平台、可被搜索引擎收录;但能力受浏览器限制,体验与原生有差距。

原生 App

需下载安装,性能与体验最好、能力最全;但开发与获客成本高,迭代慢。

四类文件的分工
.wxml

结构

类比 HTML,用 view/text/button 等组件搭页面,支持数据绑定与事件。

.wxss

样式

类比 CSS,新增 rpx 单位;app.wxss 全局、页面 wxss 局部。

.js

逻辑

app.js 注册 App,页面 js 用 Page() 定义数据、生命周期与事件。

.json

配置

app.json 全局配置、页面 json 单页配置;标准 JSON,不能写注释。

开发者工具核心能力
三大面板模拟器 / 编辑器 / 调试器
  • 模拟器:模拟手机运行,可切机型与网络
  • 编辑器:目录树、代码提示与格式化
  • 调试器:Console / Network / Storage / AppData / Wxml
高频操作
  • 编译:重新构建刷新;可自定义编译条件
  • 预览 / 真机调试:手机扫码看真实效果
  • 上传:生成开发版本,再提交审核发布
  • 清缓存:排查"改了不生效"的利器
📝 素材说明:第 1 集据本地 AI 总结整理;第 2、3、4 集依据课程大纲与微信官方标准流程补全;实际界面以你安装的开发者工具稳定版与官方文档为准。
模块一 · 入门与环境搭建 | 配套飞书分册文档