微信小程序开发——第二章：微信小程序开发环境搭建
目录
编辑
第2章：微信小程序开发环境搭建
2.1 注册微信小程序账号
步骤一：访问官方网站
步骤二：填写基本信息
步骤三：邮箱激活
步骤四：填写主体信息
步骤五：获取 AppID
2.2 安装微信开发者工具
下载地址
界面结构简介
2.3 创建第一个小程序项目
步骤一：点击“+ 创建项目”
项目结构介绍
2.4 理解核心文件
（1）app.js
（2）app.json
（3）app.wxss
（4）页面文件结构
2.5 编写第一个小程序
第一步：编辑 index.wxml
第二步：编辑 index.wxss
第三步：编辑 index.js
第四步：运行查看
2.6 小程序的生命周期函数
（1）全局生命周期函数（在 app.js 中）
（2）页面生命周期函数（在 index.js 中）
2.7 项目配置详解（project.config.json）
2.8 本章小结
学完本章后，你就应当能够..
第2章：微信小程序开发环境搭建
这一章是小程序开发的起点，主要讲解如何：
-
注册并获取小程序 AppID
-
安装并使用微信开发者工具
-
创建第一个项目（Hello World）
-
了解项目目录结构与基础配置
2.1 注册微信小程序账号
步骤一：访问官方网站
打开浏览器访问 https://mp.weixin.qq.com/
点击右上角的【注册】按钮，选择【小程序】。
步骤二：填写基本信息
你需要准备以下资料：
| 项目 | 内容 |
|---|---|
| 邮箱 | 用于注册（未注册其他公众平台） |
| 小程序名称 | 可暂定，后期可修改 |
| 主体信息 | 个人、企业或组织 |
| 密码设置 | 登录小程序后台使用 |
步骤三：邮箱激活
填写邮箱后，微信会发送一封激活邮件，点击邮件中的链接完成验证。
步骤四：填写主体信息
选择主体类型（建议学生选择 个人类型）
不同类型的权限不同：
| 主体类型 | 说明 |
|---|---|
| 个人 | 适合个人练习或小项目 |
| 企业 | 可发布商业类小程序 |
| 政府/组织 | 公共服务类应用 |
步骤五：获取 AppID
注册完成后，在【开发管理 → 开发设置】中可以看到你的 AppID。
AppID 相当于小程序的“身份证”，每个小程序唯一对应一个 AppID。
2.2 安装微信开发者工具
下载地址
前往 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
支持：
-
Windows
-
macOS
安装完成后，打开微信扫码登录即可。
界面结构简介
打开开发者工具后，界面大致分为以下区域：
| 区域 | 功能 |
|---|---|
| 模拟器 | 模拟微信客户端运行效果 |
| 编辑器 | 编写代码（WXML/WXSS/JS/JSON） |
| 调试面板 | 查看日志、网络请求、数据等 |
| 终端 | 输出运行日志或错误信息 |
2.3 创建第一个小程序项目
步骤一：点击“+ 创建项目”
填写以下信息：
| 项目项 | 内容 |
|---|---|
| AppID | 填写刚才获取的AppID（或选择“测试号”） |
| 项目名称 | MyFirstApp |
| 目录 | 选择一个文件夹 |
| 模板 | 选择“JavaScript” |
| 云开发 | 可暂时选择“否” |
点击【确定】后，系统会自动生成项目结构。
项目结构介绍
MyFirstApp/ ├── app.js # 全局逻辑文件（入口） ├── app.json # 全局配置文件（定义页面路径、窗口样式等） ├── app.wxss # 全局样式文件（类似CSS） ├── pages/ │ ├── index/ │ │ ├── index.wxml # 页面结构 │ │ ├── index.wxss # 页面样式 │ │ ├── index.js # 页面逻辑 │ │ └── index.json # 页面配置 └── project.config.json # 项目配置（工具相关）
2.4 理解核心文件
（1）app.js
负责全局逻辑、生命周期控制，如程序启动、页面切换等。
App({onLaunch() {console.log('小程序启动成功')}
})
（2）app.json
定义全局配置，如页面路径、导航栏颜色、窗口样式。
{"pages": ["pages/index/index"],"window": {"navigationBarTitleText": "我的小程序","navigationBarBackgroundColor": "#ffffff"}
}
（3）app.wxss
定义全局样式，类似 CSS。
page {background-color: #f5f5f5;
}
（4）页面文件结构
以 pages/index/ 为例：
| 文件 | 说明 |
|---|---|
index.wxml | 页面结构（类似HTML） |
index.wxss | 页面样式（类似CSS） |
index.js | 页面逻辑代码 |
index.json | 页面单独配置 |
2.5 编写第一个小程序
现在我们来写一个 Hello World 示例 👇
第一步：编辑 index.wxml
<view class="container"><text class="title">Hello 小程序!</text><button bindtap="sayHello">点击问好</button>
</view>
第二步：编辑 index.wxss
.container {display: flex;flex-direction: column;align-items: center;margin-top: 200rpx;
}
.title {font-size: 36rpx;color: #333;margin-bottom: 50rpx;
}
button {background-color: #1aad19;color: #fff;
}
第三步：编辑 index.js
Page({data: {name: '开发者'},sayHello() {wx.showToast({title: '你好，' + this.data.name + '!',icon: 'none'})}
})
第四步：运行查看
点击“编译”，在模拟器中可以看到：
Hello 小程序！
[点击问好]
点击按钮会弹出提示 “你好，开发者！” 🎉
2.6 小程序的生命周期函数
（1）全局生命周期函数（在 app.js 中）
| 函数 | 触发时机 |
|---|---|
onLaunch() | 小程序初始化时 |
onShow() | 小程序启动或从后台进入前台 |
onHide() | 小程序从前台进入后台 |
（2）页面生命周期函数（在 index.js 中）
| 函数 | 说明 |
|---|---|
onLoad() | 页面加载时执行（带参数） |
onShow() | 页面显示时执行 |
onReady() | 页面首次渲染完成 |
onHide() | 页面隐藏 |
onUnload() | 页面卸载时 |
示例：
Page({onLoad() {console.log('页面加载')},onShow() {console.log('页面显示')}
})
2.7 项目配置详解（project.config.json）
这个文件由开发者工具自动生成，用于保存编辑器设置：
{"miniprogramRoot": "pages/","setting": {"urlCheck": true,"es6": true,"minified": false},"appid": "wx1234567890abcd"
}
通常不需要手动修改。
2.8 本章小结
| 内容 | 要点 |
|---|---|
| 注册 | 在微信公众平台注册小程序账号，获取AppID |
| 工具 | 安装“微信开发者工具”并登录 |
| 创建项目 | 使用AppID新建项目 |
| 文件结构 | 理解 app.js / app.json / app.wxss / pages/ 目录作用 |
| 实践 | 完成第一个 “Hello 小程序” 实例 |
学完本章后，你就应当能够...
-
注册微信小程序账号
-
正确安装与使用开发者工具
-
理解小程序项目的结构与配置文件
-
能够创建并运行第一个小程序项目