微信小程序开发笔记：从零开始创建欢迎页

开发中的每一个小细节，都值得被记录

今天在学习微信小程序开发时，做了一个简单的欢迎页面。这个看似基础的操作，其实包含了小程序开发的几个核心概念。让我通过这篇笔记，把整个过程记录下来，既是对知识的巩固，也希望能帮助到同样在学习的小伙伴。

📱 最终效果预览

我们先来看看要做成什么样：

  • 一个居中的头像
  • 一句”Hello World”的 motto
  • 一个橙色的”开启微信之旅”按钮
  • 整体布局简洁大方

🚀 一步一步来实现

第一步：创建页面文件

在微信开发者工具中，操作非常简单：

  1. 在 pages 目录下新建 welcome 目录
  2. 右键点击 welcome 目录，选择”新建Page”

✨ 神奇的事情发生了！开发者工具会自动帮我们生成4个文件：

  • welcome.wxml - 页面结构文件
  • welcome.wxss - 页面样式文件
  • welcome.ts - 页面逻辑文件
  • welcome.json - 页面配置文件

这就是小程序开发的便捷之处，一个操作就能把页面所需的基础文件都创建好。

第二步：编写页面结构（WXML）

打开 welcome.wxml，编写我们的页面结构：

1
2
3
4
5
6
7
8
<!--pages/welcome/welcome.wxml-->
<view class="container">
  <image class="avatar" src="/images/avatar/B00041_2.png"></image>
  <text class="motto">Hello World</text>
  <view class="btn">
    <text class="btn-text">开启微信之旅</text>
  </view>
</view>

知识点小记：

  • /images/avatar/B00041_2.png 这个路径的根目录指的是小程序项目的根目录
  • 在 WXML 中，我们使用 view 作为容器，image 显示图片，text 展示文字

第三步：美化页面样式（WXSS）

接下来让我们的页面变得好看一些。打开 welcome.wxss：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* pages/welcome/welcome.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  margin-top: 160rpx;
}

.motto {
  margin-top: 100rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #9F4311;
}

.btn {
  margin-top: 200rpx;
  border: 1px solid #EA5A3C;
  width: 200rpx;
  height: 80rpx;
  border-radius: 5rpx;
  text-align: center;
}

.btn-text {
  font-size: 22rpx;
  font-weight: bold;
  line-height: 80rpx;
  color: #EA5A3C;
}

样式要点：

  • 使用 flex 布局实现居中
  • rpx 单位是小程序的响应式像素，会自动适配不同屏幕
  • border-radius: 50% 让头像变成圆形
  • 按钮通过 border 添加边框，line-height 实现文字垂直居中

第四步：设置为启动页

最后一步，让小程序启动时默认显示我们刚创建的欢迎页。

打开项目根目录下的 app.json 文件，调整 pages 数组的顺序：

1
2
3
4
5
6
7
8
{
  "pages": [
    "pages/welcome/welcome",
    "pages/index/index",
    "pages/logs/logs"
  ],
  // ... 其他配置
}

原理说明： pages 数组中的第一个路径，就是小程序启动时默认加载的页面。

💡 知识点总结

通过这个简单的案例，我们接触到了：

  1. 小程序目录结构 - pages 目录存放所有页面，每个页面独立的文件
  2. 自动创建页面 - 右键新建Page的便捷操作
  3. WXML 基础标签 - view、image、text 的使用
  4. WXSS 样式编写 - flex布局、rpx单位、边框圆角等
  5. 页面注册机制 - app.json 中的 pages 配置

🔍 踩坑提醒

在开发过程中，有几个容易出错的地方：

  1. 图片路径要准确 - /images 是从项目根目录开始的
  2. 文件名不要搞混 - 4个同名文件要放在同一个目录下
  3. app.json 修改后要保存 - 可能需要重新编译才能生效

📝 最后

这个小案例虽然简单，但涵盖了一个小程序页面从创建到展示的完整流程。每一个大项目都是从这样的小步骤开始的，希望这篇笔记对你有帮助。

如果你也在学习小程序开发，欢迎在评论区交流心得，或者分享你在学习中遇到的问题。我们一起进步！

#微信小程序 #前端开发 #编程学习 #开发笔记

记录于学习小程序开发的第一周