HBuilderX打包uniapp微信小程序教程（开源前端如何编译打包小程序）

HBuilderX 是一款由 DCloud 开发的集成开发环境（IDE），它支持使用 HTML、CSS 和 JavaScript（以及其他前端技术）来开发跨平台应用，其中包括微信小程序、支付宝小程序、百度智能小程序等。使用 HBuilderX 开发 uni-app 小程序，可以让你用一套代码运行到多个平台，极大地提高开发效率。

经常使用微信开发工具的朋友都会遇到一些小程序前端都提供了uniapp开源包供二开，但大部分还是使用现成的编译后的前端省事方便，有开源包在没有现成的编译后的前端时就需要使用工具自行完成编译开源包，很多会员也反馈部分源码有开源包但不知道编译，今天就与大家分享一下如何使用HBuilderX 打包微信小程序。

一、打包前准备
1、工具准备：

HBuilderx、微信开发者工具。

2、申请微信小程序，获取appid

微信公众平台：https://mp.weixin.qq.com/

进入微信公众平台-> 点击立即注册-> 点击小程序-> 点击前往注册

注册好后,扫码登陆平台,找到AppID,作为绑定开发者工具用

或

二、新建项目或者导入现成的开源项目
打开hbuilder编辑器选择文件->新建->项目

试运行：

可能会出现没有配置微信开发工具情况,此时需要配置微信开发者工具路径

注：若遇到这种情况，只需打开某个项目文件即可

注：若不配置这个路径，HBuilderx也会智能查找到对应路径，若查找不到就需要手动配置。

配置微信开发者工具：
打开微信开发者工具>设置>安全设置>开启服务端口

运行：

打开HBuilderx>运行>运行到小程序模拟器>微信开发者工具

运行成功：

三、项目文件结构说明

文件名 用途
pages 用于放置页面文件
static 静态文件位置
App.vue 主文件 同vue
main.js 同vue
manifest.json 项目配置(下文详讲)
pages.json 页面配置(下文详讲)
uni.scss 全局样式文件
3.1 manifest.json配置
此文主要用于开发微信小程序,其他的配置可以暂时不管,选择微信小程序配置

注：这里的基础配置的appid不用设置保持为空即可，这里的appid是 ​​DCloud 提供的应用标识，完全不影响开发和调试微信小程序。

3.2 pages.json
1、核心配置项速查表

2、主要子配置项速查表

四、如何发布小程序
第一步：编译

在 HBuilder X 中，菜单栏点击 ​​【发行】-> 【小程序-微信】​​，然后输入你的小程序 AppID，HBuilder X 就会自动完成编译，并自动打开微信开发者工具。

第二步：点击“上传”按钮
编译完成后，项目会自动在 ​​微信开发者工具​​ 中打开。

点击顶部工具栏上的 ​​【上传】​​ 按钮。

这会要求你输入一个​​版本号​​和​​项目备注​​，然后代码就会被上传到微信的服务器，变成一个 ​​“开发版本”​​。

第三步：提交审核和发布
登录 ​​微信公众平台​​。

进入 ​​【管理】-> 【版本管理】​​。

在 ​​“开发版本”​​ 栏中，你会看到你刚刚上传的代码版本。点击右侧的 ​​【提交审核】​​。

按照提示填写相关信息，等待微信官方审核（通常需要1-7天，如截图所说，第一次较慢）。

​​审核通过后​​，你需要手动在微信公众平台的 ​​“审核版本”​​ 中，点击 ​​【发布】​​，你的小程序才会正式上线给所有用户使用。

总结

​​编译​​：用 HBuilder X 把 uni-app 代码转换成小程序代码。

​​上传​​：在微信开发者工具中点击“上传”，将代码传到微信后台，形成“开发版本”。

​​提交审核​​：登录微信公众平台，将“开发版本”提交给微信官方审核。

​​发布​​：审核通过后，手动操作发布，小程序正式上线。

八、配置服务器域名白名单
入口：微信公众平台(这里必须是企业级)>开发管理>开发设置

注意：所有相关请求都需要配置进去,包括使用的第三方接口如百度、阿里,否则正式服无法访问