第一章 微信小程序概述与开发准备

第一章 微信小程序概述与开发准备 系列教程微信小程序投票系统完整开发 上一章无 下一章第二章 - 小程序目录结构与核心文件详解1.1 什么是微信小程序微信小程序Mini Program是腾讯微信团队于 2017 年推出的一种无需下载安装即可使用的应用形态运行在微信客户端内部。核心特点特点说明无需安装扫码/搜索即用用完即走不占用手机存储接近原生渲染层与逻辑层分离的双线程架构性能接近原生 App生态完整可直接调用微信支付、登录、分享、位置等原生能力开发成本低一套代码同时兼容 iOS 和 Android流量红利微信月活 13 亿生态内获客成本极低与其他技术对比原生 App → 性能最好开发成本最高需要单独下载 H5 网页 → 开发成本低体验差无法调用原生能力 微信小程序 → 介于两者之间性能接近原生开发成本适中 ✅ React Native → 跨平台原生学习成本高双线程模型重要┌─────────────────────────────────────────────────────────┐ │ 微信客户端宿主环境 │ │ │ │ ┌──────────────────┐ ┌─────────────────────┐ │ │ │ 逻辑层 (JS) │ │ 渲染层 (WXML/WXSS) │ │ │ │ │◄────►│ │ │ │ │ app.js │ │ .wxml 模板 │ │ │ │ page.js │ │ .wxss 样式 │ │ │ │ wx API 调用 │ │ WebView 渲染 │ │ │ └──────────────────┘ └─────────────────────┘ │ │ ▲ ▲ │ │ └───────── Native ──────────┘ │ └─────────────────────────────────────────────────────────┘关键理解逻辑层和渲染层运行在独立线程中通过微信原生桥接通信。这意味着 JS 操作不会阻塞 UI 渲染但也意味着不能直接操作 DOM这是和 Web 开发最大的区别。1.2 开发账号准备步骤一注册小程序账号打开 微信公众平台点击右上角「立即注册」选择账号类型小程序填写邮箱、密码邮箱不能与已有公众号/小程序绑定验证邮箱后完善主体信息个人 or 企业⚠️注意个人主体小程序有部分功能限制如不能开通微信支付投票系统用个人主体完全够用。步骤二获取 AppID 和 AppSecret登录后进入开发 → 开发管理 → 开发设置AppID: w4x512343567289s0abcdef ← 小程序唯一标识前端用 AppSecret: xxxxxxxxxxxxxxxx ← 密钥只在后端使用不要泄露安全提示AppSecret 相当于密码只能在服务端Spring Boot使用绝对不能写到小程序前端代码中步骤三配置服务器合法域名进入开发 → 开发管理 → 开发设置 → 服务器域名配置项值说明request 合法域名https://www.chinahanwucun.cn所有 wx.request 的目标域名uploadFile 合法域名按需配置上传文件用downloadFile 合法域名按需配置下载文件用⚠️要求必须是HTTPS协议域名必须已备案每月只能修改5 次改之前想清楚1.3 安装微信开发者工具下载安装官方下载地址https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html选择稳定版 Stable BuildWindows 64位安装完成后使用微信扫码登录新建项目点击「」新建项目填写项目名称vote-miniprogram选择目录D:\work_space\live\src\main\java\com\own\live\wx\page填入AppID不要用测试号否则无法获取 openid后端服务选择不使用云服务模板选择JS 基础模板不选 TS点击「确定」1.4 开发者工具界面详解┌────────────────────────────────────────────────────────────────┐ │ [编译] [预览] [真机调试] [上传] [详情] │ ← 工具栏 ├───────────┬────────────────────────┬──────────────────────────┤ │ │ │ │ │ 文件树 │ 代码编辑器 │ 模拟器 │ │ ├app.js │ // 当前编辑的文件内容 │ ┌──────────────┐ │ │ ├app.json│ │ │ iPhone模拟 │ │ │ └pages/ │ │ │ │ │ │ ├index │ │ │ 小程序页面 │ │ │ ├create│ │ │ │ │ │ ├vote │ │ └──────────────┘ │ │ └result│ │ │ ├───────────┴────────────────────────┴──────────────────────────┤ │ [Console] [Network] [AppData] [Storage] [Wxml] [Sensor] │ ← 调试面板 │ │ │ console.log 的输出会在这里显示 │ └────────────────────────────────────────────────────────────────┘调试面板各 Tab 用途Tab用途使用场景ConsoleJS 日志输出、错误信息日常调试必用Network查看所有网络请求详情接口联调看请求参数和响应AppData实时查看所有页面的 data数据绑定调试神器 ⭐Storage查看/修改本地存储查看 openid 缓存Wxml查看渲染后的 DOM 结构样式调试Sensor模拟地理位置、陀螺仪位置相关功能测试必须掌握的快捷键快捷键功能Ctrl S保存并自动编译Ctrl Shift F全局搜索Ctrl /注释/取消注释Ctrl Z撤销Shift Alt F格式化代码1.5 开发模式配置本地调试必做开发阶段后端跑在本机需要关闭域名校验点击右上角「详情」切换到「本地设置」Tab勾选 ✅不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书⚠️注意这个设置只在开发者工具中生效真机预览时仍然需要合法域名。1.6 小程序与普通 Web 开发的主要区别对比项普通 Web微信小程序标签divspanviewtext样式单位pxremvwrpx自适应JS 环境浏览器 DOM/BOMJS Core无 DOM/BOM网络请求fetch/axioswx.request路由跳转window.locationwx.navigateTo等本地存储localStoragewx.setStorageSync获取用户信息OAuth 流程wx.login 服务端换 openid1.7 本项目技术栈总览前端小程序 后端Spring Boot ───────────────────── ────────────────────────── WXML → 页面结构 Spring Boot 2.x WXSS → 页面样式 MyBatis → 数据库操作 JS → 页面逻辑 MySQL 8.x → 数据存储 app.js → 全局管理 RestTemplate → 调用微信API application.properties → 配置 微信服务器 ───────────────────── jscode2session API → code 换 openid本章小结✅ 了解了小程序的双线程架构原理✅ 完成了 AppID/AppSecret 的获取✅ 配置了服务器合法域名✅ 安装并配置好了开发者工具✅ 明确了小程序与 Web 开发的核心区别下一章我们将深入了解小程序的目录结构和每个核心文件的作用。