《微信小程序》第一章：开发前准备与配置
系列文章
《微信小程序》
https://blog.csdn.net/sen_shan/category_13069009.html
目录
前言
本系列仅记录个人学习步骤，供参考。
本文介绍了微信小程序开发前的准备工作。
主要包括：
1)下载开发工具HBuilderX和小程序开发者工具；
2)获取小程序AppID，需在微信公众平台注册小程序账号；
3)查看开发者ID和密钥；
4)注册DCloud账号并完成实名认证，这是打包小程序必需步骤。
文章详细说明了每个步骤的操作流程和注意事项，为开发者提供了清晰的小程序开发环境搭建指南。
安装开发工具
HBuilderXhttps://www.dcloud.io/hbuilderx.html
小程序开发者工具（稳定版本）https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
小程序 AppID
1. 注册/登录后台
打开官网 https://mp.weixin.qq.com → 使用微信扫码 → 选择「小程序」类型 → 按提示填写邮箱、主体信息（个人或企业）→ 激活账号。
2. 查看 AppID
登录成功后，依次点击：
开发 → 开发管理 → 开发设置
页面顶部就会显示：
开发者 ID（AppID） 形如 wx1234567890abcdef
开发者密钥（AppSecret）首次需要手动生成，请自行保存。
DCloud账号
注册 DCloud 账号并实名认证（打包必需）
官方网址http:// https://www.dcloud.io
创建 uni-app 项目
1. HBuilderX → 文件 → 新建 → 项目 →uni-app→ 选择 「默认模板」→uni-app x→Vue3
uni-app x ：原生级性能 + 未来可能扩展到 App/鸿蒙
uni-app：微信小程序就选经典 uni-app，插件生态多支持npm、uni_modules、小程序 SDK 都能用 ，请勿勾选uni-app x
说明：本章文档因误选 uni-app x 模式编写，下一章将切换回 uni-app 模式
2. 勾选「启用 TypeScript」「启用 uts」「启用云函数」按需
3. 建好后目录关键文件
├─ pages.uvue // 页面（类 vue3 setup 语法）
├─ static/ // 静态资源
├─ uts/ // 写 Swift/Kotlin/ArkTS 原生代码
├─ manifest.json // 全局配置 + 小程序 AppID
└─ uni-app-x.config.js // 编译选项（代码混淆、分包等）
小程序配置
1. manifest.json → 「基础设定配置」节点
填写 appid
2. manifest.json → 「微信小程序」节点
填写 appid
设置 requiredBackgroundModes/permission/optimization
3. 分包加载
pages.json 里声明 subPackages，HBuilderX 会自动生成分包 qr
4. 插件引用
npm 包：正常 install，HBuilderX 会摇树
微信原生插件：manifest → 插件声明，uts 里 wx.invoke 调用
开发调试
1. 顶部运行菜单
├─ 运行 → 运行到微信小程序开发者工具
└─ 运行 → 运行到鸿蒙/支付宝/抖音（会自动唤起对应 IDE）
以微信小程序为例：
2. 真机预览
微信：开发者工具 → 预览 → 企业微信或微信扫码
鸿蒙：DevEco Studio → 自动签名 → 运行到鸿蒙真机
以微信小程序为例：
需要信任运行
若信任后画面未更新，请点击“刷新”。
真机预览
开启“二维码/自动预览”后，扫码或直接下拉微信即可看到当前小程序；关闭后需在微信“最近使用”里手动打开。
真机调试
用微信扫描二维码获取或自动真机调试。
3. 联调原生能力（uts）
在 uts 目录新建 .swift / .kt / .ets 文件
HBuilderX 4.81+ 支持“源码级联编”：把原生工程拖进同 workspace，断点可跳进原生代码
日志统一在 HBuilderX 控制台输出
发行上线
后期详细说明
1. 发行 → 小程序-微信（或支付宝/鸿蒙）
输入 AppID、版本号、备注
编译产物出现在 /unpackage/dist/build/mp-weixin
2. 用对应开发者工具「导入」该目录
上传 → 填写版本备注 → 获得体验二维码
3. 后台提交审核 → 通过 → 全量发布
灰度：可在 mp 管理后台选「分阶段发布」
常见问题速查
1.路径太长必报错 → 项目放 D:\prj\ 根目录
-鸿蒙包名必须与 DevEco 签名证书一致，否则 .hap 安装失败
2.rich-text 内嵌 video 在支付宝黑屏 → 改用 web-view 嵌 H5
3.uts 打印不出日志 → Xcode 窗口选「UniAppX」scheme，控制台 filter 填「uts」
4.微信小程序 >2 MB 提示超限 → 开「增强编译」+ 分包，再超就走「代码加固压缩」