微信小程序开发入门教程：从零开始搭建开发环境

2301_79158971

644人浏览 · 2026-04-06 14:31:59

2301_79158971 · 2026-04-06 14:31:59 发布

摘要

本文为微信小程序开发新手提供完整的入门指南，涵盖开发工具安装、环境配置、项目创建到第一个小程序的运行全过程。无论你是前端开发者还是编程初学者，都能通过本教程快速上手微信小程序开发。

1. 开发工具下载与安装

1.1 下载微信开发者工具

微信官方提供了专门的开发者工具，支持Windows、macOS和Linux系统。

下载步骤：

访问微信官方开发者工具下载页面
根据你的操作系统选择对应版本
建议下载稳定版（Stable Version）

1.2 安装步骤

Windows系统：

双击下载的.exe安装文件
选择安装路径（建议使用默认路径）
等待安装完成
创建桌面快捷方式

macOS系统：

将.dmg文件拖入应用程序文件夹
首次打开时可能需要系统权限授权
在安全性与隐私设置中允许运行

Linux系统：

解压下载的.tar.gz文件
运行安装脚本或直接执行可执行文件

2. 环境配置详解

2.1 注册微信小程序账号

在开始开发前，你需要先注册小程序账号：

访问微信公众平台官网
点击"立即注册"，选择"小程序"
填写邮箱、密码等基本信息
登录邮箱激活账号
完善主体信息（个人或企业）
获取AppID（开发必备）

2.2 开发者工具配置

首次打开微信开发者工具需要进行基础配置：

登录账号：使用微信扫码登录
设置工作空间：选择项目存放目录
配置编辑器：
- 选择主题（深色/浅色）
- 设置字体大小
- 配置代码提示
插件安装（可选）：
- WXML格式化插件
- 代码片段插件
- Git版本控制插件

2.3 开发环境检查

运行环境检查命令确保所有依赖正常：

# 检查Node.js环境（如果需要）
node --version

# 检查npm包管理器
npm --version

3. 创建第一个小程序项目

3.1 新建项目步骤

打开微信开发者工具
点击"+"或"新建项目"
填写项目信息：
- 项目名称：MyFirstMiniProgram
- 目录：选择项目存放路径
- AppID：填写你获取的AppID（或使用测试号）
- 开发模式：小程序
- 后端服务：不使用云服务（初学者建议）
点击"新建"

3.2 项目模板选择

微信开发者工具提供多种模板：

空白模板：最基础的模板
快速启动模板：包含基础页面结构
云开发模板：集成云开发能力
自定义模板：使用自己的模板

初学者建议选择"快速启动模板"。

4. 项目结构解析

创建项目后，你会看到以下目录结构：

my-first-miniprogram/
├── pages/                 # 页面目录
│   ├── index/            # 首页
│   │   ├── index.js      # 页面逻辑
│   │   ├── index.json    # 页面配置
│   │   ├── index.wxml    # 页面结构
│   │   └── index.wxss    # 页面样式
│   └── logs/             # 日志页
├── utils/                # 工具类目录
│   └── util.js          # 工具函数
├── app.js               # 小程序逻辑
├── app.json             # 小程序配置
├── app.wxss             # 全局样式
└── project.config.json  # 项目配置

4.1 核心文件说明

app.json - 全局配置

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "我的小程序",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

app.js - 小程序逻辑

// app.js
App({
  onLaunch() {
    // 小程序初始化时执行
    console.log('小程序启动了');
  },
  globalData: {
    userInfo: null
  }
})

5. 编写第一个页面

5.1 修改首页内容

打开pages/index/index.wxml，修改内容：

<!-- index.wxml -->
<view class="container">
  <text class="title">欢迎来到我的小程序！</text>
  <view class="content">
    <text>这是第一个小程序页面</text>
  </view>
  <button bindtap="onTapButton">点击我</button>
</view>

5.2 添加页面样式

修改pages/index/index.wxss：

/* index.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.title {
  font-size: 24px;
  color: #07c160;
  margin-bottom: 20px;
}

.content {
  font-size: 16px;
  color: #333;
  margin-bottom: 30px;
}

button {
  background-color: #07c160;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

5.3 添加交互逻辑

修改pages/index/index.js：

// index.js
Page({
  data: {
    message: 'Hello MiniProgram!'
  },
  
  onTapButton() {
    wx.showToast({
      title: '按钮被点击了！',
      icon: 'success'
    })
  },
  
  onLoad() {
    console.log('页面加载完成');
  }
})