《微信小程序》第一章:开发前准备与配置

系列文章

《微信小程序》https://blog.csdn.net/sen_shan/category_13069009.html

目录

目录

系列文章

目录

前言

安装开发工具

[小程序 AppID](#小程序 AppID)

DCloud账号

[创建 uni-app 项目](#创建 uni-app 项目)

小程序配置

开发调试

发行上线

常见问题速查


前言

本系列仅记录个人学习步骤,供参考。

本文介绍了微信小程序开发前的准备工作。

主要包括:

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 → 使用微信扫码 → 选择「小程序」类型 → 按提示填写邮箱、主体信息(个人或企业)→ 激活账号。

  1. 查看 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 模式

  1. 勾选「启用 TypeScript」「启用 uts」「启用云函数」按需

  2. 建好后目录关键文件

├─ pages.uvue // 页面(类 vue3 setup 语法)

├─ static/ // 静态资源

├─ uts/ // 写 Swift/Kotlin/ArkTS 原生代码

├─ manifest.json // 全局配置 + 小程序 AppID

└─ uni-app-x.config.js // 编译选项(代码混淆、分包等)

小程序配置

  1. manifest.json → 「基础设定配置」节点

填写 appid

  1. manifest.json → 「微信小程序」节点

填写 appid

设置 requiredBackgroundModes/permission/optimization

  1. 分包加载

pages.json 里声明 subPackages,HBuilderX 会自动生成分包 qr

  1. 插件引用

npm 包:正常 install,HBuilderX 会摇树

微信原生插件:manifest → 插件声明,uts 里 wx.invoke 调用

开发调试

  1. 顶部运行菜单

├─ 运行 → 运行到微信小程序开发者工具

└─ 运行 → 运行到鸿蒙/支付宝/抖音(会自动唤起对应 IDE)

以微信小程序为例:

  1. 真机预览

微信:开发者工具 → 预览 → 企业微信或微信扫码

鸿蒙:DevEco Studio → 自动签名 → 运行到鸿蒙真机

以微信小程序为例:

需要信任运行

若信任后画面未更新,请点击"刷新"。

真机预览

开启"二维码/自动预览"后,扫码或直接下拉微信即可看到当前小程序;关闭后需在微信"最近使用"里手动打开。

真机调试

用微信扫描二维码获取或自动真机调试。

  1. 联调原生能力(uts)

在 uts 目录新建 .swift / .kt / .ets 文件

HBuilderX 4.81+ 支持"源码级联编":把原生工程拖进同 workspace,断点可跳进原生代码

日志统一在 HBuilderX 控制台输出

发行上线

后期详细说明

  1. 发行 → 小程序-微信(或支付宝/鸿蒙)

输入 AppID、版本号、备注

编译产物出现在 /unpackage/dist/build/mp-weixin

  1. 用对应开发者工具「导入」该目录

上传 → 填写版本备注 → 获得体验二维码

  1. 后台提交审核 → 通过 → 全量发布

灰度:可在 mp 管理后台选「分阶段发布」

常见问题速查

1.路径太长必报错 → 项目放 D:\prj\ 根目录

-鸿蒙包名必须与 DevEco 签名证书一致,否则 .hap 安装失败

2.rich-text 内嵌 video 在支付宝黑屏 → 改用 web-view 嵌 H5

3.uts 打印不出日志 → Xcode 窗口选「UniAppX」scheme,控制台 filter 填「uts」

4.微信小程序 >2 MB 提示超限 → 开「增强编译」+ 分包,再超就走「代码加固压缩」

相关推荐
说私域7 小时前
移动互联网生态下定制开发开源AI智能名片S2B2C商城小程序源码在营销技术中的应用与发展
人工智能·小程序·开源
微爱帮监所写信寄信8 小时前
微爱帮监狱写信寄信工具服务器【Linux篇章】再续:TCP协议——用技术隐喻重构网络世界的底层逻辑
linux·服务器·开发语言·网络·网络协议·小程序·监狱寄信
微爱帮监所写信寄信11 小时前
微爱帮监狱写信寄信小程序:MySQL核心日志与备份恢复安全架构
数据库·mysql·小程序·邮局·监狱寄信·挂号信·邮政
wan10412 小时前
用户隐私协议URL
微信小程序
Z单单13 小时前
微信小程序订单信息录入路径设置
微信小程序·小程序
码界奇点14 小时前
基于Spring Boot和微信小程序的小程序商城系统设计与实现
spring boot·微信小程序·小程序·毕业设计·源代码管理
微爱帮监所写信寄信14 小时前
微爱帮监狱寄信写信小程序:深入理解JavaScript中的Symbol特性
开发语言·javascript·网络协议·小程序·监狱寄信·微爱帮
计算机毕设指导615 小时前
基于微信小程序的智慧社区娱乐服务管理系统【源码文末联系】
java·spring boot·微信小程序·小程序·tomcat·maven·娱乐
微爱帮监所写信寄信15 小时前
6G+AI:重构微爱帮监狱写信寄信小程序的特殊通信未来
人工智能·小程序·重构·6g·监狱信件·监狱系统·服刑人员子女
赵庆明老师16 小时前
uniapp 微信小程序页面JS模板
javascript·微信小程序·uni-app