Пример простого приложения на PhoneGap и Vue.js

yazu css/html/js 5080

Создаём простое приложение для демонстрации работы фреймворка vue.js на phonegap.

Для удобства разработки и отсутствия файловой помойки внутри основного приложения я разделил само PhoneGap приложение и JavaScript frontend, получив такую иерархию папок:

--hello_world
----phonegap
----frontend

--hello_world

----phonegap

----frontend

Вам потребуется создать такую же структуру, с ней будет производиться вся работа далее.

PhoneGap приложение

Для начала скачаем PhoneGap с официального сайта и установим его.

Запускаем программу и жмём «Create new PhoneGap project» далее «Hello Word», тем самым создаём проект на стандартном шаблоне от разработчиков PhoneGap.

Создание проекта

После создания проекта PhoneGap сразу запустит приложение на виртуальном сервере и укажет вам на это ссылкой на зелёном фоне, переходим по ней и видим наш Hello Word.

PhoneGap приложение

Далее необходимо подготовить vue.js приложение.

Vue.js

Для работы нам понадобится пакетный менеджер npm и консольная утилита vue-cli, как установить npm можно почитать тут, мы же сразу идём далее:

# устанавливаем vue-cli
$ npm install --global vue-cli
$ cd /hello_world/frontend

# создаём новый проект из шаблона "webpack"
$ vue init webpack-simple ./

# устанавливаем зависимости
$ npm install

# устанавливаем vue-cli

$ npm install --global vue-cli

$ cd /hello_world/frontend

# создаём новый проект из шаблона "webpack"

$ vue init webpack-simple ./

# устанавливаем зависимости

$ npm install

По ходу установки вам будет задано несколько вопросов (название проекта, описание, автор лицензия и используете ли вы sass), отвечаем на все вопросы и запускаем приложение командой npm run dev.

vue.js приложение

Пока можно приостановить оба локальных сервера и приступить к связке vue.js и PhoneGap.

PhoneGap + Vue.js = PROFIT!

Для начала нам нужно будет подкорректировать файл webpack.config.js:

//меняем это
output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
},

//на это
output: {
    path: path.resolve(__dirname, './../phonegap/hello_world/www/dist'),
    publicPath: '/dist/',
    filename: 'build.js'
},

//меняем это

output: {

path: path.resolve(__dirname, './dist'),

publicPath: '/dist/',

filename: 'build.js'

//на это

output: {

path: path.resolve(__dirname, './../phonegap/hello_world/www/dist'),

publicPath: '/dist/',

filename: 'build.js'

Как видите, мы просто поменяли расположение файла сборки forntend’а на папку внутри PhoneGap проекта.

Далее открываем файл /hello_world/phonegap/hello_world/www/index.html и приводим его к такому виду:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
    <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
    <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *; font-src * data: blob;" />

    <title>Hello World</title>
</head>

<body data-dom-cache="true">
    <div id="app"></div>
    <script type="text/javascript" src="dist/build.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Hello World</title>

</head>

</body>

</html>

В нём мы оставляем только подключение файлов cordova.js, нашего собранного frontend’а в виде файла build.js и div’а с id='app', в котором и будет работать наше приложение.

Вот и всё, что нам требовалось сделать, теперь выполняем в консоли следующие команды:

# переходим в папку forntend'а
$ cd /hello_world/frontent

# запускаем сборку проекта
$ npm run build

# переходим в папку forntend'а

$ cd /hello_world/frontent

# запускаем сборку проекта

$ npm run build

Сборка может занять от 5-10 секунд до нескольких минут, зависит от мощности вашего компьютера. После, в папке /hello_world/phonegap/hello_world/www появится папка dist с файлом build.js — это и есть наш собранный forntend.

Далее открываем утилиту PhoneGap и жмём на серую кнопку «Start» рядом с названием нашего проекта. Переходим по указанному адресу, и видим, что теперь в окне PhoneGap приложения отображается наше vue.js приложение.

PhoneGap + vue.js приложение

Теперь вы можете вести разработку внутри проекта frontend и быстро собирать его внутрь PhoneGap приложения.

Конечно, такой подход больше подходит для приложений, которые не используют нативное API Android и iOS устройств, так как если вы хотите их использовать, вам придётся каждый раз компилировать frontend приложение для визуального тестирования изменений в работе с нативным API в браузере или на вашем устройстве. Как бы то ни было, я считаю данный подход приемлемым, а если вам требуется нативное API, следует использовать нативный язык разработки для выбранной платформы (для Android — Java и Kotlin, для iOS — ObjectiveC и Swift) так как использование JavaScript для этих целей весьма неоднозначное решение и чаще всего недостаточно производительное.

Что дальше?

Естественно, для разработки на vue.js вы можете использовать любые npm пакеты, которые вам потребуются в проекте. Однако, следует помнить, если вы используете vue-router, то следует его параметр mode установить в значение hash, так как вы будете запускать приложение внутри PhoneGap проекта, ему потребуется прямой доступ к файлам на диске для осуществления роутинга, следовательно vue-router с настройкой mode: 'history', как в большинстве браузерных приложений на vue.js, работать не будет.

Также стоит поговорить о кроссплатформенности. Если вы планируете выпускать своё приложение под несколько платформ, вы можете столкнуться с некоторыми сложностями разработки, на пример: сильно различающиеся style guides Android и iOS приложений. Следовательно вам придётся проделать немалую работу для того, чтобы привести ваше приложение к требуемому платформой внешнему виду. Можно значительно упростить себе работу используя один из подходящих для разработки фреймворков, о некоторых из их я рассказывал в этой статье. В своих приложениях я использую onsenui, как и многие другие фреймворки он не лишён недостатков, однако легко интегрируется в vue.js и поддерживает обе популярные мобильные платформы без каких-либо изменений в коде.

В своих проектах я в основном использую следующие npm пакеты:

vue
vue-onsenui
vue-resource
vue-router
vuex
onsenui
sass
material-design-iconic-font

Вот пример одного из приложений, находящихся в разработке на данный момент:

Пример приложения

comments powered by HyperComments

Предыдущий пост: 7 Material Design CSS фреймворков на 2017 год Следующий пост: Адаптивная masonry сетка на JS и CSS Grid