第一个小程序

你的第一行小程序代码跑起来了

📖知识引入

🆕新建项目

打开开发者工具→新建项目→填项目名和路径→选「不使用云服务」→填AppID（或测试号）→创建，一个模板项目就诞生了。

📁项目结构

pages文件夹放页面；app.json是全局配置（页面总清单）；app.js是全局逻辑。每个页面有自己的「四件套」文件。

🖥️模拟器秒刷新

工具右侧的「小手机」就是模拟器。代码一保存，它0.1秒刷新，不用真机就能看到效果，改样式超方便。

👋默认欢迎页

新项目自带Hello World示例：头像、文字、按钮全是代码写的。别小看它，读一遍就能学会页面基本结构。

✏️第一次修改

找到pages/index/index.wxml里的文字，改成你的名字，按Ctrl+S保存——模拟器立刻变化，这就是开发的快乐！

💡

一个页面=四件套：结构.wxml+样式.wxss+逻辑.js+配置.json

🔍项目文件地图

miniprogram/
├── app.json        # 全局配置（页面清单）
├── app.js          # 全局逻辑
├── app.wxss        # 全局样式
└── pages/
    └── index/
        ├── index.wxml   # 页面结构（骨架）
        ├── index.wxss   # 页面样式（衣服）
        ├── index.js     # 页面逻辑（大脑）
        └── index.json   # 页面配置（档案）

改一下试试：

打开 pages/index/index.wxml 找到显示文字的text标签改成： <text>你好，我是小程序！</text>

按下 Ctrl+S 保存 │ ▼ 模拟器立刻刷新 │ ▼ 看到你自己的文字了 🎉

恭喜！你完成了第一次「修改→保存→看到效果」的开发循环！

🎯小测验

第1题：app.json的作用是？

第2题：一个小程序页面通常由几个文件组成？

第3题：修改代码后想看到效果，应该？

📝本课知识点

✓新建项目只需填名称和AppID
✓pages放页面，app.json管全局
✓页面四件套：wxml/wxss/js/json
✓模拟器保存即刷新
✓第一次修改文字就是开发起点

第4课完成！继续探索下一课吧 🚀

💚

上一课

第3课

下一课

第5课

💚