Я использую NativeScript уже пару месяцев, и пока это мой опыт.
В основном я затрону эти области:
- Почему я выбрал NativeScript вместо других JS Frameworks (React Native)
- Моя первоначальная установка
- Плагины
- Структура папок
- Использование значков шрифтов
1. Почему я предпочел NativeScript другим JS-фреймворкам (React Native)
Недавно меня наняли в качестве Front-End разработчика программного обеспечения в Kamkalima для создания мобильного приложения для их платформы.
Мы с руководством должны были принять решение о выборе между двумя основными кросс-платформенными фреймворками. React Native и NativeScript.
И React Native, и NativeScript — это фреймворки Javascript, цель которых — облегчить процесс написания единой кодовой базы для создания наиболее часто используемых мобильных платформ. Android и iOS.
Изложив плюсы и минусы обоих фреймворков, мы решили использовать NativeScript-Vue.
«NativeScript-Vue — это плагин NativeScript, который позволяет использовать Vue.js для создания мобильного приложения». Команда NativeScript
Было много причин выбрать NativeScript-Vue вместо React Native. В основном потому, что мы используем Vue.js для веб-версии нашей платформы.
Таким образом, нашим веб-разработчикам будет легче внести свой вклад в разработку мобильного приложения позже, если они захотят это сделать.
2. Моя первоначальная установка
Когда я начал изучать NativeScript, я сначала искал ресурсы, на которые можно положиться, чтобы понять основы и найти поддержку.
Я не нашел много. Сообщество намного меньше, чем у React Native. В основном я полагался на официальную документацию, которая довольно хороша.
Когда я освоился с NativeScript, я начал возиться на игровой площадке NativeScript. Пробуем встроенные компоненты и пытаемся понять, как их использовать.
Повозившись со всеми встроенными компонентами, я решил перенести разработку на свою локальную машину.
Я установил NativeScript локально с помощью следующей команды: npm install -g nativescript.
Я начал с команды «предварительный просмотр» tns preview --bundle. Это работало достаточно, пока я не заметил, что некоторые функции могут не работать с командой предварительного просмотра, например vue-devtools.
Пришлось переключиться на настройку эмулятора. Я установил эмулятор Genymotion, так как он требует гораздо меньше ресурсов, чем эмулятор Android Studio, плюс он намного быстрее в использовании. А для сборки iOS установил эмулятор iOS через Xcode (разрабатываю на маке).
3. Плагины
Я искал компоненты и плагины, чтобы найти вдохновение для вариантов использования, которые я могу реализовать. Я нашел много на NativeScript Marketplace, а также на его замечательном веб-сайте.
Я начал пробовать множество плагинов, чтобы понять, как все работает. Пробовал аудиоплеер, функционал камеры, биометрическую аутентификацию и т.д.
Я старался в основном полагаться на официальный API, доступный в NativeScript. Но когда я не смог найти его, я реализовал его на своей стороне (например, карусель, группа переключателей и т. д.).
4. Структура папок
Я искал лучшие практики для структурирования папок в приложении NativeScript, но ничего не нашел. Поэтому руководство и я решили, что мы собираемся структурировать приложение следующим образом.
Я кратко расскажу о каталогах сверху вниз.
- assets: каталог, в котором находятся все основные изображения и значки.
2. компоненты: все компоненты расположены в этом каталоге, чтобы их можно было легко найти. Стоит отметить, что каждый компонент разделен на 5 файлов:
- componentName.html: все визуальное представление компонента.
- componentName.js: вся логическая часть компонента.
- componentName.scss: стили компонента.
- componentName.vue: импортирует все вышеперечисленные файлы в синтаксисе Vue.Js, как показано ниже.
<template src="./componentName.html”/>
<script src="./componentName.js"/>
<style src="./componentName.scss lang="scss" scoped/>
- index.js: импортирует componentName.vue и экспортирует его, чтобы упростить импорт всего компонента (без указания расширения).
3. шрифты: содержит все шрифты и значки шрифтов, которые используются в приложении.
4. layouts: содержит все макеты, которые повторяются в приложении (например, Drawer, TabView и т. д.).
5. mixins: функции, которые используются в приложении (например, функции маршрутизатора, функции ящика и т. д.).
6. маршруты: содержит все маршруты для приложения (например: homePage: HomeComponent). Это делает маршрутизацию в приложении намного проще и нагляднее.
7. store: это каталог, в котором хранятся все магазины приложения. Он разделен на модули для нескольких магазинов. Одним из хранилищ может быть хранилище ящиков, где сохраняется состояние ящика для легкого доступа через приложение.
8. views: этот каталог содержит все представления, которые есть в приложении. Файлы каждого представления разделяются так же, как и компоненты (.html, .js и т. д.).
Эта структура работала для меня очень хорошо. Но я должен отметить, что приложение еще не закончено, поэтому могут быть добавлены новые каталоги.
5. Использование значков шрифтов
Я много боролся, пытаясь найти способ использовать наши пользовательские значки шрифтов в приложении. Пробовал плагин nativescript-fonticon безуспешно.
После пары исследовательских сессий. У меня получилось 😁. Я решил это, поместив файлы моих пользовательских значков шрифтов «True Type Font» (.ttf) в каталог «fonts» (если он еще не существует, создайте каталог в основной папке приложения). Добавьте инициализацию класса css в app.css (или app.scss, если вы используете Sass, как я) для глобального доступа. И в компонентах вашего приложения всякий раз, когда вы хотите использовать значок шрифта, используйте следующий синтаксис:
<Label :text="'\ue933'" class="icon-class-name" color='blue' fontSize="24" />
Здесь мы вызываем метку с текстом, который использует JS. Мы вставляем шестнадцатеричный код значка, который вы хотите использовать, с префиксом «\u», чтобы экранировать символы.
Я считаю, что работа с NativeScript действительно плавная и интуитивно понятная. Наличие Javascript в качестве основного языка значительно упрощает мою работу, поскольку у меня уже есть хороший опыт работы с Javascript.
