您现在的位置是：首页 > cms教程 > shopxo教程shopxo教程

shopxo使用HBuilderX打包方法

阿兰2025-07-26shopxo教程已有人查阅

导读进入uniapp官网下载软件根据自己的操作系统选择正式版本下载HBuilderX安装后我们这里采用uniapp插件市场一键导入也可以通过其他平台下载压缩包或者uniapp市场下载压缩包

下载HBuilderX工具
进入uniapp官网下载软件
根据自己的操作系统选择正式版本下载
HBuilderX安装后
我们这里采用uniapp插件市场一键导入
也可以通过其他平台下载压缩包或者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目录下面或者同级，然后域名加目录名称去访问即可
如果需要修改手机端配色、使用默认主题样式插件修改

在线下载列表

uniapp手机端源代码下载地址