【愚公系列】《微信小程序项目实战（AI编程+视频图解）》002-一张新地图：AI创业的核心分析框架

愚公搬代码2026-09-29 8:23

💎【行业认证·权威头衔】

✔ 华为云天团核心成员：特约编辑/云享专家/开发者专家/产品云测专家

✔ 开发者社区全满贯：CSDN博客&商业化双料专家/阿里云签约作者/腾讯云内容共创官/掘金&亚马逊&51CTO顶级博主

✔ 技术生态共建先锋：横跨鸿蒙、云计算、AI等前沿领域的技术布道者

🏆【荣誉殿堂】

🎖 连续三年蝉联"华为云十佳博主"（2022-2024）

🎖 双冠加冕CSDN"年度博客之星TOP2"（2022&2023）

🎖 十余个技术社区年度杰出贡献奖得主

📚【知识宝库】

覆盖全栈技术矩阵：

◾ 编程语言：.NET/Java/Python/Go/Node...

◾ 移动生态：HarmonyOS/iOS/Android/小程序

◾ 前沿领域：物联网/网络安全/大数据/AI/元宇宙

◾ 游戏开发：Unity3D引擎深度解析

文章目录

🚀微信小程序开发环境搭建与基础技术准备

随着微信小程序的普及，越来越多的开发者开始涉足这一领域，而搭建开发环境是开发微信小程序的基础。本节将介绍搭建微信小程序开发环境的过程，以及开发微信小程序需要具备的基础技术。

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

微信小程序开发环境的搭建比较简单，主要有以下3个步骤。

🦋（1）下载微信开发者工具

进入微信公众平台官网首页，将鼠标指针放在"账号分类"下的"小程序"处，可以看到图1.3所示的"小程序开发文档"。单击"小程序开发文档"，在打开的页面中选择"工具"---"下载"，可以看到平台为不同的操作系统提供了不同版本的微信开发者工具（见图1.4）。开发者可以根据自己的操作系统下载相应的版本。

需要注意的是，微信开发者工具的版本更新很快，因此实际版本以读者操作时所见为准。

补充说明：

  • 微信开发者工具是微信官方提供的小程序开发IDE，集成了代码编辑、调试、模拟器预览、真机预览、上传代码、云开发等功能。
  • 下载时应注意选择与操作系统匹配的版本，例如 Windows、macOS 等不同版本。
  • 安装前建议关闭可能影响安装的安全软件，避免安装失败。
  • 如果官网页面布局发生变化，可以在微信公众平台或微信开放社区中搜索"微信开发者工具下载"进入下载页面。

🦋（2）注册微信公众平台账号

在微信公众平台官网首页单击上方的"立即注册"，进入图1.5所示的注册微信公众平台账号页面，选择"小程序"类别进行注册。

小程序支持个人开发者账号，可以注册个人账号；如果非个人主体需要注册开发者账号，也可以进行非个人主体认证。这两种账号都可以发布小程序。

补充说明：

  • 注册时需要准备一个未注册过微信公众平台、未绑定过个人微信号的邮箱。
  • 注册过程中需要选择主体类型，常见类型包括个人、企业、政府、媒体、其他组织等。
  • 个人主体小程序可以发布，但部分能力会受到限制，例如微信支付、部分服务类目等。
  • 非个人主体通常需要进行主体认证，认证后可获得更完整的小程序能力。
  • 注册完成后，可以在微信公众平台后台的"开发"---"开发管理"---"开发设置"中查看小程序的 AppID。
  • AppID 是微信开发者工具创建项目、调试和上传代码时需要用到的重要标识，应妥善保管。
  • AppSecret 属于敏感信息，不应直接写入前端代码或公开仓库。

🦋（3）安装并登录微信开发者工具

按照提示完成微信开发者工具的安装。安装完成后，运行微信开发者工具，会出现一个二维码，需要用绑定了微信公众平台的微信账号扫码登录。图1.6所示为微信开发者工具扫码登录页面。

