Полное руководство по разработке перекрестных приложений, упаковке и публикации с помощью uniapp.
Полное руководство по разработке перекрестных приложений, упаковке и публикации с помощью uniapp.

1. Знакомство с проектом uni-app

Используйте uni-app для разработки проектов с несколькими терминалами. Один набор кода может одновременно упаковывать небольшие программы, h5 и приложения для каждого терминала. uni-app поддерживает создание проектов через визуальный интерфейс HBuilderX и командную строку vue-cli. В следующем примере проекта используется визуализация HBuilderX. Для создания интерфейса проект cli может обратиться к документации uni. Большинство процессов являются общими.

Структура проекта:

Язык кода:javascript
копировать
├── common           API-файл  
├── components       Общие компоненты  
├── libs             общедоступный метод  
├── pages            страница  
├── static           Локальные статические ресурсы. Обратите внимание: статические ресурсы можно хранить только здесь.  
├── store            Управление статусами  
├── styles           публичный стиль  
├── config.js        Конфигурационный файл  
├── manifest.json    Настройте информацию об упаковке, такую ​​как имя приложения, идентификатор приложения, логотип, версия и т. д. Подробности см.  
├── pages.json       Настройка страницы маршрутизации, Панель навигации、Вкладки и другая информация, например страница  
└── unpackage  
    ├── res          Значок, стартовая страница  
    ├── cert         Файл сертификата приложения  
    └── dist         упакованные файлы

2. Зарегистрируйте учетную запись разработчика и создайте приложение.

Прежде чем начать разработку, вам необходимо зарегистрировать учетную запись в бэкэнде разработчика uni, войти по адресу регистрации: https://dev.dcloud.net.cn/, а затем создать в нем собственное приложение:

3. Установите инструмент разработки HBuilderX.

H Builder — запускается во встроенном браузере и может выполнять отладку напрямую, как в браузере.

При публикации приложения вам необходимо использовать HBuilderX. Другие инструменты разработки не могут публиковать приложения, но вы можете публиковать H5 и различные небольшие программы. Если вам нужно разработать приложение, вы можете сначала запустить его в HBuilderX, затем изменить и сохранить код в других редакторах. После изменения кода он будет автоматически синхронизирован с базой мобильного телефона. Адрес загрузки HBuilderX: https://www.dcloud.io/hbuilderx.html.

4. Создавайте и запускайте проекты

Сначала установите некоторые часто используемые плагины:

  • Встроенный браузер
  • компиляция uni-app (Vue2)
  • компиляция uni-приложения (Vue3)
  • Отладка приложений
  • Приложение работает на реальной машине
  • Облачная упаковка приложений
  • scss/sass компиляция
  • стилус компиляция

Через верхнее меню HBuilderX: Инструменты — Установка плагина.

Создать проект

Создать новый проект можно через верхнее меню HBuilderX: Файл - Новый - Проект, импортировать существующий проект: Файл - Импортировать - Из...

Запустить проект

Запустить проект Через верхнее меню HBuilderX: Выполнить - Запустить в..., вы можете выбрать сначала на этапе разработки: запустить во встроенном браузере. Если возникает ошибка, что плагин xx отсутствует, просто следуйте подсказкам, чтобы установить соответствующий плагин, и затем запустите его еще раз.

5. Мини-программа и упаковка H5.

Конфигурацию каждой платформы можно настроить непосредственно в файле манифест.json или выбрать файл манифест.json в инструменте разработки HBuilderX, и справа появится графический интерфейс для непосредственного выбора конфигурации.

Сначала запустите его, затем нажмите: Выпустить — Мини-программа/Веб-сайт — Установить мини-программу/Имя веб-сайта/appid/Имя домена. После успешной упаковки вы сможете найти файл упаковки для соответствующей платформы в папке dist — build (соответствующей папке. dist — каталог dev. Это рабочий файл для каждой платформы)

6. Упаковка приложений Android

1. Нажмите: «Родная упаковка App-Cloud».

2. Заполните следующие инструкции согласно README.md в каталоге unpackage/cert:

Имя пакета Android, псевдоним сертификата, пароль закрытого ключа сертификата и выберите файл сертификата (нажмите кнопку обзора и выберите каталог unpackage/cert. Чтобы создать сертификат разработки Android, обратитесь к инструкциям в конце статьи).

3. Нажмите кнопку пакета.

7. Упаковка приложений iOS

1. Нажмите: «Родная упаковка App-Cloud».

2. Заполните следующие инструкции в файле README.md в каталоге unpackage/cert:

Идентификатор пакета (AppID), пароль закрытого ключа сертификата, файл профиля сертификата и сертификат закрытого ключа (нажмите кнопку обзора и выберите каталог распаковки/сертификата).

3. Нажмите кнопку пакета.

После нажатия кнопки упаковки с помощью облачной упаковки необходимо подождать некоторое время, от нескольких минут до длительного времени... После успешной окончательной упаковки на консоли будет напечатан адрес загрузки установочного файла приложения. :

Android: файл apk, нажмите «Открыть каталог», сгенерированный файл apk находится в папке unpackage/release/apk.

IOS: файл ipa, нажмите «Загрузить адрес» напрямую, чтобы загрузить удаленно на локальный компьютер.

8. Релиз и запуск

1. Мини программа Импортируйте напрямую с помощью инструментов разработчика мини-программ. dist - build Соответствующий каталог в папке, например апплет WeChat: dist/build/mp-weixin.

2、H5 Как и на веб-сайте, разверните окончательный упакованный файл H5 онлайн: dist/build/h5.

3、Android Окончательно сгенерированный apk-файл можно напрямую отправить на телефон Android для установки и использования с помощью инструмента чата. Зарегистрируйтесь на основных учетных записях рынка приложений Android и загрузите их на рынок приложений, чтобы пользователи могли их загрузить. * Вы также можете самостоятельно разработать страницу выпуска, поместить APK-файл Android в проект, и пользователь нажмет кнопку, чтобы загрузить его непосредственно на телефон. Если устройство iOS, вы также можете напрямую определить адрес загрузки из магазина приложений и перейти к нему.

4、IOS

① Официальная версия

Официальные приложения для iOS можно загрузить только из магазина приложений. Сначала вам необходимо зарегистрировать учетную запись разработчика Apple, заполнить различную информацию о приложении и загрузить ipa-файл для проверки, прежде чем вы сможете его загрузить и использовать.

② Тестовая версия

При тестировании ios-приложения загрузите ipa-файл в Dandelion: https://www.pgyer.com/

Используйте авторизованный мобильный телефон Apple, чтобы отсканировать QR-код и открыть его в браузере Safari, чтобы загрузить и установить его напрямую, или напрямую введите «адрес загрузки» в браузере Safari.

Вложение: Создание сертификата разработки Android под Windows.

Платформа Android упаковывает и публикует apk-приложения, которые необходимо подписать цифровым сертификатом (файлом .keystore), чтобы указать личность разработчика. Сертификаты Android создаются самостоятельно, бесплатно и не требуют одобрения или оплаты. .

Его можно создать с помощью команды keytool в среде JRE. Ниже описано, как сгенерировать сертификат на платформе Windows:

1. Установите среду JRE.

Вы можете загрузить установочный пакет jre с официального сайта Oracle: https://www.oracle.com/technetwork/java/javase/downloads/index.html (запомните путь установки, он понадобится вам при создании сертификата позже)

Откройте командную строку (cmd), вы можете сначала переключиться на создаваемый каталог, я сгенерировал входные данные непосредственно в корневом каталоге диска D:

Язык кода:javascript
копировать
d:

3. Добавьте путь установки JRE в переменную системной среды.

Моя JRE установлена ​​на диске D "D:\Programs\jre\bin"

Язык кода:javascript
копировать
set PATH=%PATH%;"D:\Programs\jre\bin"

Будьте осторожны и не укажите здесь неправильный путь установки. В начале пути в разделе «Программы» отсутствует буква «s». Затем я продолжаю получать сообщение об ошибке: keytool не является внутренней или внешней командой и не является работоспособной программой.

4. Используйте команду keytool -genkey для создания сертификата.

