Weex & VueJS. Нативные приложения на VueJS?

04/03/2018
Konstantin Ostrovsky

Сегодня мы познакомимся с многообещающим javascript фреймворком под названием Weex. Не путать с конструктором сайтов wix!

Weex - это основа для создания высокопроизводительных мобильных приложений с современным опытом веб-разработки.
Взято с https://weex.incubator.apache.org/guide/index.html

Если Вы когда-либо уже работали с Java и разрабатывали приложения под android, то Вам будет значительно легче освоить данный материал. Так как для компиляции конечного apk-файла нам потребуется поработать в Android Studio.

В этой статье я не буду проводить сравнение WEEX и ReactNative. По той простой причине, что Weex все еще находится на стадии разработки. Проект на git создан 17 апреля 2017, в то время как ReactNative 27 марта 2015.

Количество звезд на GitHub: weex - ~8 000. ReactNative - ~60 000.

Фреймворк предназначен для написания кроссплатформенных(android, ios) приложений с использованием Vue.js или Rax.
Для обзора я выбрал наиболее знакомый мне фреймворк - Vue.js.

Для начала определим наш стек:

  1. Android Studio (вместе с ним JDK, SDK , grudle, ADB);
  2. NodeJS;
  3. VueJS;
  4. NPM или Yarn.

Шаг1. Установка и настройка

Weex умеет работать с npm 5(актуальная версия) и NodeJS 9.x.x. Так что для начала установим NodeJS.

Устанавливаем глобально инструмент weex-toolkit.

$: npm install weex-toolkit -g

Теперь в нашем вооружении есть команда weex. С помощью нее мы будем работать с нашим проектом.

#Проверить установку weex-toolkit
$: weex -help

Создаем стартовый шаблон:

$: weex create <Название Вашего проекта>

Перейдем в папку проекта:

$: cd <Название Вашего проекта>

Обновим зависимости и установим все модули:

$: npm i

Проверим работоспособность:

$: weex run web

В результате, открыв http://192.168.56.1:8081, Вы должны увидеть это:

Слева - превью Вашего приложения. Справа - QR код, который Вы можете отсканировать при помощи Weex Playground App для отладки и просмотра на реальном девайсе.

Разберемся с структурой папок:

Шаг2. Добавим компонент и попробуем его вывести

Важно понимать, что полной поддержки HTML и CSS нет и не будет. Поэтому нам нужно использовать теги UML - разметки от шаблонов JAVA. К примеру, чтобы вставить изображение нам нужно вставить тег:

<image src="<url>"/>

А для вывода текстового блока использовать тег <text>:

<text>Приветствую тебя человек!</text>

Эти теги взяты из шаблонов Java, поэтому кто знаком и когда-либо разрабатывал под android должен их знать. А остальным всегда можно подсмотреть в документацию от Weex.

Наша цель вывести на экран изображение и подпись для него.
Для этого откроем src/index.vue. Мы видим что здесь используется vue-router, все роуты описаны в файле src/router.js. Убираем из шаблона index.vue все лишнее и оставляем только роутер. В итоге файл будет содержать следующее:

<template> 
  <div class="wrapper"> 
    <router-view/> 
  </div> 
</template>
<script> 
export default { 
  name: 'App', 
  data () { 
    return { 

    } 
  } 
 } 
</script>
<style scoped>

</style>

Проверим http://192.168.56.1:8081/web/preview.html?page=index.js на отсутствие ошибок. Отлично, поехали дальше!

Добавим свой компонент HelloWorld. Для этого создаем файл src/components/HelloWorld.vue. С базовым шаблоном компонента:

<template>
</template>

<script>
    export default {
        name: 'HelloWorld',
        data () {
            return {}
        }
   }
</script>
<style lang="css" scoped>

</style> 

Назначим этот компонент на route /hello. Для этого импортируем компонент в роутер и назначим его на роут. Открываем src/router.js и вверху после импорта vue-router добавляем:

import HelloWorld from '@/components/HelloWorld'

В массив с роутами добавляем роут /hello и назначаем на него компонент HelloWorld:

{
path: "/hello",
name: "HelloWorld",
component: HelloWorld
}