补充说明：

  • 扫码登录时，使用的微信账号应与微信公众平台账号绑定。
  • 登录后可以新建项目，填写项目名称、项目目录、AppID、后端服务类型等信息。
  • 如果暂时没有 AppID，可以在新建项目时选择"测试号"进行体验。
  • 创建项目后，开发者工具通常会显示模拟器、编辑器、调试器和工具栏等区域。
  • 在模拟器中可以预览页面效果，在调试器中可以查看 Console、Network、Storage、WXML 结构等信息。
  • 开发完成后，可以通过开发者工具上传代码，并在微信公众平台提交审核、发布上线。

🦋常见问题与注意事项

  1. 下载速度慢或安装失败：可以更换网络环境，或从官方渠道重新下载。
  2. 扫码登录失败：检查微信是否已绑定公众平台账号，或尝试重新登录、更新开发者工具。
  3. AppID 无效：确认 AppID 是否填写正确，是否属于当前登录账号下的小程序。
  4. 项目无法预览：检查网络、代理设置、开发者工具版本和项目配置。
  5. 版本更新问题：开发者工具更新较快，建议使用稳定版，并关注官方更新说明。

🔎2 基础技术准备

虽然微信小程序开发的入门门槛较低、学习成本较低，但开发者也需要具备一些基础技术。

微信小程序特有的标记语言称为 WXML，它的使用方法类似于超文本标记语言（Hypertext Markup Language，HTML），所以开发者需要对 HTML 有所了解。

微信小程序还有自己的样式语言 WXSS，它兼容层叠样式表（Cascading Style Sheets，CSS）并做了扩展，所以开发者需要对 CSS 有所了解。

微信小程序使用 JavaScript 来进行业务处理，兼容大部分 JavaScript 功能，但仍有一些功能无法使用，所以开发者还需要对 JavaScript 有所了解。

有了 HTML、CSS 和 JavaScript 功底，学习微信小程序的开发就非常容易了。

🦋补充：微信小程序基础技术构成

技术 作用 与 Web 技术的关系 学习重点
WXML 描述页面结构 类似 HTML 标签、数据绑定、条件渲染、列表渲染、模板、组件
WXSS 描述页面样式 兼容 CSS 并扩展 选择器、rpx、@import、全局样式、页面样式
JavaScript 处理业务逻辑 兼容大部分 JavaScript 变量、函数、对象、数组、事件、生命周期、API 调用
JSON 配置页面与项目 Web 中较少直接对应 app.json、page.json、project.config.json、sitemap.json
小程序 API 调用微信能力 Web API 的替代与扩展 网络请求、存储、位置、媒体、支付、登录等
组件 构建页面界面 类似自定义 HTML 标签 view、text、image、button、input、scroll-view 等

WXML 补充说明：

  • WXML 是微信小程序的标记语言，用于描述页面结构。
  • 常见标签包括 view、text、image、button、input、scroll-view 等。
  • 支持数据绑定，例如 {``{message}}。
  • 支持条件渲染，例如 wx:if。
  • 支持列表渲染，例如 wx:for。
  • 支持模板和引用，便于代码复用。

WXSS 补充说明：

  • WXSS 是微信小程序的样式语言，兼容大部分 CSS。
  • 支持 rpx 尺寸单位，可以根据屏幕宽度自适应。
  • 支持 @import 导入样式。
  • 支持全局样式 app.wxss 和页面样式 page.wxss。
  • 选择器与 CSS 类似，但部分选择器支持有限。
  • 样式默认具有局部作用域，避免不同页面之间互相影响。

JavaScript 补充说明：

  • JavaScript 用于处理小程序的业务逻辑。
  • 小程序中没有 DOM 和 BOM，不能直接操作 window、document。
  • 页面通过 Page() 注册，组件通过 Component() 注册，应用通过 App() 注册。
  • 页面数据通过 data 定义，通过 this.setData() 更新。
  • 常见生命周期包括 onLoad、onShow、onReady、onHide、onUnload 等。
  • 可以通过 wx.request、wx.login、wx.getStorage 等 API 调用微信能力。

JSON 配置补充说明：

  • app.json：全局配置，包括页面路径、窗口表现、底部导航、网络超时等。
  • page.json：页面配置，可以覆盖全局窗口表现。
  • project.config.json：项目配置，包括 AppID、编译设置等。
  • sitemap.json：小程序索引配置，用于微信搜索收录。

