美文网首页
开发日记(03) - uni-app 打包为 app

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

作者: SunSeekerX | 来源:发表于2022-03-22 18:44 被阅读0次

    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 开发版本。

    [图片上传失败...(image-b04d9c-1647946070950)]

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

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

      [图片上传失败...(image-c5f9f5-1647946070950)]

    📌 克隆代码

    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 目录下)

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

      [图片上传失败...(image-19a284-1647946070950)]

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

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

      [图片上传失败...(image-1ec139-1647946070950)]

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

      [图片上传失败...(image-459a12-1647946070950)]

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

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

    问题解决

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

      [图片上传失败...(image-e395a1-1647946070950)]

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

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

      [图片上传失败...(image-6a55ed-1647946070950)]

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

      [图片上传失败...(image-61abdb-1647946070950)]

      添加开发账号

      [图片上传失败...(image-cb38fd-1647946070950)]

    📔 开发日记系列

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

    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/

    相关文章

      网友评论

          本文标题:开发日记(03) - uni-app 打包为 app

          本文链接:https://www.haomeiwen.com/subject/nolgfltx.html