微信小程序开发——第二章：微信小程序开发环境搭建

项目	内容
邮箱	用于注册（未注册其他公众平台）
小程序名称	可暂定，后期可修改
主体信息	个人、企业或组织
密码设置	登录小程序后台使用

步骤三：邮箱激活

填写邮箱后，微信会发送一封激活邮件，点击邮件中的链接完成验证。

步骤四：填写主体信息

选择主体类型（建议学生选择 个人类型 ）

不同类型的权限不同：

主体类型	说明
个人	适合个人练习或小项目
企业	可发布商业类小程序
政府/组织	公共服务类应用

步骤五：获取 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`

负责全局逻辑、生命周期控制，如程序启动、页面切换等。

javascript 复制代码

App({
  onLaunch() {
    console.log('小程序启动成功')
  }
})

（2）`app.json`

定义全局配置，如页面路径、导航栏颜色、窗口样式。

javascript 复制代码

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "我的小程序",
    "navigationBarBackgroundColor": "#ffffff"
  }
}

（3）`app.wxss`

定义全局样式，类似 CSS。

javascript 复制代码

page {
  background-color: #f5f5f5;
}

（4）页面文件结构

以 pages/index/ 为例：

文件	说明
`index.wxml`	页面结构（类似HTML）
`index.wxss`	页面样式（类似CSS）
`index.js`	页面逻辑代码
`index.json`	页面单独配置

2.5 编写第一个小程序

现在我们来写一个 Hello World 示例 👇

第一步：编辑 `index.wxml`

javascript 复制代码

<view class="container">
  <text class="title">Hello 小程序!</text>
  <button bindtap="sayHello">点击问好</button>
</view>

第二步：编辑 `index.wxss`

javascript 复制代码

.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`

javascript 复制代码

Page({
  data: {
    name: '开发者'
  },
  sayHello() {
    wx.showToast({
      title: '你好，' + this.data.name + '!',
      icon: 'none'
    })
  }
})

第四步：运行查看

点击"编译"，在模拟器中可以看到：

javascript 复制代码

Hello 小程序！
[点击问好]

点击按钮会弹出提示 "你好，开发者！" 🎉

2.6 小程序的生命周期函数

（1）全局生命周期函数（在 `app.js` 中）

函数	触发时机
`onLaunch()`	小程序初始化时
`onShow()`	小程序启动或从后台进入前台
`onHide()`	小程序从前台进入后台

（2）页面生命周期函数（在 `index.js` 中）

函数	说明
`onLoad()`	页面加载时执行（带参数）
`onShow()`	页面显示时执行
`onReady()`	页面首次渲染完成
`onHide()`	页面隐藏
`onUnload()`	页面卸载时

示例：

javascript 复制代码

Page({
  onLoad() {
    console.log('页面加载')
  },
  onShow() {
    console.log('页面显示')
  }
})

2.7 项目配置详解（`project.config.json`）

这个文件由开发者工具自动生成，用于保存编辑器设置：

javascript 复制代码

{
  "miniprogramRoot": "pages/",
  "setting": {
    "urlCheck": true,
    "es6": true,
    "minified": false
  },
  "appid": "wx1234567890abcd"
}

通常不需要手动修改。

2.8 本章小结

内容	要点
注册	在微信公众平台注册小程序账号，获取AppID
工具	安装"微信开发者工具"并登录
创建项目	使用AppID新建项目
文件结构	理解 app.js / app.json / app.wxss / pages/ 目录作用
实践	完成第一个 "Hello 小程序" 实例

学完本章后，你就应当能够...

注册微信小程序账号
正确安装与使用开发者工具
理解小程序项目的结构与配置文件
能够创建并运行第一个小程序项目