总结：

微信小程序开发并不要求开发者一开始就掌握全部技术，但具备 HTML、CSS、JavaScript 基础后，再学习 WXML、WXSS、小程序 API、组件和配置，会非常容易。建议开发者边看官方文档边实践，从简单页面开始，逐步掌握数据绑定、事件处理、网络请求、组件通信和云开发等能力。

🚀附：AI提示词模板与完整回答示例

原文未包含AI提示词模板和回答。以下为便于学习与开发补充的模板及完整回答，可直接复制使用。

🔎模板1：生成微信小程序开发环境搭建学习指南

提示词模板：

你是一名微信小程序开发讲师。请为我整理一份"微信小程序开发环境搭建学习指南"，要求包括：下载微信开发者工具、注册微信公众平台账号、安装并登录微信开发者工具三个步骤；每一步给出操作说明、注意事项和常见问题；最后给出基础技术准备建议。请用清晰的分级标题和表格输出。

完整回答示例：

🦋微信小程序开发环境搭建学习指南

☀️一、下载微信开发者工具
  1. 进入微信公众平台官网。
  2. 找到"账号分类"下的"小程序"。
  3. 单击"小程序开发文档"。
  4. 在文档页面选择"工具"---"下载"。
  5. 根据自己的操作系统下载对应版本。

注意事项：

  • 选择官方渠道下载。
  • 版本更新较快，以实际页面为准。
  • 安装前关闭可能冲突的安全软件。

常见问题：

  • 下载慢：更换网络或稍后重试。
  • 安装失败：检查系统版本和权限。
  • 打不开：尝试以管理员身份运行。
☀️二、注册微信公众平台账号
  1. 进入微信公众平台官网。
  2. 单击"立即注册"。
  3. 选择"小程序"类别。
  4. 填写邮箱、密码等信息。
  5. 选择主体类型并完成认证或注册。
  6. 注册完成后获取 AppID。

注意事项：

  • 邮箱需未注册过公众平台。
  • 个人主体可发布小程序，但部分能力受限。
  • 非个人主体认证后能力更完整。
  • AppSecret 不应泄露。
☀️三、安装并登录微信开发者工具
  1. 运行安装程序，按提示完成安装。
  2. 启动微信开发者工具。
  3. 使用绑定公众平台的微信扫码登录。
  4. 新建项目，填写项目名称、目录、AppID。
  5. 选择模板并创建项目。

注意事项：

  • 扫码微信需与公众平台账号绑定。
  • 没有 AppID 时可使用测试号。
  • 创建项目后可在模拟器中预览。
☀️四、基础技术准备建议
技术 建议
HTML 了解常用标签和页面结构
CSS 了解选择器、盒模型、布局
JavaScript 掌握变量、函数、对象、数组、事件
WXML 学习数据绑定、条件渲染、列表渲染
WXSS 学习 rpx、@import、全局与页面样式
JSON 学习 app.json、page.json 配置
小程序 API 学习网络请求、存储、登录等
☀️五、总结

微信小程序环境搭建分为下载工具、注册账号、安装登录三步。具备 HTML、CSS、JavaScript 基础后，再学习 WXML、WXSS 和小程序 API，即可快速上手开发。

🔎模板2：解释 WXML、WXSS、JavaScript 与 HTML、CSS、JavaScript 的关系

提示词模板：

请用对比表解释微信小程序中的 WXML、WXSS、JavaScript 与 Web 开发中的 HTML、CSS、JavaScript 的关系与区别，并给出学习建议。要求内容完整、条理清晰。

完整回答示例：

对比项 Web 开发 微信小程序 关系与区别
结构语言 HTML WXML WXML 类似 HTML，用于描述页面结构，但标签和语法是微信小程序自定义的
样式语言 CSS WXSS WXSS 兼容大部分 CSS，并扩展了 rpx、@import 等能力
逻辑语言 JavaScript JavaScript 小程序使用 JavaScript 处理业务逻辑，兼容大部分语法，但没有 DOM 和 BOM
页面注册 无统一要求 Page() 小程序页面通过 Page() 注册
组件注册 自定义元素 Component() 小程序组件通过 Component() 注册
应用注册 无 App() 小程序应用通过 App() 注册
数据更新 直接操作 DOM setData() 小程序通过 setData() 更新视图
配置 较少 JSON 小程序使用 app.json、page.json 等配置
运行环境 浏览器 微信客户端 小程序运行在微信环境中，不能直接使用 window、document

学习建议：

  1. 先掌握 HTML、CSS、JavaScript 基础。
  2. 再学习 WXML 的数据绑定、条件渲染和列表渲染。
  3. 学习 WXSS 的 rpx、样式导入和全局样式。
  4. 学习小程序生命周期、事件绑定和 API 调用。
  5. 通过官方文档和实际项目不断练习。

🔎模板3：生成第一个微信小程序页面

提示词模板：

请使用微信小程序原生框架，生成一个"Hello 小程序"页面。要求：页面显示一段文字和一个按钮，点击按钮后文字发生变化。请分别给出 app.json、index.json、index.wxml、index.wxss、index.js 的完整代码，并说明关键逻辑。

完整回答示例：

app.json

json 复制代码 
{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "Hello 小程序",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

pages/index/index.json

json 复制代码 
{
  "navigationBarTitleText": "首页"
}

pages/index/index.wxml

xml 复制代码 
<view class="container">
  <text class="title">{{message}}</text>
  <button bindtap="changeMessage">点击改变文字</button>
</view>

pages/index/index.wxss

css 复制代码 
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: 30rpx;
}

.title {
  font-size: 40rpx;
  font-weight: bold;
}

button {
  margin-top: 20rpx;
}

pages/index/index.js

javascript 复制代码 
Page({
  data: {
    message: 'Hello 小程序'
  },

  changeMessage() {
    this.setData({
      message: '你已成功运行第一个微信小程序页面'
    });
  }
});

关键逻辑说明：

  1. app.json 中注册了页面路径 pages/index/index。
  2. index.wxml 使用 {``{message}} 绑定数据。
  3. index.js 中 data.message 提供初始文字。
  4. 按钮通过 bindtap 绑定 changeMessage 方法。
  5. 点击按钮后，this.setData() 更新 message，页面自动刷新。
  6. index.wxss 使用 rpx 和 Flex 布局，使页面居中显示。
相关推荐
TAN-90°-1 小时前
Deep Learning for Computer Vision——Vision and Language
人工智能·深度学习·神经网络·算法·目标检测·机器学习·计算机视觉
东坡肘子1 小时前
iPhone Duo 留给开发者的一个月 -- 肘子的 Swift 周报 #155
人工智能·swiftui·swift
LaughingZhu1 小时前
Product Hunt 每日热榜 | 2026-09-27
人工智能·深度学习·神经网络·搜索引擎·百度
时下握今1 小时前
Spring AI 工具调用详解：Function Calling 与 MCP 客户端 / 服务器实战
人工智能
计算机源码社1 小时前
【27届大数据毕设】基于Spark的AI艺术创作者价值评估与市场趋势预测研究 基于Python与Spark的AI生成艺术受众画像及异常热度识别可视化平台
大数据·人工智能·hadoop·python·spark·毕业设计·课程设计
嵌入式er1 小时前
经纬恒润 自动驾驶嵌入式软件-秋招面经
人工智能·机器学习·自动驾驶
向上的车轮3 小时前
AI音乐创作实战：用Workbuddy定制专属BGM并仿写《Star Sky》
人工智能·ai音乐·workbuddy
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02Telegram APK 下载安装完整指南 — 2026年最新03GitHub 镜像站点04历年考研数学一、数学二、数学三真题试卷及答案PDF052026 爱知・名古屋亚运会怎么看？直播平台+赛程安排分享06蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接07给AI一张“业务概念地图“：本体如何从哲学走向企业智能08jev-ultrafast 深度解析：7 秒订机票的浏览器 Agent 是如何炼成的09开源OV-Watch：怎么做一个智能手表10微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新