Теперь нужно реализовать переход по этому роуту. Открываем файл компонента, который назначен на домашний роут и добавляем в шаблон ссылку:

<router-link to="hello">
     <text>Go World</text>
 </router-link>

Добавим изображение и подпись в компонент HelloWorld. Открываем src/components/HelloWorld.vue и заменяем шаблон:

<template> 
    <div> 
        <image src="https://web-panda.ru/public/images/weex_1.JPG" style="width:750px;height:600px;"/> 
        <text style="align-items:center;justify-content:center; font-size: 50px;">Great Work</text> 
    </div> 
</template>

Стили можно вынести в тег <style>. Хочу обратить Ваше внимание, что поддержка CSS ну очень нативная. Нельзя использовать величины "&, em, %, vw, vh", даже absolute ведет себя достаточно странно. К сожалению, я не нашел списка из разряда "что можно, а что нельзя", поэтому верстать нужно на свой риск. Так же если на Вашем localhost все выгллядит отлично, нет гарантии что после компиляции в apk стили не "поедут" и верстку не "расколбасит". Вот такая она, нативная поддержка.

Ну что ж теперь у Вашего приложения две страницы (две активности). Чтобы применить изменения роутера нужно перезапускать сборщика:

$: weex run web

Смотрим что у нас получилось.

При клике на "Go World" должен происходить переход на активность /hello, за которую отвечает компонент HelloWorld. Если у Вас что-то не получилось, вы можете сравнить свой код с моим. Ссылка на гитхаб с примером будет в конце статьи.

Шаг 3. Компиляция Weex в apk

Weex умеет компилироваться не только в android-приложение, но еще и IOS. Мы будем компилировать в apk для Android. Для тестирования не обязательно иметь девайс на OS Andoid, вы можете использовать симулятор genymotion. Его я и буду использовать. Не буду описывать процесс установки, так как на сайте genymotion есть все необходимое для быстрого старта.

В теории, компиляция может производиться без использования Android Studio. Но на практике, я столкнулся с проблемой переменных окружения и целым рядом проблем при компиляции. Таких как отсутствие переменных окружения и баги при компиляции. Для более удобной отладки я решил исполоьзовать Android Studio.

Для начала нужно добавить нашу платформу разработки. Для этого выполним команду:

$: weex platform add android

В Вашем проекте должна бла создаться папка папка platforms в корне проекта и папка android внутри нее, Папка android - это и есть проект Android Studio.

Запускаем любое устройство в эмуляторе Genymotion, либо подключаем телефон с отладкой по USB.

Мне повезет! Выполним в консоли команду, котороая сгенерирует приложение и скомпилирует apk.

В моем случае, я получил большое количество ошибок в консоли и билдер "стал колом". Причиной этому стало отсутствие переменной JAVA_HOME и отсутствие команды adb. Я решил эту проблему, добавив переменную окружения JAVA_HOME и внес правки в PATH. Если Вы сталкнетесь с этой проблемой, пишите в комментариях.

Вводим в консоли:

$: weex run android

В ходе выполнения команды будет сгенерирован apk-файл и запущено приложение на Вашем устройстве(при помощи ADB). Файл будет лежать по пути: platforms/android/app/build/outputs/apk/.

Если Вам не повезло и при компиляции возникли ошибки, то следует импортировать проект в Android Studio и при помощи отладчика попробовать решить проблему.

Проблемы с которыми я столкнулся при компиляции:

В Andoid Studio при помощи LogCat и дебагера Вы можете работать с проектом как с полноценным приложением на Java.

Изначально Weex генерирует шаблон приложения, в котором встроена загрузка с их логотипом и строка для отладки сверху. Чтобы их убрать, нужно править шаблоны приложения в Andoid Studio.

Поставить иконку и установить свое название приложения можно в файле platforms/platforms.json. Описание структуры этого файла можно найти на оф. сайте Weex.

Мне очень помогл демо-проект на гитхаб, пользователя tralves. Приложение умеет добавлять, удалять и менять статус у ToDo. В приложении использовались storage и многие основные компоненты. Вот ссылка на проект GitHub (weex-todo-list)

Итог: технология интересная, перспективная, но достаточно сырая.

Ссылка на демо проект, как и обещал - weex-demo