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

一、概述

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

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

二、小程序发布

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

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

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

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

如果要上线，还得改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
})

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

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

复制代码

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

例如：

复制代码

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

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

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

三、h5发布

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

输入网站标题，点击发行

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

复制代码

[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

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

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