任务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.微信小程序基础介绍微信小程序是一种无需下载安装的轻量级应用依托微信运行具备体积小、加载快、跨平台的特点广泛应用于物联网控制、商城、工具、交互界面等场景。本系列任务结合前期 STM32ESP-01SOneNET 物联网项目开发配套小程序实现手机端查看设备数据、远程控制 LED 与风扇。小程序采用前后端分离开发模式前端负责 UI 界面展示、用户交互通过网络接口与 OneNET 云平台通信间接下发指令、采集设备数据。2.开发所需软件与账号说明1微信开发者工具官方专用开发、编译、预览、调试一体化工具支持代码编写、实时预览、断点调试、真机调试、上传发布是小程序开发必备软件。支持系统Windows、macOS核心功能代码编辑、模拟器预览、调试控制台、文件管理、版本管理、真机调试。2小程序账号与 AppIDAppID小程序 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 注册微信小程序账号获取 AppID1.登录微信公众平台https://mp.weixin.qq.com/点击“立即注册”如图1所示。图1微信公众平台2.选择“小程序”如图2所示。图2选择“小程序”3.选择“前往注册”如图3所示。图3选择“前往注册”4.输入邮箱、邮箱验证码、密码和确认密码同意协议进行注册如图4所示。图4 填入注册信息5.选择“个人”、“企业”、“政府”、“媒体”或“其他组织”进行用户信息登记如图5所示。图5用户信息登记6.点击“前往小程序”如图6所示。图6 点击“前往小程序”7.点击“开发与服务”下的“开发管理”获取开发者IDAppID如图7所示为后续开发备用。图7获取开发者ID任务 1.2 下载并安装微信开发者工具1.打开微信小程序官方文档下载地址https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html2.根据自身电脑系统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.点击预览生成二维码使用手机微信扫码完成真机预览验证手机端运行正常。 模块4 微信小程序开发用户界面-项目1 用户界面开发-任务1 搭建微信小程序开发环境
任务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.微信小程序基础介绍微信小程序是一种无需下载安装的轻量级应用依托微信运行具备体积小、加载快、跨平台的特点广泛应用于物联网控制、商城、工具、交互界面等场景。本系列任务结合前期 STM32ESP-01SOneNET 物联网项目开发配套小程序实现手机端查看设备数据、远程控制 LED 与风扇。小程序采用前后端分离开发模式前端负责 UI 界面展示、用户交互通过网络接口与 OneNET 云平台通信间接下发指令、采集设备数据。2.开发所需软件与账号说明1微信开发者工具官方专用开发、编译、预览、调试一体化工具支持代码编写、实时预览、断点调试、真机调试、上传发布是小程序开发必备软件。支持系统Windows、macOS核心功能代码编辑、模拟器预览、调试控制台、文件管理、版本管理、真机调试。2小程序账号与 AppIDAppID小程序 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 注册微信小程序账号获取 AppID1.登录微信公众平台https://mp.weixin.qq.com/点击“立即注册”如图1所示。图1微信公众平台2.选择“小程序”如图2所示。图2选择“小程序”3.选择“前往注册”如图3所示。图3选择“前往注册”4.输入邮箱、邮箱验证码、密码和确认密码同意协议进行注册如图4所示。图4 填入注册信息5.选择“个人”、“企业”、“政府”、“媒体”或“其他组织”进行用户信息登记如图5所示。图5用户信息登记6.点击“前往小程序”如图6所示。图6 点击“前往小程序”7.点击“开发与服务”下的“开发管理”获取开发者IDAppID如图7所示为后续开发备用。图7获取开发者ID任务 1.2 下载并安装微信开发者工具1.打开微信小程序官方文档下载地址https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html2.根据自身电脑系统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.点击预览生成二维码使用手机微信扫码完成真机预览验证手机端运行正常。