Как фронтенд-кодировщик, это редко связано с необходимостью самостоятельно упаковывать приложение. Чаще мы встраиваем страницы H5 в собственное приложение в режиме гибридной разработки на основе существующего приложения в веб-просмотре. Тем не менее, бизнес-направление автора только что получило необходимость упаковать приложение-оболочку.
фон спроса
Большой экран нашего магазина имеет встроенную систему Android, и мы надеемся, что на большой экран можно будет установить приложение для встраивания существующих страниц бизнес-функций.
Технический отбор
Исходя из вышеперечисленных требований, техническое решение выбрано для принятияAPP套壳+内嵌H5页面Таким образом, вам нужно только разработать установочный пакет APP, подходящий для больших экранов. После того, как план определен, следующее, что нужно сделать, — найти подходящую структуру для разработки установочного пакета приложения.
После сравнения основных кросс-энд фреймворков в отрасли кратко сравниваются и анализируются характеристики и различия:
| Рамка | Android-клиент | Способ упаковки | API системного уровня |
|---|---|---|---|
| Electron | не поддерживается | местный | имеют |
| Cordova | служба поддержки | местная упаковка | имеют |
| Ionic | служба поддержки | местная упаковка | имеют |
| Weex | служба поддержки | местная упаковка | имеют |
| Hippy | служба поддержки | местная упаковка | имеют |
| Flutter | служба поддержки | местная упаковка | имеют |
| RN | служба поддержки | местная упаковка | имеют |
| uniapp | служба поддержки | Локальная упаковка, облачная упаковка | имеют |
| PWA | родной класс | Нет необходимости упаковывать | не имеет |
Из приведенного выше обзора видно, что большинство кросс-энд фреймворков поддерживают только локальную упаковку. Местная упаковка имеет следующие недостатки:
-
Создать локальную среду сложно, общие шаги таковы:
- Установить Android-студию
- Установите Android SDK и настройте переменные среды.
- Настройте эмулятор Android
- Отладка Android-устройств
-
При обслуживании нескольких человек каждый человек должен создавать локальную среду, стоимость высока.
При попытке создать местную среду потребовался день, и в течение этого периода возникали различные проблемы с окружающей средой. Облачная упаковка избавляет от многих проблем, связанных с локальной упаковкой.Проще говоря, облачная упаковка означает, что разработчикам не нужно создавать среду локально, а создавать установочный пакет, совместно используя среду, созданную в облаке. Таким образом, разработчик несет ответственность только за написание кода, а упаковка остается за облачным сервисом, разве это не идеально?
Таким образом, фреймворк естественным образом выбирает вариант с возможностями облачной упаковки.uniapp. Это позволяет нам завершить работу по упаковке приложений с очень небольшими затратами и достичь цели быстрой разработки. Что касаетсяPWA, из-за отсутствия возможностей API системного уровня, естественно, не выбран.
Проектная практика
Установите редактор HBuilderX
uniappФункция облачной упаковки интегрирована в редактор HBuilderX, поэтому сначала нам нужно установить редактор HBuilderX.
Создание проекта приложения
Новый проект приложения
Во-первых, мы сначала создаем новый проект через HBuilderX. Поскольку нам нужна только оболочка APP, мы можем выбрать шаблон по умолчанию.
Проекты, созданные с помощью скаффолдинга Vue, также работают, но их нужно создавать вручную.
manifest.jsonа такжеpages.jsonфайл, когда HBuilderX создает новый проект, он автоматически создает требуемый файл конфигурации. Поэтому рекомендуется создавать проекты прямо на HBuilderX.
Новая структура каталогов проекта выглядит следующим образом:
После того, как проект построен, начинаются ремонтные работы.
Преобразование нативной страницы
С точки зрения требований, в общей сложности требуется две собственные страницы:首页а такжеwebview.
首页Просто предположите функцию страницы плаката открытого экрана.webviewиспользуется для перевозкиH5страница.
Главная: index.vue
Таким образом, нам нужно создать всего две страницы. Во-первых, давайте обновим домашнюю страницуindex.vue:
На домашней странице есть только одно взаимодействие, которое заключается в переходе на страницу веб-просмотра.
страница веб-просмотра: webview.vue
Теперь мы приходим на новую страницу WebViewwebview.vue:
БудуH5Ссылка на страницу настроена наwebviewкомпонентsrcхарактеристики.
Собственная конфигурация маршрутизации страниц
Трансформация страницы завершена, теперь мы трансформируем конфигурацию маршрутизации.pages.json:
Здесь необходимо пояснить: сначала страница веб-просмотра использует не
customрежим и выберите использование панели навигации по умолчанию. Но есть проблема с навбаром по умолчанию, его высота фиксирована44px, неспособный обеспечить отзывчивость, размер устройств с большим экраном велик, что приводит к особенно маленькой панели навигации на большом экране, особенно к кнопке возврата, которую трудно нажать при нажатии. В этот период были попытки использоватьuniappПредоставленная пользовательская панель навигации, но она не будет действовать на странице веб-просмотра. Наконец, мы выбралиcustomрежим, вH5Реализовать эффект панели навигации на странице.
Кроме того, в дополнение к проблеме со встроенной панелью навигации, для клиентского приложения также существует очень важная проблема, связанная с опытом, а именно со строкой состояния в верхней части интерфейса. Как скрыть строку состояния системы?uniappЧиновники также дали план. Так как мы хотим скрыть глобально, поэтому вApp.vueизonLaunchВ функции хука добавьтеplus.navigator.setFullscreen(true)Вы можете следующим образом:
<script>
export default {
onLaunch: function() {
plus.navigator.setFullscreen(true)
}
}
</script>
После завершения настройки маршрутизации необходимо выполнить соответствующую настройку приложения.manifest.json:
Конфигурация приложения
Базовая конфигурация
Первый взгляд基础配置:
здесьAppIDвuniappиз开发者中心Он распространяется DCloud при создании приложения.Если это проект с несколькими людьми, не забудьте войти в приложение и добавить участников проекта.
Конфигурация значка приложения
Далее, чтобы войтиApp图标配置:
Иконки проектов хранятся вstaticкаталог, иначе файл не будет найден.
Выше мы завершили работу по преобразованию и настройке проекта, а затем мы начинаем наше путешествие по упаковке.
облачная упаковка
В редакторе HBuilderX нажмите工具栏 - 发行 - 原生App-云打包:
Появится следующее окно, выберитеAndroid(apk包), определите свой собственныйAndroid包名,выберите使用公共测试证书, затем выберите打正式包и, наконец, нажмите安心打包Вы можете, как показано ниже:
После упаковки вы увидите вывод консоли следующим образом:
Если упаковка завершена, она будет в локальном проекте/unpackage/release/apk/В папке создайте локальный установочный пакет. Старая версия HBuilderX поместит установочный пакет в облако и предоставит адрес загрузки после того, как пакет будет завершен, и этот адрес загрузки имеет ограничение на количество загрузок. После обновления версии v3 она напрямую упаковывается локально, что устраняет проблему загрузки лимита.
Здесь следует отметить,
uniappХотя облачный пакет пакета нам очень удобен для генерации инсталляционного пакета, т.к. это общедоступный ресурс, существует верхний предел количества пакетов на аккаунт в день.uniappОфициальный не рекомендует частую упаковку и отладку, рекомендуется при использовании полностью протестировать его локально перед упаковкой.
Если есть больше людей, использующих облачную упаковку за тот же период, консоль будет отображаться队列中, просто терпеливо ждите.
Обновление оригинального проекта H5
Страница H5, встроенная в веб-просмотр, должна взаимодействовать с домашней страницей, например, с функцией возврата на домашнюю страницу, поэтому страницу H5 необходимо преобразовать.
Поскольку страница H5 представляет собой многотерминальное мультиплексирование, большой экран необходимо обрабатывать отдельно, поэтому сначалаuserAgentСудите по терминалу.uniappОфициально поддерживает настройкуuserAgentКонтент может выбирать режим добавления, но такая практика неэффективна.
Путь конфигурации находится вmanifest.jsonиз源码视图в конфигурации.
Поскольку вы не можете реализовать настройку, вы можете получить только значение по умолчаниюuserAgentкак основание для оценки терминала. К счастью, в настоящее время существует только одно приложение, но оно также доступно.
Метод оценки терминала следующий:
window.navigator.userAgent.indexOf('uni-app Html5Plus') > -1
Для взаимодействия с нативными страницами также необходимо ввестиuniappSDKuni.webview.1.5.2.js:
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
Таким образом, вы можете позвонитьuniappметод. Например: Нажмите кнопку «Вернуться на главную», чтобы вернуться кindexСтраницы плакатов доступны по адресу:
uni.redirectTo({
url: '/pages/index/index'
})
Таким образом, подробные этапы создания проекта завершены, поспешите найти телефон Android, установить его и попробовать~
возникшие проблемы
В процессе постройки всего проекта ям не много.导航栏,状态栏а такжеuserAgentПроблема была представлена ранее и не будет повторяться здесь. Далее мы в основном говорим о проблемах, возникающих при упаковке:
- Версия рабочей среды и версия компилятора несовместимы
Эта проблема вызвана тем, что в uni-app добавлен механизм проверки версии среды выполнения и версии среды компиляции.Официальный документ:Проблема в том, что версия среды выполнения uni-app и версия компилятора несовместимы.Есть очень подробные инструкции, пожалуйста, обратитесь к документации за подробностями.
- Если в коде используется язык scss/sass, а в HBuilderX не установлен соответствующий плагин, на этапе прекомпиляции будет предложено:
Щелкните ссылку подсказки консоли, перейдите на указанную страницу, установите подключаемый модуль в соответствии с подсказкой, а затем перекомпилируйте и упакуйте.
- Перехват разрешения
В процессе упаковки, если вы столкнетесь с указанными выше подсказками, проверьте
manifest.jsonсерединаApp权限配置Проверено ли разрешение, но система его не разрешает, если и это разрешение не требуется, вы можете снять его и переупаковать.
Суммировать
Некоторые студенты могут спросить, в соответствии с принципом профессиональных людей, чтобы делать профессиональные вещи, нативное приложение не нужно передавать клиенту, которые студенты делают это? В этом случае, описанном здесь, причина для студентов делать фронт-концевую работу по трем причинам:
- На тот момент инсталляционный пакет был нужен срочно, а магазин вот-вот должен был открыться, ресурсы студентов-клиентов были ограничены, а график был относительно поздним.
- Наши одноклассники-клиенты относятся к отделу поддержки бизнеса.Почти все требования бизнес-направления реализуются H5, поэтому так уж суждено, что однокурсники-клиенты не могут отслеживать итеративные обновления версий, поэтому, если этот установочный пакет может быть получен фронтенд-одноклассниками Ответственный за развитие самое лучшее.
- С наиболее подходящей структурой для технической поддержки нам может быть легко выполнить эту задачу, и, конечно же, мы берем на себя эту работу.
Исходя из вышеизложенных причин, автор не хочет быть клиентом вслепую по прихоти, а полностью обдумал это.Я надеюсь, что каждый может сохранять спокойствие и внимательно смотреть, имея дело с областями, которые необходимо развивать, или новыми фреймворками. .
наконец
В настоящее время приложение используется на большом экране нашего магазина прямого управления уже почти год, и это хорошее впечатление Добро пожаловать в магазин и испытайте его. На момент публикации друзья в Пекине, Циндао и Чжэнчжоу могут посетить местные торговые центры для справки.В этом году они откроют магазины во многих городах один за другим.Я с нетерпением жду вашего внимания. Конкретный адрес можно найти по ключевому слову [Zuanzhuan Up | Утилизация мобильных телефонов] на Baidu или Dianping с указанием конкретного адреса.
Спасибо, что прочитали. Если у вас есть какие-либо вопросы, оставьте сообщение в области комментариев, чтобы обсудить и поучиться друг у друга.