基于STM32的物联网环境监测与远程控制系统实训套件-淘宝网

任务1 搭建微信小程序开发环境

一、任务描述

本任务完成微信小程序本地开发环境搭建，包含开发工具下载安装、账号注册、基础配置、新建首个小程序项目，熟悉微信开发者工具界面布局与基础操作，为后续小程序 UI 界面编写、功能开发打下基础。

二、任务目标

1. 知识目标

1）了解微信小程序的运行机制、开发流程与生态规范。

2）掌握微信开发者工具的功能分区、常用组件与编译调试原理。

3）理解小程序项目目录结构、文件类型及各自作用。

4）知晓小程序账号、AppID 的获取方式与用途。

2. 能力目标

1）能够完成微信开发者工具的下载、安装与基础设置。

2）能够注册微信小程序账号，获取项目所需 AppID。

3）能够使用开发者工具新建空白小程序项目并正常编译运行。

4）能够识别工具界面各功能区域，掌握基础预览、调试操作。

3. 素质目标

1）培养前端开发规范、环境配置严谨的工作习惯。

2）提升软件安装、环境配置、问题自查与排错能力。

3）建立 “环境搭建→项目创建→编码调试” 的标准开发流程思维。

三、任务重难点

1. 任务重点

1）微信小程序官方账号注册、AppID 申请与查看。

2）微信开发者工具下载、安装、初始化配置。

3）新建小程序项目，正确填写项目信息并完成初始化。

4）认识小程序四大基础文件及项目整体目录结构。

2. 任务难点

1）区分测试号与正式 AppID 的使用场景。

2）项目创建时路径、名称、AppID 参数的正确填写。

3）理解小程序页面渲染、模拟器、调试器三者联动关系。

4）解决工具启动异常、编译报错、预览空白等基础问题。

四、知识准备

1.微信小程序基础介绍

微信小程序是一种无需下载安装的轻量级应用，依托微信运行，具备体积小、加载快、跨平台的特点，广泛应用于物联网控制、商城、工具、交互界面等场景。

本系列任务结合前期 STM32+ESP-01S+OneNET 物联网项目，开发配套小程序，实现手机端查看设备数据、远程控制 LED 与风扇。

小程序采用前后端分离开发模式：前端负责 UI 界面展示、用户交互；通过网络接口与 OneNET 云平台通信，间接下发指令、采集设备数据。

2.开发所需软件与账号说明

（1）微信开发者工具

官方专用开发、编译、预览、调试一体化工具，支持代码编写、实时预览、断点调试、真机调试、上传发布，是小程序开发必备软件。

支持系统：Windows、macOS

核心功能：代码编辑、模拟器预览、调试控制台、文件管理、版本管理、真机调试。

（2）小程序账号与 AppID

AppID（小程序 ID）是微信平台分配给每个小程序的唯一标识，项目编译、真机预览、上线发布必须使用。

正式账号：需在微信公众平台注册，完成主体认证，拥有完整权限。

测试号：无认证、免费使用，仅用于本地开发调试，适合实训学习。

3. 小程序项目基础文件说明

新建空白项目后，自动生成标准目录与四类核心文件，分工明确：

app.js：小程序全局逻辑文件，负责全局变量、全局函数、生命周期监听。

app.json：小程序全局配置文件，配置页面路径、窗口样式、导航栏、全局权限等。

app.wxss：小程序全局样式表，作用于所有页面，语法兼容 CSS。

pages 目录：存放所有页面文件，一个页面包含 4 个同名文件（.js/.json/.wxml/.wxss）。

.wxml：页面结构文件，对标网页 HTML，搭建 UI 布局；

.wxss：页面样式文件，对标网页 CSS，美化界面；

.js：页面逻辑文件，处理交互、网络请求、数据绑定；

.json：页面单独配置文件，配置当前页面专属样式与权限。

4. 开发流程总览

环境搭建 → 新建项目 → 编写页面结构与样式 → 编写交互逻辑 → 模拟器调试 → 真机预览 → 功能联调。

5. 网络与权限说明

本地开发仅需电脑联网；若需要手机真机预览，需保证电脑与手机连接同一局域网（同一 WiFi），同时手机微信登录对应账号。

五、任务实现

任务 1.1 注册微信小程序账号（获取 AppID）

1.登录微信公众平台https://mp.weixin.qq.com/，点击“立即注册”，如图1所示。

图1 微信公众平台

2.选择“小程序”，如图2所示。

图2 选择“小程序”

3.选择“前往注册”，如图3所示。

图3 选择“前往注册”

4.输入邮箱、邮箱验证码、密码和确认密码，同意协议进行注册，如图4所示。

图4 填入注册信息

5.选择“个人”、“企业”、“政府”、“媒体”或“其他组织”进行用户信息登记，如图5所示。

图5 用户信息登记

6.点击“前往小程序”，如图6所示。

图6 点击“前往小程序”

7.点击“开发与服务”下的“开发管理”，获取开发者ID（AppID），如图7所示，为后续开发备用。

图7 获取开发者ID

任务 1.2 下载并安装微信开发者工具

1.打开微信小程序官方文档下载地址：

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2.根据自身电脑系统（Windows 64 位 /macOS），下载对应版本安装包。

3.双击安装包，按照默认步骤完成安装，无需修改额外配置。

4.安装完成后，桌面出现「微信开发者工具」图标，启动软件。

5.首次启动需使用微信扫码登录，完成软件授权。

任务 1.3 新建小程序项目

1.工具首页选择 + 新建项目，如图8所示，进入项目创建页面。

图8 新建项目

2.依次填写项目参数：

目录：选择电脑本地空文件夹（建议新建独立文件夹，路径不含中文、空格）；

项目名称：自定义，例如基于STM32的物联网环境监测与远程控制系统；

AppID：粘贴上一步获取的测试号 AppID；

项目模板：选择 不使用云服务、基础模板；

3.确认参数无误，点击创建，如图9所示。

图9 填写项目参数

4.项目创建完成，工具自动加载默认模板代码，左侧模拟器出现默认页面，代表环境搭建成功。

任务 1.4 熟悉开发者工具界面

整体分为四大区域：

1.左侧模拟器区：实时模拟手机页面效果，预览小程序运行界面。

2.中间代码编辑区：查看、编辑所有项目代码文件。

3.右侧文件树：展示项目完整目录结构，快速切换页面与文件。

4.底部调试控制台：查看日志、报错信息、网络请求、断点调试。

任务 1.5 基础运行测试

1.点击工具栏编译按钮，重新编译项目代码。

2.观察左侧模拟器，页面正常显示默认内容，无红色报错信息。

3.点击预览，生成二维码，使用手机微信扫码，完成真机预览，验证手机端运行正常。