uniapp手机端源代码下载地址
下载 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