uni-app x开发商城系统,小程序发布,h5发布,安卓打包

一、概述

上一篇文章,已经实现了扩展组件uni-ui实现底部商品导航

接下来实现,小程序发布,h5发布,安卓打包

二、小程序发布

登录微信小程序,官方地址:https://mp.weixin.qq.com/cgi-bin/wx

注册一个账号,并申请一个小程序

找到开发设置,复制小程序id

8d365e6fc1de0e431617b32628eca170

 编辑配置文件manifest.json,输入小程序id

image

如果要上线,还得改api地址,改成正式域名。

修改 utils/api.ts,将config.baseURL改成正式地址。

/* 1. 全局配置 */
http.setConfig((config) => {
    config.baseURL = 'http://localhost:8082'  // api地址
    config.timeout = 8000  // 单位毫秒,对应8秒
    config.loadingText = '加载中...'
    config.loading = true          // 开启 loading 动画
    return config
})

登录小程序后台,添加服务器域名

73b5a800674cc1e340b52c5053771ff3

 

还得将App.vue里面的字体连接,换成公网访问地址

url('~@/static/font/iconfont.eot?t=1576844226174')

例如:

url('https://gitee.com/test/static/font/iconfont.eot?t=1576844226174')

 

打开微信小程序开发工具,点击右上角的上传即可。

代码上传后,提交审核,等待审核通过

image

三、h5发布

打开HBuilder X编辑器,点击发布h5

image

 输入网站标题,点击发行

image

 等到几分钟,控制台会输出

[HBuilder] 15:48:03.723 项目 my-first-unix 编译成功。
[HBuilder] 15:48:03.856 项目 my-first-unix 导出Web成功,路径为:D:\file\HBuilderProjects\my-first-unix\unpackage\dist\build\web
[HBuilder] 15:48:03.856 注意请部署到web服务器使用,不要使用资源管理器直接打开,除非进行相对路径配置,具体参考:https://ask.dcloud.net.cn/article/37432。

 live-server

live-server是一个提供支持实时刷新的开发环境的工具,通过其核心功能——热更新,能够实时监测并更新源码中的变化。虽然整体代码仅有600行左右,但其实现简洁而高效,吸引了众多开发者。

 

安装live-server

打开cmd窗口,输入以下命令

npm install -g live-server

 进入h5打包目录,运行并制定端口9527

C:\Users\xiao>d:

D:\file\HBuilderProjects\my-first-unix\unpackage\dist\build\web>live-server --port=9527
Serving "D:\file\HBuilderProjects\my-first-unix\unpackage\dist\build\web" at http://127.0.0.1:9527
Ready for changes
GET /favicon.ico 404 1.293 ms - 150

运行完成之后,会自动打开默认浏览器访问页面

调整为手机模式,效果如下

image

四、安卓打包

编辑基本配置

image

 注意: 这里的uni-app引用标识,需要登录uniapp官方账号,就会自动生成。

 

点击安卓apps设置

image

这里可以设置图标,启动设置,可选模块,根据需求进行设置即可。

cpu类型,选择2个

image

 

最后点击,app-Android/IOS-云打包

image

 

选择安卓,点击打包

image

 注意:如果是生产环境,最好用自选证书,根据文档,生成证书。

 

等待一段时间,打包完成后,会提示下载链接。

下载apk文件,使用手机安装,是否正常。

image

 

posted @ 2025-11-06 17:36  肖祥  阅读(12)  评论(0)    收藏  举报