HBuilderX打包教程 - ShopXO系统使用文档

uniapp手机端源代码下载地址

Gitee：https://gitee.com/zongzhige/shopxo-uniapp

GitHub：https://github.com/gongfuxiang/shopxo-uniapp

Coding： https://zongzhige.coding.net/public/shopxo/uniapp/git

GitCode： https://gitcode.com/zongzhige/shopxo-uniapp

uni-app： https://ext.dcloud.net.cn/plugin?id=6380

下载 HBuilderX 工具

进入uniapp官网下载软件 https://www.dcloud.io/hbuilderx.html

根据自己的操作系统选择正式版本下载

HBuilderX安装后

我们这里采用uniapp插件市场一键导入 https://ext.dcloud.net.cn/plugin?id=6380

也可以通过其他平台下载压缩包或者uniapp市场下载压缩包，将解压后的目录拖入到HBuilderX软件的左侧栏目中即可

一键导入、确认导入

选择vue2版本，项目名称也可以自己修改，导入存放的目录也可以自己更改，点击创建

修改接口地址

App.vue 文件中【数据接口请求地址 和 静态资源地址】改成自己的商城地址

小程序必须采用 https 协议，服务器端需要配置好ssl支持

如果页面内置的图片出不来，可以在静态资源地址后面增加 public/ 结尾，或者服务器把 public 设置为根目录

默认的名称和描述，也可以修改成自己的商城名称和介绍

配置文件中名称修改

点击左侧 pages.json 文件，内容中 navigationBarTitleText 的默认名称也改成自己的商城名称

点击左侧 manifest.json 文件，第二栏目选择 基础配置 右侧可视化中 uniapp(appid) 点击获取自己的appid

左下角先绑定自己在uniapp平台注册的账户

小程序打包需要配置appid

二级栏目选择【微信小程序配置】比如我们这里配置 微信小程序、其他小程序也均如此配置

web/h5打包需要配置

二级栏目选择【Web配置】默认名称和地图平台选择后配置为自己的地图密钥

点击左侧 template.h5.html 文件，内容中修改自己的【网站地址，关键字，描述】

配置好后，开始打包

点击左侧 App.vue 文件后，顶部点击【发行】后选择需要打包的平台

比如我们这里选择【微信小程序】

弹窗里面也可以再次调整正确的小程序appid，其他小程序均这个流程

编译成功后，注意看底部命令行界面

开微信小程序工具：在顶部设置-安全设置(打开安全)HBuilderX会自动打开小程序工具运行，也可以按照以下方式手动导入运行。

其他端小程序工具：在HBuilderX工具编译成功后需手动导入项目运行，源码位置(shopxo-uniapp/unpackage/dist/build/xxx)如微信小程序xxx则是(mp-weixin)。

web/h5：则直接将编译好的【web 或 h5】目录放到服务器端根目录访问即可，public目录下面或者同级，然后域名加目录名称去访问即可

如果需要修改手机端配色、使用 默认主题样式 这个插件修改 https://store.shopxo.net/goods-254.html

打包APP详细教程 https://doc.chuyinshop.com/?g=Doc&m=Article&a=index&id=1