一文带你熟悉uni-app开发多端的整体流程及各端发布

txm
5,728 阅读10分钟

如今前端领域技术五花八门，随之的技术框架也越来越多，暗示着前端开发需要学习了解技术越来越广。今天我们来聊聊跨平台框架之 Uni-App。

这里笔者就不把 Uni-App 来拿和其他跨平台框架进行对比了，直接分析一下若使用 Uni-App 开发一个应用。不过，笔者希望有兴趣的小伙伴也了解学习下其他跨平台框架（像Taro、Weex、RN、Flutter等），毕竟技多不压身嘛~

前言

使用 uni-app 开发项目需要满足开发者的两个条件：

  1. 熟悉 Vue
  2. 熟悉原生微信小程序

uni-app 非常简单，只需会上面两种技术就完全可以独立负责一个项目的所有前端工作

项目初始化工作

创建项目

  • 方式一：命令行

    注意：确保电脑安装了Vue环境
vue create -p dcloudio/uni-preset-vue my-project

  • 方式二：HBuilderX 可视化界面

项目前期准备

  • 规划好项目目录结构
    1. components - 存放项目公共的组件
    2. pages - 存放项目的业务组件
    3. static - 存放静态资源
    4. common - 存放一些公共的 css、js 和请求封装等
    5. store - 存放项目中需要共享的状态
    6. ...
  • 在 manifest.json 中配置好各个平台的系统配置

运行软件&开发工具安装

  • 代码编写软件：HBuilder X
  • 微信小程序运行软件：微信开发者工具
  • 支付宝小程序运行软件：支付宝开发者工具
  • H5 运行环境：浏览器
  • Android 运行软件：安卓模拟器（推荐大家windows平台使用“雷电模拟器”）
  • IOS 运行软件：苹果模拟器
  • ...

如何运行各端

傻瓜式运行！！！点击HBbuilderX工具上的顶部工具栏，点击 运行，选中自己想要的那个平台即可。

微信小程序端

申请公司企业级微信小程序账号

  1. 第一步：打开 微信公众平台 进行小程序账号注册
  2. 登录注册时填写的邮箱，点击链接激活小程序
  3. 填写小程序相关信息
  4. 选择企业注册，填写企业名称、上传营业执照等等...
  5. 申请成功后，腾讯会向公司账户进行小额打款并进行电话确认
  6. 进行微信认证，需支付300元。1~2天即可认证成功

微信小程序的版本

  • 开发版
  • 体验版
  • 线上版

如果要发体验版本的话，建议点击工具状态栏上的 发行，选择微信小程序，再上传到微信后台。这样子打包体积会小一点！

上线发布流程

第一步：使用 HBuiderX 进行打包，此时会自动打开“微信开发者工具”

注意事项：

  1. 确保代码是完整的最新的
  2. 检查接口域名地址是否是线上环境域名
  3. 去掉本地项目里无用的代码
  4. 确定小程序 `appId` 是否正确

第二步：点击“微信开发者工具”，右上角“上传”

注意事项：

1. 上传的内容不得超过2M（需优化代码，减少本地资料，采用网络地址）
2. 填写上传的版本信息（**注意：**上传的当前的版本号要比上一次版本号大）

第三步：打开登录微信公众平台

注意事项：

1. 上一步操作完成后，可在“版本管理” -> “开发版本”中设置为体验版
2. 体验版在体验时，若域名和上一次的体验版有修改，先删除上一版，重新扫码即可（防止数据不对）
3. 提交申请前，确保小程序内的所有内容已经在服务类目中有体现
4. 提交申请时，填写好测试数据（比如：测试账号密码等）

第四步：将体验版提交审核

注意事项：

​ 1. 一定要确保体验版所有功能完好

第五步： 等待审核

注意事项：

1. 没有勾选加速审核，一般审核时间周期为1~2天左右
2. 除了紧急上线的版本勾选下加速，因为一年只有三次机会
3. 若点了加速审核，审核失败。在12个小时内可重新修改完成以上步骤重新提交审核会被有限审核

第六步：提交发布

注意事项：

1. 审核完毕，点击提交发布，管理员扫码确认
2. 若提交成功，差不多半个小时左右即可发布

额外知识点：

1. 可在小程序后台“用户反馈”那里看到用户反馈的问题，开发者对着做相应的修改
2. 可在小程序后台“开发”里配置测试、线上等服务器域名
3. 当小程序评测达标后，会有2小时极速审核的奖励（这个就很棒了）
4. 可在小程序后台添加“客服”功能
5. ...

支付宝小程序端

申请公司企业级支付宝小程序账号

  1. 第一步：打开 支付宝平台，选择账号密码登录下方的免费注册 进行小程序账号注册
  2. 登录注册时填写的邮箱，点击链接激活小程序
  3. 具体不细说了，账号申请都是需要填写什么就填写什么，按照步骤来即可申请成功。

如果要发体验版本的话，建议点击工具状态栏上的发行，选择支付宝小程序，再上传到支付宝后台。这样子打包体积会小一点！

上线发布流程

第一步：使用 HBuiderX 进行打包，此时会自动打开“小程序开发者工具”

第二步：点击“小程序开发者工具”，右上角“上传”

第三步：打开，登录 “支付宝开放平台”

第四步：将本地提交的版本设置为体验版测试无误后提交审核

第五步： 等待审核

第六步：提交发布

注意点：

