讲师中心 微信公众号
AI工具推荐 视频效率加速

uni-app如何发布微信小程序

雨晨大大_7769

雨晨大大_7769

发布时间:2026-06-02 07:51:47

|

1224人浏览过

|

来源于php中文网

原创

必须在manifest.json中正确配置mp-weixin.appid等完整字段,否则HBuilderX发行时将静默生成无效包;需通过「发行→小程序-微信」生成unpackage/dist/build/mp-weixin目录产物并确保project.config.json等文件齐全。

必须先在 manifest.json 里填对 mp-weixin.appid,否则所有后续操作都会失败——不是报错,而是静默生成无效包。

manifest.json 中微信小程序配置项必须写全

很多人只改了 appid 就以为完事,但微信小程序构建依赖完整的 mp-weixin 配置块。缺字段会导致 HBuilderX 打包时跳过某些编译步骤,最终在开发者工具里白屏或样式错乱。

  • appid 必须是微信公众平台「开发管理 → 开发设置」里看到的正式 AppID(带 wx 前缀),不能是测试号 ID 或空字符串
  • setting.urlCheck 建议设为 false,否则上线前需额外配置服务器域名白名单,本地调试阶段容易卡住
  • usingComponents 必须为 true,否则自定义组件无法被识别(尤其用了 uni_modules 里的插件时)
  • permission 段可选,但如果用到 uni.getLocation 等 API,不声明 scope.userLocation 描述,真机上会直接拒绝授权

正确示例:

{
  "name": "我的小程序",
  "appid": "",
  "description": "",
  "versionName": "1.0.0",
  "versionCode": "100",
  "transformPx": false,
  "app-plus": { /* ... */ },
  "mp-weixin": {
    "appid": "wx1234567890abcdef",
    "setting": {
      "urlCheck": false,
      "es6": true,
      "postcss": true,
      "minified": true
    },
    "usingComponents": true,
    "permission": {
      "scope.userLocation": {
        "desc": "用于展示附近门店"
      }
    }
  }
}

HBuilderX 发行时必须选“小程序-微信”,不能点“运行”

「运行 → 运行到小程序模拟器」只是启动微信开发者工具并加载临时代码,它不走完整构建流程,不会处理条件编译、资源压缩、分包优化等关键步骤。真正发布必须用「发行」菜单。

微信小程序 TabBar 图标生成
微信小程序 TabBar 图标生成

微信小程序 TabBar 图标生成技能,使用 Python PIL 绘制简约几何图标(未选中灰、选中绿),自动写入 app.json 配置。适用于“生成 tabBar 图标”、“底部菜单栏图标”、“tab 图标”等指令。

下载
  • 点击顶部菜单「发行 → 小程序-微信」,不是「运行」
  • 首次发行前,确保微信开发者工具已登录且处于关闭状态(否则 HBuilderX 可能连不上端口,报错 IDEmay already started at port xxxx)
  • 发行成功后,HBuilderX 会在控制台输出路径:unpackage/dist/build/mp-weixin,这个目录才是可上传的完整小程序工程
  • 不要手动复制 dist/dev/mp-weixin ——那是开发模式产物,含未转义的 Vue 模板和调试代码,上传后必报错

上传前必须检查 unpackage/dist/build/mp-weixin 目录结构

微信开发者工具要求根目录下存在 project.config.json 和 app.js,而 uni-app 默认不生成 project.config.json。如果缺失,开发者工具会提示「不是合法的小程序项目」。

  • 发行完成后,打开 unpackage/dist/build/mp-weixin,确认有以下文件: app.js、app.json、app.wxss、project.config.json(若无,需手动创建)
  • project.config.json 最小可用内容只需两行:
    {
      "description": "project configuration file",
      "setting": { "urlCheck": false }
    }
  • 检查 app.json 中 usingComponents 是否为 true,若为 false,说明 manifest.json 配置未生效,需回退检查
  • 如果有分包,在 subNVue 或 subNVue 目录下发现空文件夹?那是 HBuilderX 的遗留 bug,删掉整个 subNVue 文件夹再重新发行

上传后真机白屏或接口 404 的根本原因

不是代码写错了,大概率是环境链路断在三个地方之一:域名、HTTPS、条件编译。

  • 所有网络请求必须走 https,且域名必须在微信公众平台「开发管理 → 开发设置 → 服务器域名」中提前备案(包括 request、uploadFile、downloadFile 对应的域名)
  • 使用 uni.request 时,不要写 http://,哪怕本地调试也得配代理或改用 https://;否则上传后直接被微信拦截,控制台无报错,只返回空响应
  • 涉及微信特有 API(如 wx.login、wx.chooseAddress)的逻辑,务必用 #ifdef MP-WEIXIN 包裹,否则 H5 或 App 端运行时会报 undefined is not a function
  • 图片路径别用绝对 /static/xxx.png,优先用相对路径或 @/static/xxx.png,否则分包后路径解析失败

最常被忽略的是:发行后没关掉 HBuilderX 的「热更新」开关,导致开发者工具里看到的是旧 JS 文件。每次发行前,建议清空 unpackage 目录再操作。另外,微信开发者工具右上角「详情 → 本地设置」里勾选「不校验合法域名」仅对调试有效,上传时完全不生效。

相关文章

微信app下载
微信app下载

微信是一款手机通信软件,支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊,还能根据地理位置找到附近的人,带给大家全新的移动沟通体验,有需要的小伙伴快来保存下载体验吧!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2683

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

5823

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6790

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

6518

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

923

2024.05.22

微信是谁开发的
微信是谁开发的

微信是由张小龙所带领的腾讯广州研发中心产品团队打造开发的,并不是马化腾开发的,而腾讯公司总裁马化腾是在产品策划的邮件中确定这款产品的名称叫做“微信”的。想了解更多微信相关的内容,可阅读本专题下面的相关文章。

5655

2024.11.05

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

100

2026.10.22

Gradle Wrapper配置教程
Gradle Wrapper配置教程

本专题介绍Gradle Wrapper的基本作用,涵盖文件组成、生成方法、版本配置和任务调用,帮助你理解项目如何使用指定的Gradle版本,减少不同开发环境带来的构建差异。

60

2026.10.22

Golangci-lint检查器使用教程
Golangci-lint检查器使用教程

本专题整理Golangci-lint常用Linters的用途与配置方法,覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查,帮助项目合理选规则。

60

2026.10.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn