Как программировать на Vue JS под Андроид

0

Intro

Сегодня мы рассмотрим еще один вариант создания кросплатформенних приложений с использованием JavaScript. Речь пойдет о таком популярном фреймворк как Vue JS. Но для начала я расскажу что такое Cordova.

Cordova — это среда, которая позволяет создавать мобильные приложения с использованием веб-технологий, таких как HTML, Javascript и CSS. Это позволяет целится на несколько платформ одновременно, таких как Android и iOS, с использованием одной базы кода. Несмотря на то, что для создания приложения вам все еще нужны технологии для конкретных платформ, такие как Android SDK и XCode, вы можете создавать приложения без необходимости писать код Android или iOS.

Поскольку вы можете писать код в HTML и Javascript, очень легко использовать интерфейсные библиотеки Javascript, такие как Vue.js с Cordova.

Этот туториал покажет вам, как создать простое мобильное приложение, которое генерирует случайные слова, используя Кордову и Vue.js.

1

Что необходимо для начала

Для работы понадобятся:

  • Установленный Node.js
  • Install Cordova: npm install -g cordova
  • Ну и базовые знания Vue JS
2

Настройка проекта Cordova

Создайте проект Cordova под названием RandomWord:

cordova create RandomWord
cd RandomWord

Это создаст структуру каталогов проекта Cordova:

Cordova projct structure
  • config.xml — содержит информацию о приложении, плагинах, которые он использует, и платформах, на которые он нацелен
  • platforms — содержит библиотеки Cordova для целевых платформ, таких как Android и iOS, которые приложение будет запускать
  • plugins — содержит библиотеки Кордовы для плагинов, используемых приложением, которые позволяют приложению получать доступ к вещам, связанным с устройством, таким как Camera and Battery Status
  • www — содержит исходный код приложения, например HTML, Javascript и CSS-файлы
  • hooks — содержит скрипты, используемые для настройки системы сборки для приложения

Добавьте платформу Android:

cordova platform add android --save

Это добавит библиотеку платформы Android в каталог платформ (platform / android).

Флаг --save добавляет движок платформы к config.xml, который используется командой corova prepare при инициализации проекта Cordova из файла config.xml.

Соберите приложение для Android:

cordova build android

Подключите свой телефон к компьютеру и запустите приложение для Android:

cordova run android

Если к компьютеру не подключен телефон Android, Cordova запустит приложение на эмуляторе.

Базовое приложение очень простое, и все, что оно делает, это изменить цвет фона метки (label).

Чтобы использовать iOS вместо Android, выполните те же действия, что и выше, но замените android на ios. Если отсутствуют требования, см. Cordova Docs для iOS. Если вы используете Кордову на компьютере под управлением Windows, вы не можете создавать / запускать приложение на iOS, поскольку платформе iOS Cordova требуется Apple OS X.

Кроме того, вы можете использовать свой браузер вместо мобильного устройства с помощью платформы браузера. Выполняйте те же действия, что и выше, но замените android на browser.

Измените информацию о приложении в файле config.xml, чтобы наш генератор случайных слов стал узнаваем:

3

Добавление Vue.js

Как и в любом файле HTML, добавьте CDN Vue.js в конец www/index.html:

Чтобы приложение могло получить доступ к библиотеке Vue.js, нам также необходимо добавить следующее в конец метатега политики безопасности контента (CSP) в www/index.html:

; script-src 'self' http://cdn.jsdelivr.net/vue/1.0.16/vue.js 'unsafe-eval'

Политика безопасности содержимого веб-страницы позволяет создать белый список источников доверенного контента и указывать браузеру только на выполнение или рендеринг ресурсов из этих источников.

Часть script-src метатега CSP определяет, какие скрипты могут быть выполнены приложением.

  • «self» — позволяет сценарии того же размещения, что и www/js/index.js
  • http://cdn.jsdelivr.net/vue/1.0.16/vue.js— позволяет библиотеку Vue.js
  • «unsafe-eval» — позволяет небезопасную динамическую оценку кода, поскольку части кода библиотеки Vue.js используют строки для генерации функций

Метатег CSP должен выглядеть следующим образом:

После замены кода в теле www/index.html на некоторый код Vue.js, чтобы показать случайное слово и удаление некоторых комментариев, wwww/index.html будет выглядеть так:

Теперь мы добавим Javascript для генерации случайного слова, которое будет показано.

www/js/index.js в настоящее время имеет некоторый код для изменения цвета фона метки, когда приложение получает событие deviceready. Нам не нужно ничего делать, когда приложение получает событие deviceready для нашего простого генератора случайных слов, но хорошо знать, что вы можете использовать метод bindEvents для выполнения разных действий на разных этапах жизненного цикла приложения.

Мы добавим новый метод в www/js/index.js, называемый setupVue, который создаст новый экземпляр Vue и подключит его к div. Новый экземпляр Vue будет иметь метод getRandomWord, который будет выбирать случайное слово из списка слов при нажатии кнопки Get Random Word. Нам также нужно вызвать setupVue из метода initialize.

После удаления старого кода, который изменил цвет фона метки в receivedEvent и удалив некоторые комментарии, www/js/index.js теперь выглядит так:

Соберите проект, подключите свой телефон и запустите приложение:

cordova build android
cordova run android

Приложение должно выглядеть так:

Cordova App

Ну а на сегодня все 🙂 . Если у вас есть вопросы, задавайте их в коментариях.. В ближайшем времени постараюсь записать видео к статье, в котором подробно будет рассмотрен процесс создания приложения, чтобы не пропустить — подписывайтесь на мой канал YouTube

Похожие публикации

Комментарии

  1. Вадим 23.02.2019 в 19:46

    Спасибо за статью, как раз ищю оптимальное решение чтобы и в вебе было в приложение и под мобилу долго не мучится. Можно ли к этому примеру подключить vuex и vuetify?

    1. Just Programmer 23.02.2019 в 23:48

      Да, конечно.. Почти любой npm пакет можно использовать для разработки приложения))

  2. Цифровой 03.06.2019 в 18:49

    Хотел попробовать попрогать под Андроид на JS, теперь ненавижу весь мир!
    Инструкция ваша такая простая НЕ сработала. Потребовалось еще установить Android Studiо и JDK.
    JDK теперь кстати стали коммерческим проектом и просто так скачать нельзя приложение, нужно у них зарегистрироваться и ждать и бояться финансовых взысканий в будущем. Но я нашел в интернете статью, что оказывается есть некоммереская версия OpenJDK. Нашел ее, скачал и что вы думаете? Это zip архив и как его установить я ума не приложу, там нет .ехе файлов!
    Что вы посоветуете мне теперь делать?

    1. Just Programmer 03.06.2019 в 22:14

      Нужно установить версию JDK 8) с новыми версиями могут быть проблемы совместимости)) https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html