1. 配置应用公钥私钥、支付宝公钥给后台同事
2. 调起支付宝支付的 `orderInfo` 参数
3. 几个组件支付宝端要单独写，像显示输入密码框 `<input password />`
4. ...

总结：整体流程和微信小程序类似~

H5端

申请公司企业级微信公众号（注意：申请服务号，不然做不了微信支付）

  • 申请公众号账号按照步骤来，等待即可
  • 有些参数可以要后台同事添加到重定向地址栏上；像 openId等
  • 授权获取用户信息，重要字段：openId 、 unionId等

上线发布流程

第一步：使用 HBuiderX 进行打包，填写网址标题和域名

第二步：将打包好的 build -> h5文件夹上传到服务器上

注意点：

1. `H5` 端会存在跨域问题，配置不对导致接口调不通
2. `JS-SDK` 的使用，像扫一扫、登录、分享等等
3. `H5` 端支付 -> `window`下面的 `WeixinJSBridge`
4. `H5` 端打包提交过大
5. 移动端如何查看日志 `vConsole`
6. ....

温馨提示：

1. `http-server` 开启本地服务器
2. `natapp` 内网穿透，将本地域名映射到外网
3. `Xshell` 、`Xftp`这两款软件很方便将本地资源放到服务器上

开车啦~

Android端

申请安卓证书

  1. 确保电脑按照了Java环境
  2. 生成签名证书
keytool -genkey -alias test -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore

-alias test: 表示证书的别名
-keyalg RSA: 采用 RSA 算法
-validity 36500: 证书的有效天数
keystore test.keystore: 生成的证书文件
输入完上面这条命令后，回车，要求输入一些信息，输入即可

注意: 使用管理员的 cmd 窗口

申请各大发布平台

常见的安卓发布市场有：小米、华为、vivo、oppo等！各大平台申请操作类似

上线发布流程

第一步：使用 HBuiderX 进行云打包

第二步：填写申请的证书密钥、profile文件、密钥证书等信息

第三步：等待一会，复制下载地址下载即可

第四步：填写好安卓应用市场应用的基本信息上传 apk 包

第五步：提交审核、等待审核结果

第六步：应用上架

注意点：

  1. 安卓 微信支付 需要在 微信开放平台 创建移动应用获取 appId
  2. 安卓 支付宝支付 需要在 支付宝开放平台 创建移动应用获取 appId
  3. 不要经常云打包，需要测试第三方打包测试的话，可采用 自定义基座 打包
  4. 真机调试 和 本地 安卓模拟器如何打 log
  5. 安卓各种尺寸图标
  6. 安卓端离线打包（Android Studio）
  7. ...

温馨提示：

  1. 安卓模拟器采用 - 雷电模拟器

IOS端

申请苹果开发者账号

苹果账号类型分为：个人、公司、企业。我们申请企业的账号就行~

  1. 注册 苹果账号apple id
  2. 开启双重认证，需在一台 IOS 手机 iPad 操作
  3. 在App Store下载Apple Developer APP 进行注册开发者账号
  4. 去Apple Developer应用填写申请资料
  5. 绑定支付宝或者微信支付苹果年费（¥688元/年）

申请iOS证书(.p12)和描述文件(.mobileprovision)

步骤如下：

  1. 生成证书请求文件
  2. 申请开发（Development）证书和描述文件
  3. 申请发布（Production）证书和描述文件

申请步骤详情可参考官网教程：申请iOS证书(.p12)和描述文件(.mobileprovision)

注意：发布证书打包的 ipa 文件，不可以直接安装到手机上

上线发布流程

App Store 上架步骤流程： 兼容检查 -> 账号申请 -> 证书申请 -> 发布准备 -> App Store 上架 -> 审核后续

第一步：使用 HBuiderX 进行云打包

第二步：填写申请的证书密钥、profile文件、密钥证书等信息

第三步：等待一会，复制下载地址下载即可

第四步：填写好 App store connect 的基本信息上传 .ipa 包

步骤如下：

1. [应用商店](https://appstoreconnect.apple.com/apps) 创建 `App`
2. 填写 `APP` 各项审核信息
3. 上传 `.ipa` 包至 `App Store Connect` 中

第五步：提交审核、等待审核结果

第六步：应用上架

若配置文件都生成好，苹果和安卓的发布流程差不多，只是填写的配置文件不一样而已！

注意点：

  1. 苹果 微信支付 需要在 微信开放平台 创建移动应用获取 appId
  2. 苹果 支付宝支付 需要在 支付宝开放平台 创建移动应用获取 appId
  3. 不要经常云打包，需要测试第三方打包测试的话，可采用 自定义基座 打包
  4. 真机调试 和 如何将 .ipa 文件安卓到苹果真机上以及 如何将本地的 .ipa 文件上传到 苹果后台
  5. 苹果各种尺寸图标
  6. IOS 端离线打包（ XCode ）

温馨提示：

  1. Cydia Impactor 工具 安装 .ipa 文件到苹果真机上
  2. Transfer 工具 将线上正式 .ipa 包上传到 App Store Connect 中

扩展

  • 封装多端统一的弹框
  • 封装多端统一的支付 【重要】
  • 封装 uni.request 请求
  • 封装公共组件和抽离公共样式
  • 等等...

插件

总结

通过这整个了解，相信小伙伴们对uni-app开发项目的整体流程基本清楚了。当掌握好流程，熟练Vue框架的各种用法，即可在公司单挑一个项目并完成所有平台的工作。

avatar
文章
阅读
粉丝