发布和部署 - 把你的小程序发布到各个平台

🚀 项目开发完成了，是时候让全世界看到你的作品了！

发布前的准备工作

1. 代码检查和优化

检查清单：

✅ 功能测试完成
✅ 兼容性测试通过
✅ 性能优化完成
✅ 代码注释完善
✅ 错误处理完善
✅ 用户体验优化

代码优化：

javascript

// 移除调试代码
// console.log('调试信息') // 删除这些

// 优化图片资源
// 压缩图片，使用合适的格式

// 清理无用代码
// 删除未使用的组件、样式、函数

// 检查网络请求
// 确保所有API地址正确
// 添加错误处理和超时设置

2. 配置文件检查

manifest.json 配置：

json

{
  "name": "待办事项",
  "appid": "__UNI__XXXXXX",
  "description": "简单实用的待办事项管理工具",
  "versionName": "1.0.0",
  "versionCode": "100",
  "transformPx": false,
  
  // 微信小程序配置
  "mp-weixin": {
    "appid": "你的微信小程序AppID",
    "setting": {
      "urlCheck": false,
      "es6": true,
      "postcss": true,
      "minified": true
    },
    "usingComponents": true
  },
  
  // 支付宝小程序配置
  "mp-alipay": {
    "usingComponents": true,
    "component2": true
  },
  
  // H5配置
  "h5": {
    "title": "待办事项",
    "template": "index.html",
    "router": {
      "mode": "hash"
    },
    "optimization": {
      "treeShaking": {
        "enable": true
      }
    }
  }
}

发布到微信小程序

1. 申请微信小程序账号

注册账号：
- 访问微信公众平台
- 选择"小程序"类型注册
- 完成邮箱验证和信息填写
完善信息：
- 填写小程序基本信息
- 上传小程序头像
- 设置服务类目
- 完成微信认证（如需要）
获取AppID：
- 在"开发" → "开发设置"中获取AppID
- 将AppID填入manifest.json

2. 配置开发环境

下载微信开发者工具：

访问微信开发者工具官网
下载并安装对应版本

配置HBuilderX：

javascript

// 在HBuilderX中配置微信开发者工具路径
// 工具 → 设置 → 运行配置 → 微信开发者工具路径

3. 编译和预览

编译项目：

bash

# 在HBuilderX中
# 运行 → 运行到小程序模拟器 → 微信开发者工具

预览测试：

javascript

// 在微信开发者工具中
// 1. 检查代码是否正常运行
// 2. 测试各个功能
// 3. 检查性能和体验
// 4. 使用真机预览测试

4. 上传代码

在微信开发者工具中：

点击"上传"按钮
填写版本号和项目备注
上传成功后在微信公众平台查看

在微信公众平台中：

进入"版本管理"
选择开发版本提交审核
填写版本信息和功能描述

5. 审核和发布

提交审核：

javascript

// 审核信息填写
{
  "版本描述": "待办事项管理工具，支持添加、编辑、删除待办事项",
  "功能页面": [
    "pages/index/index - 待办事项列表",
    "pages/add-todo/add-todo - 添加待办事项",
    "pages/categories/categories - 分类管理"
  ],
  "测试账号": "如果需要登录功能，提供测试账号"
}

审核通过后发布：

审核通过后会收到通知
在"版本管理"中点击"发布"
小程序正式上线

发布到支付宝小程序

1. 申请支付宝小程序

注册账号：
- 访问支付宝开放平台
- 创建小程序应用
- 完成开发者认证
配置应用信息：
- 填写应用基本信息
- 设置应用类目
- 配置功能权限

2. 编译和上传

编译项目：

bash

# 在HBuilderX中
# 运行 → 运行到小程序模拟器 → 支付宝开发者工具

上传代码：

javascript

// 在支付宝开发者工具中
// 1. 点击"上传"
// 2. 填写版本信息
// 3. 上传到支付宝开放平台

3. 提交审核

