入门小程序制作教程
-
2026-10-28
昆明
- 返回列表
在移动互联网时代，小程序以其“无需下载、即用即走”的轻量级体验，成为连接用户与服务的重要桥梁。无论是个人展示、小型电商还是生活服务工具，开发一款属于自己的小程序已不再是程序员的专属。本文将为你提供一份清晰、详尽的零基础入门指南，从环境搭建到上架发布，带你一步步完成第一个小程序作品。
第一步：前期准备与开发环境搭建
在开始编码之前，你需要做好以下几项准备工作。
1. 明确小程序类型与功能
个人/展示类： 如个人作品集、博客、活动邀请函。功能侧重内容展示与信息传递。
工具/服务类： 如计算器、打卡工具、查询助手。功能核心是解决某个具体问题。
电商/商业类： 如线上小店、预约系统。功能涉及商品展示、交易与用户管理。
对于初学者，建议从功能简单的展示类或工具类小程序入手。
2. 注册小程序账号
访问微信公众平台官网，点击“迅速注册”，选择注册类型为“小程序”。
使用邮箱激活账号，并按要求填写主体信息（个人开启者选择“个人”类型即可）。
完成注册后，登录小程序后台，在“设置”-“基本设置”中完善小程序名称、头像、介绍等信息，并获取至关重要的 AppID。
3. 安装开启者工具
前往微信开启者工具下载页面，根据你的电脑操作系统（Windows/Mac）下载稳定版安装包。
完成安装后打开工具，使用微信扫码登录。
点击“新建项目”，填入项目名称、目录（选择一个空文件夹），并蕞关键的一步：填入你在后台获取的 AppID。后端服务建议初选“不使用云服务”，点击“新建”。
至此，一个包含基础模板的小程序项目已经创建完成，你将看到默认的“Hello World”页面。
第二步：认识小程序项目结构
开启者工具左侧是项目文件树，理解核心文件的作用是学习的第一步。
`app.js`: 小程序的逻辑入口文件，用于注册小程序，定义全局数据和生命周期函数。
`app.json`: 小程序的全局配置文件。在这里可以设置小程序由哪些页面组成、窗口样式（导航栏标题、背景色等）、网络超时时间等。
`app.wxss`: 小程序的全局样式表，写法类似于网页的CSS，用于定义全局的样式规则。
`pages` 目录: 存放所有小程序页面的文件夹。每个页面通常由四个同名但后缀不同的文件组成：
`.js` 文件：页面的逻辑文件，处理数据、交互事件。
`.json` 文件：页面的配置文件，可覆盖`app.json`中的窗口设置。
`.wxml` 文件：页面的结构文件，类似HTML，用于描述页面布局和组件。
`.wxss` 文件：页面的样式文件，类似CSS，用于定义该页面的样式。
第三步：编写第一个页面：WXML与WXSS
让我们修改默认的首页，创建一个简单的自我介绍页面。
1. 修改WXML结构
打开 `pages/index/index.wxml` 文件，清空原有内容，替换为：
```html
```
这里使用了 `
2. 添加样式WXSS
打开 `pages/index/index.wxss` 文件，添加样式：
```css
container {
display: flex;
flex-direction: column;
align-items: center;
padding: 40rpx;
avatar {
width: 200rpx;
height: 200rpx;
border-radius: 50%;
margin-bottom: 40rpx;
border: 4rpx solid 07c160;
name {
font-size: 40rpx;
font-weight: bold;
color: 333;
margin-bottom: 20rpx;
intro {
font-size: 28rpx;
color: 666;
margin-bottom: 50rpx;
text-align: center;
card {
background-color: f9f9f9;
border-radius: 16rpx;
padding: 30rpx;
width: 优质成分;
card text {
display: block;
font-size: 28rpx;
line-height: 1.8;
color: 555;
```
注意单位使用 `rpx`（响应式像素），能自适应不同屏幕宽度。请将你的头像图片命名为 `avatar.png` 放入项目根目录的 `/images/` 文件夹中。
第四步：实现页面交互：JS逻辑
让页面“动”起来，响应用户操作。
1. 添加按钮和绑定事件
在 `index.wxml` 文件的 `.card` 视图后添加一个按钮：
```html
```
`bindtap` 是点击事件绑定，`onContactTap` 是事件处理函数名。
2. 编写JS事件处理函数
打开 `pages/index/index.js` 文件，在 `Page({})` 函数的大括号内，`data` 数据域之后，添加事件函数：
```javascript
Page({
// 页面初始数据
},
onContactTap: function {
wx.showModal({
title: '联系方式',
content: '邮箱：',
showCancel: false,
confirmText: '知道了'
})
})
```
保存后，在模拟器中点击按钮，会弹出一个模态对话框。你还可以尝试使用 `wx.makePhoneCall` 实现拨打电话等功能。
第五步：添加新页面与路由跳转
一个完整的小程序通常有多个页面。
1. 新建页面
在 `app.json` 文件的 `"pages"` 数组中手动添加一条路径，例如：
```json
pages": [
pages/index/index",
pages/about/about
],
```
保存后，开启者工具会自动在 `pages` 目录下生成 `about` 文件夹及四个页面文件。
2. 配置页面并实现跳转
在 `about` 页面的 `.wxml` 和 `.wxss` 中简单编写一个“关于我们”页面。
回到首页 `index.js`，添加一个新的跳转函数：
```javascript
goToAboutPage: function {
wx.navigateTo({
url: '/pages/about/about'
})
```
在首页 `index.wxml` 中添加一个按钮并绑定此函数：
```html
```
第六步：真机预览与调试
在模拟器上运行无误后，必须在真机上测试。
1. 点击开启者工具工具栏上的“预览”按钮。
2. 使用小程序管理员或项目成员的微信扫码，即可在手机微信上实时运行当前开发版小程序。
3. 在手机上检查布局、交互是否正常，并利用开启者工具提供的“远程调试”功能，在电脑上查看手机端的运行日志和错误信息，方便排查问题。
第七步：代码审核与发布上线
当小程序功能开发完成并充分测试后，就可以准备发布了。
1. 上传代码：在开启者工具点击“上传”按钮，填写版本号和项目备注，将代码提交到微信服务器。
2. 提交审核：登录微信公众平台小程序后台，在“管理”-“版本管理”中找到上传的开发版本，提交审核。需按要求填写功能描述、设置测试账号等。
3. 发布：审核通过后（通常需要1-7个工作日），你可以在版本管理中点击“发布”，小程序将正式对所有微信用户开放搜索和访问。
