开发日记(03) - uni-app 打包为 app

SunSeekerX -

uni-app 打包为 app

📌 前置条件

新手向，但需要有一些开发基础。

Git

  1. 官网下载：https://git-scm.com/downloads

  2. 使用以下命令验证是否可用

    git version
# 示例输出
# git version 2.32.0 (Apple Git-132)

NodeJS

nodejs 使用 lts 长期支持版本就行。

  1. 官网下载：https://nodejs.org/zh-cn/download/

  2. 使用以下命令验证是否可用

    node -v
# 示例输出
# v16.14.1

  3. 安装全局需要用到的工具，如果是 mac 系统需要加 sudo

    npm i yarn tbify -g

# yarn: nodejs 包管理
# tbify: 国内加速下载代理

    验证是否安装成功

    tyn -v
# 示例输出
# 1.22.17

tnpm -v
# 示例输出
# 8.5.0

HbuilderX

下载正式版本下的 app 开发版本。

  1. 官网下载：https://www.dcloud.io/hbuilderx.html

  2. 安装 sass 编译插件：https://ext.dcloud.net.cn/plugin?name=compile-node-sass

📌 克隆代码

git clone [你项目的git地址]

# 示例
git clone https://github.com/SunSeekerX/uni-app-starter.git

📌 安装项目依赖

uni-app 项目有两种类型，

  • 一种是通过 HbuilderX 工具创建的
  • 一种是通过命令行工具创建的

我比较喜欢命令行工具创建的，因为所有依赖都能自己管理。同时也能进行 ci&cd集成，HbuilderX 创建的则更为简单方便。

辨别方式

  • HbuilderX 工具创建
  • 项目根目录下一般无 src 文件夹
  • pages 文件夹在根目录
  • 命令行工具
    • 项目下有 src 文件夹
    • pages 文件夹在 src 目录下
    • 和 vue-cli 创建的项目类似

进入到项目根目录执行

tyn

如果项目还有其他的步骤请根据项目说明文件继续操作。

📌 打包为 app

  1. 确认项目配置，找到 manifest.json 配置文件（HbuilderX 工具创建的项目在根目录下，命令行工具创建的项目在 src 目录下）

    配置好应用名称和，版本名称，以及版本号等相关信息。

  2. 在左侧项目管理面板选中需要打包的项目（可以点击两下项目）

  3. 选择发行 => 原生 APP-云打包

  4. 填写相关的信息，生成安卓证书，以及下载 ios 开发证书的方法不在本教程讨论！

  5. 提交云打包，如果本地安装了 android 开发环境，或者 ios 打包安装了 xcode 环境的话可以使用快速安心打包，如果是没有改动原生代码或配置，仅在第一次打包的时候会消耗云打包服务次数，后面的就不会消耗了。

  6. 打包完成会返回一个下载地址，通过下载地址就能下载了。

问题解决

  1. 你今天已打包很多次了，让云打包服务器休息休息吧，你可以明天再来。

    打包太多次了，重新注册一个账号加入到项目的开发者中继续打包。或者使用离线打包。

  2. 此应用 DCloud APPID 非当前账号所有，请联系应用所有者（即此Appid的创建者）设置你的账号为协作者（在https://dev.dcloud.net.cn操作），或重新生成 APPID 后打包。

    如果是测试，可以重新生成 APPID 打包，如果是团队项目，不能重新生成 APPID。使用项目所属的账号登录 https://dev.dcloud.net.cn 添加你现在登录在 HbuilderX 的账号到项目成员。

    添加开发账号

📔 开发日记系列

只记录些平时开发觉得有用的东西，有问题请务必斧正，拜托了 🙏🙏🙏

  1. 开发日记(01) - uni-app 使用等宽字体对其数字显示
  2. 开发日记(02) - js 异步任务队列
  3. 开发日记(03) - uni-app 打包为 app

关于我

SunSeekerX，

全栈开发、区块链开发、移动端开发、前后端开发、NodeJS 开发、小程序、uni-app 开发、等

喜欢探讨技术实现方案和细节，完美主义者，见不得 bug。

Github：https://github.com/SunSeekerX

个人博客：https://yoouu.cn/

个人在线笔记：https://doc.yoouu.cn/