在支付宝开放平台：

进入应用详情页
选择版本管理
提交审核并填写相关信息
等待审核结果

发布到H5

1. 编译H5版本

配置H5参数：

json

// manifest.json中的h5配置
"h5": {
  "title": "待办事项",
  "template": "index.html",
  "router": {
    "mode": "hash",  // 或 "history"
    "base": "/todo-app/"
  },
  "publicPath": "/todo-app/",
  "optimization": {
    "treeShaking": {
      "enable": true
    }
  },
  "uniStatistics": {
    "enable": false
  }
}

编译命令：

bash

# 在HBuilderX中
# 发行 → 网站-H5手机版

2. 部署到服务器

上传文件：

bash

# 将dist/build/h5目录下的文件上传到服务器
# 可以使用FTP、SCP或其他方式

# 目录结构
your-domain.com/todo-app/
├── static/
├── index.html
└── ...其他文件

配置服务器：

nginx

# Nginx配置示例
server {
    listen 80;
    server_name your-domain.com;
    
    location /todo-app/ {
        root /var/www/html;
        try_files $uri $uri/ /todo-app/index.html;
    }
}

发布到App Store

1. 生成App

配置App信息：

json

// manifest.json中的app配置
"app-plus": {
  "usingComponents": true,
  "nvueStyleCompiler": "uni-app",
  "compilerVersion": 3,
  "splashscreen": {
    "alwaysShowBeforeRender": true,
    "waiting": true,
    "autoclose": true,
    "delay": 0
  },
  "modules": {},
  "distribute": {
    "android": {
      "permissions": [
        "&lt;uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/&gt;",
        "&lt;uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/&gt;",
        "&lt;uses-permission android:name=\"android.permission.VIBRATE\"/&gt;",
        "&lt;uses-permission android:name=\"android.permission.READ_LOGS\"/&gt;",
        "&lt;uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/&gt;",
        "&lt;uses-feature android:name=\"android.hardware.camera.autofocus\"/&gt;",
        "&lt;uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/&gt;",
        "&lt;uses-permission android:name=\"android.permission.CAMERA\"/&gt;",
        "&lt;uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/&gt;",
        "&lt;uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/&gt;",
        "&lt;uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/&gt;",
        "&lt;uses-permission android:name=\"android.permission.WAKE_LOCK\"/&gt;",
        "&lt;uses-permission android:name=\"android.permission.FLASHLIGHT\"/&gt;",
        "&lt;uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/&gt;"
      ]
    },
    "ios": {},
    "sdkConfigs": {}
  }
}

云打包：

bash

# 在HBuilderX中
# 发行 → 原生App-云打包
# 选择平台（Android/iOS）
# 配置证书和签名
# 开始打包

2. 发布到应用商店

Android应用商店：

Google Play Store
华为应用市场
小米应用商店
应用宝等

iOS App Store：

需要Apple开发者账号
使用Xcode上传
通过App Store Connect管理

版本管理和更新

1. 版本号管理

语义化版本：

javascript

// 版本号格式：主版本号.次版本号.修订号
// 例如：1.0.0 → 1.0.1 → 1.1.0 → 2.0.0

const versionRules = {
  "主版本号": "不兼容的API修改",
  "次版本号": "向下兼容的功能性新增",
  "修订号": "向下兼容的问题修正"
}

2. 更新策略

小程序更新：

javascript

// 在App.vue中检查更新
export default {
  onLaunch() {
    // 检查小程序更新
    if (uni.canIUse('getUpdateManager')) {
      const updateManager = uni.getUpdateManager()
      
      updateManager.onCheckForUpdate((res) => {
        if (res.hasUpdate) {
          console.log('发现新版本')
        }
      })
      
      updateManager.onUpdateReady(() => {
        uni.showModal({
          title: '更新提示',
          content: '新版本已经准备好，是否重启应用？',
          success: (res) => {
            if (res.confirm) {
              updateManager.applyUpdate()
            }
          }
        })
      })
    }
  }
}