Язык кода:javascript
копировать
keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore android.keystore
  • testalias: псевдоним сертификата, который можно изменить в зависимости от символов, которые вы хотите установить. Рекомендуется использовать английские буквы и цифры.
  • android.keystore: имя файла сертификата. Его можно изменить на имя файла, которое вы хотите установить, или вы можете указать полный путь к файлу.
  • 36500: срок действия сертификата, указывающий 100 лет действия, в днях. Рекомендуется установить более длительный срок, чтобы избежать истечения срока действия сертификата.

После ввода информации в соответствии с запросом в корневом каталоге диска D будет создан файл android.keystore. Этот файл можно использовать для непосредственной упаковки приложений Android.

boy illustration
Неразрушающее увеличение изображений одним щелчком мыши, чтобы сделать их более четкими артефактами искусственного интеллекта, включая руководства по установке и использованию.
boy illustration
Копикодер: этот инструмент отлично работает с Cursor, Bolt и V0! Предоставьте более качественные подсказки для разработки интерфейса (создание навигационного веб-сайта с использованием искусственного интеллекта).
boy illustration
Новый бесплатный RooCline превосходит Cline v3.1? ! Быстрее, умнее и лучше вилка Cline! (Независимое программирование AI, порог 0)
boy illustration
Разработав более 10 проектов с помощью Cursor, я собрал 10 примеров и 60 подсказок.
boy illustration
Я потратил 72 часа на изучение курсорных агентов, и вот неоспоримые факты, которыми я должен поделиться!
boy illustration
Идеальная интеграция Cursor и DeepSeek API
boy illustration
DeepSeek V3 снижает затраты на обучение больших моделей
boy illustration
Артефакт, увеличивающий количество очков: на основе улучшения характеристик препятствия малым целям Yolov8 (SEAM, MultiSEAM).
boy illustration
DeepSeek V3 раскручивался уже три дня. Сегодня я попробовал самопровозглашенную модель «ChatGPT».
boy illustration
Open Devin — инженер-программист искусственного интеллекта с открытым исходным кодом, который меньше программирует и больше создает.
boy illustration
Эксклюзивное оригинальное улучшение YOLOv8: собственная разработка SPPF | SPPF сочетается с воспринимаемой большой сверткой ядра UniRepLK, а свертка с большим ядром + без расширения улучшает восприимчивое поле
boy illustration
Популярное и подробное объяснение DeepSeek-V3: от его появления до преимуществ и сравнения с GPT-4o.
boy illustration
9 основных словесных инструкций по доработке академических работ с помощью ChatGPT, эффективных и практичных, которые стоит собрать
boy illustration
Вызовите deepseek в vscode для реализации программирования с помощью искусственного интеллекта.
boy illustration
Познакомьтесь с принципами сверточных нейронных сетей (CNN) в одной статье (суперподробно)
boy illustration
50,3 тыс. звезд! Immich: автономное решение для резервного копирования фотографий и видео, которое экономит деньги и избавляет от беспокойства.
boy illustration
Cloud Native|Практика: установка Dashbaord для K8s, графика неплохая
boy illustration
Краткий обзор статьи — использование синтетических данных при обучении больших моделей и оптимизации производительности
boy illustration
MiniPerplx: новая поисковая система искусственного интеллекта с открытым исходным кодом, спонсируемая xAI и Vercel.
boy illustration
Конструкция сервиса Synology Drive сочетает проникновение в интрасеть и синхронизацию папок заметок Obsidian в облаке.
boy illustration
Центр конфигурации————Накос
boy illustration
Начинаем с нуля при разработке в облаке Copilot: начать разработку с минимальным использованием кода стало проще
boy illustration
[Серия Docker] Docker создает мультиплатформенные образы: практика архитектуры Arm64
boy illustration
Обновление новых возможностей coze | Я использовал coze для создания апплета помощника по исправлению домашних заданий по математике
boy illustration
Советы по развертыванию Nginx: практическое создание статических веб-сайтов на облачных серверах
boy illustration
Feiniu fnos использует Docker для развертывания личного блокнота Notepad
boy illustration
Сверточная нейронная сеть VGG реализует классификацию изображений Cifar10 — практический опыт Pytorch
boy illustration
Начало работы с EdgeonePages — новым недорогим решением для хостинга веб-сайтов
boy illustration
[Зона легкого облачного игрового сервера] Управление игровыми архивами
boy illustration
Развертывание SpringCloud-проекта на базе Docker и Docker-Compose