从0到1打造你的第一个微信小程序
一、前言：为什么从"第一个小程序"开始？
学习任何新技术，动手写第一个"Hello World"都是最有效的入门方式。对于微信小程序来说，你的"第一个小程序"不仅能让你熟悉开发流程，还能建立对小程序结构、语法和调试方式的直观认知。本文将带你：
✅ 注册小程序账号（测试号免审核）
✅ 安装并配置开发者工具
✅ 创建项目并理解目录结构
✅ 编写一个显示"Hello, 我的第一个小程序!"的页面
✅ 真机预览与调试技巧
💡无需服务器、无需域名、无需企业资质------ 使用测试号即可本地开发！
二、准备工作：账号与工具
- 注册小程序账号
测试号（推荐）：访问微信公众平台，选择"小程序"->"前往注册"->"测试号申请"，填写基本信息即可获得测试号，无需等待审核。
正式账号：若需发布上线，需完成企业/个人资质认证，流程相对复杂，适合有长期开发需求的用户。
- 安装开发者工具
下载地址：微信开发者工具官网
安装完成后，打开工具并扫码登录，选择"小程序"->"新建项目"，输入测试号的AppID（可在测试号管理页面获取），填写项目名称和存储路径，点击"确定"即可创建项目。
三、项目结构解析
创建项目后，你会看到以下目录结构：
├── app.js # 小程序入口文件，处理全局逻辑
├── app.json # 全局配置文件，定义页面路径、窗口样式等
├── app.wxss # 全局样式文件，作用于所有页面
├── project.config.json # 项目配置（自动生成，无需手动修改）
└── pages/ # 页面目录，每个页面包含四个文件
└── index/
├── index.js # 页面逻辑文件
├── index.json # 页面配置文件
├── index.wxml # 页面结构文件
└── index.wxss # 页面样式文件
核心概念：
.wxml：WeiXin Markup Language，用于描述页面结构，类似HTML，但有自己的标签（如<view>、<text>、<button>）。
.wxss：WeiXin Style Sheet，用于设置样式，类似CSS，但支持响应式单位rpx（1rpx = 屏幕宽度 / 750）。
.js：处理交互逻辑，如事件绑定、数据处理等。
.json：配置文件（无注释，纯JSON），用于设置页面标题、导航栏样式等。
四、编写你的第一个页面
我们来修改默认页面，让它显示："Hello, 我的第一个小程序!"，并添加一个点击按钮。
- 修改index.wxml（页面结构）
<view class="container">
<text class="title">Hello, 我的第一个小程序!</text>
<button bindtap="showToast" class="btn">点击我</button>
</view>
- 修改index.wxss（页面样式）
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f5f5f5;
}
.title {
font-size: 32rpx;
color: #333;
margin-bottom: 30rpx;
}
.btn {
width: 200px;
background-color: #07c160;
color: white;
border-radius: 5px;
}
💡 注意：小程序使用rpx作为响应式单位，能自动适配不同屏幕尺寸的手机。
- 修改index.js（交互逻辑）
Page({
showToast() {
wx.showToast({
title: '你点击了按钮!',
icon: 'success'
})
}
})
- 修改index.json（页面配置）
{
"navigationBarBackgroundColor": "#07c160",
"navigationBarTitleText": "我的第一个小程序",
"navigationBarTextStyle": "white"
}
五、运行与预览
- 模拟器预览
保存所有文件（Ctrl+S / Cmd+S），开发者工具左侧会自动编译并刷新模拟器。点击按钮，查看toast提示。
- 真机预览（需微信扫码）
点击工具栏【预览】，微信扫码即可在手机上体验。
⚠️ 注意：测试号真机预览有次数限制（每天约5次）。
六、小程序运行原理与生命周期
- 全局生命周期（app.js）
app.js中的App({})函数是小程序的构造函数，整个小程序从这里开始执行。其中：
onLaunch：小程序启动时触发，只执行一次，适合做初始化操作（如获取用户信息、加载全局数据）。
onShow：小程序从后台进入前台时触发。
onHide：小程序从前台进入后台时触发。
示例：
App({
onLaunch() {
console.log('小程序启动了!')
// 可以在这里调用API获取用户信息
wx.getUserInfo({
success: res => {
console.log('用户信息:', res.userInfo)
}
})
},
onShow() {
console.log('小程序显示了!')
},
onHide() {
console.log('小程序隐藏了!')
}
})
- 页面生命周期（index.js）
每个页面的Page({})函数中包含页面的生命周期函数：
onLoad：页面加载时触发，只执行一次，适合接收页面参数。
onShow：页面显示时触发，每次打开页面都会执行。
onReady：页面初次渲染完成时触发，适合操作DOM。
onHide：页面隐藏时触发。
onUnload：页面卸载时触发。
示例：
Page({
onLoad(options) {
console.log('页面加载了，参数:', options)
},
onShow() {
console.log('页面显示了!')
},
onReady() {
console.log('页面渲染完成了!')
}
})
七、常见问题解答(FAQ)
❓ Q1: 为什么保存后页面没更新?
A: 检查文件是否保存成功；确保没有语法错误（如JSON格式错误，JSON文件中不能有注释）。
❓ Q2: 能否用Vue/React写小程序?
A: 可以使用第三方框架（如Taro、uni-app），它们支持用Vue/React语法开发小程序，最终编译为微信小程序原生代码。但新手建议先掌握原生开发，再学习框架。
❓ Q3: 真机预览时提示"该小程序已被删除"?
A: 测试号的AppID可能已过期，需重新申请测试号并更新项目配置中的AppID。
八、总结与下一步
通过本文，你已经完成了第一个小程序的开发，掌握了：
小程序的基本结构和核心文件作用
页面布局、样式和交互逻辑的编写
模拟器和真机预览的调试方法
全局和页面生命周期的基本概念
下一步，你可以尝试：
学习小程序API，如网络请求（wx.request）、本地存储（wx.setStorageSync）等。
开发多页面小程序，使用wx.navigateTo进行页面跳转。
了解小程序云开发，无需搭建服务器即可实现数据库、云函数等功能。
小程序生态丰富，应用场景广泛，从电商、资讯到工具类应用应有尽有。只要坚持实践，你很快就能开发出实用的小程序！