发布后的维护

1. 数据统计

用户行为统计：

javascript

// 使用uni统计
// 在manifest.json中配置
"uniStatistics": {
  "enable": true
}

// 自定义事件统计
uni.report('event_name', {
  action: 'click',
  page: 'index'
})

2. 错误监控

错误收集：

javascript

// 全局错误处理
Vue.config.errorHandler = function (err, vm, info) {
  console.error('Vue错误:', err)
  // 上报错误信息
  reportError({
    error: err.message,
    stack: err.stack,
    info: info,
    userAgent: navigator.userAgent,
    timestamp: new Date().toISOString()
  })
}

// 网络请求错误处理
uni.addInterceptor('request', {
  fail(err) {
    console.error('网络请求失败:', err)
    // 上报网络错误
  }
})

3. 用户反馈

反馈收集：

javascript

// 添加反馈功能
const feedbackMethods = {
  // 应用内反馈
  inAppFeedback() {
    uni.navigateTo({
      url: '/pages/feedback/feedback'
    })
  },
  
  // 客服会话
  customerService() {
    // 微信小程序
    uni.openCustomerServiceConversation({
      sessionFrom: 'todo-app'
    })
  },
  
  // 邮件反馈
  emailFeedback() {
    // 引导用户发送邮件
  }
}

小结

今天我们学习了：

✅ 发布前的准备工作
✅ 发布到微信小程序的完整流程
✅ 发布到支付宝小程序
✅ 发布到H5和App
✅ 版本管理和更新策略
✅ 发布后的维护工作

发布要点：

充分测试再发布
遵循各平台规范
做好版本管理
持续优化和维护

系列总结

经过20篇文章的学习，我们从零开始：

了解了UniApp的基本概念
搭建了开发环境
学习了项目结构和路由
掌握了各种组件的使用
学会了API调用和数据处理
完成了完整的实战项目
最终成功发布到各个平台

恭喜你完成了UniApp小程序开发的学习之旅！ 🎉

现在你已经具备了：

UniApp开发的基础知识
实际项目开发经验
发布部署的能力
持续学习的方向

继续加油，用你学到的知识创造更多优秀的应用吧！

学习永无止境，技术日新月异。保持好奇心，持续学习，你会走得更远！

🧭 快速导航

发布和部署 - 把你的小程序发布到各个平台 ​

发布前的准备工作 ​

1. 代码检查和优化 ​

2. 配置文件检查 ​

发布到微信小程序 ​

1. 申请微信小程序账号 ​

2. 配置开发环境 ​

3. 编译和预览 ​

4. 上传代码 ​

5. 审核和发布 ​

发布到支付宝小程序 ​

1. 申请支付宝小程序 ​

2. 编译和上传 ​

3. 提交审核 ​

发布到H5 ​

1. 编译H5版本 ​

2. 部署到服务器 ​

发布到App Store ​

1. 生成App ​

2. 发布到应用商店 ​

版本管理和更新 ​

1. 版本号管理 ​

2. 更新策略 ​

发布后的维护 ​

1. 数据统计 ​

2. 错误监控 ​

3. 用户反馈 ​

小结 ​

系列总结 ​

发布和部署 - 把你的小程序发布到各个平台

发布前的准备工作

1. 代码检查和优化

2. 配置文件检查

发布到微信小程序

1. 申请微信小程序账号

2. 配置开发环境

3. 编译和预览

4. 上传代码

5. 审核和发布

发布到支付宝小程序

1. 申请支付宝小程序

2. 编译和上传

3. 提交审核

发布到H5

1. 编译H5版本

2. 部署到服务器

发布到App Store

1. 生成App

2. 发布到应用商店

版本管理和更新

1. 版本号管理

2. 更新策略

发布后的维护

1. 数据统计

2. 错误监控

3. 用户反馈

小结

系列总结