Заметки об изучении Таро

внешний интерфейс React.js

Заметки об изучении Таро

Официальный сайт:taro.aotu.io/

адрес проекта:github.com/NervJS/taro

Введение

Taro — это многосегментное решение для разработки набора спецификаций синтаксиса React, созданных Bump Labs. Основная цель — использовать набор кодов для компиляции приложений для разных платформ с помощью разных типов компиляции. (В настоящее время поддерживаются: мини-программы, H5)

Строительство окружающей среды

Установить

Установите инструмент cli, предоставленный Taro.

// npm
-> npm install -g @tarojs/cli
// yarn
-> yarn global add @tarojs/cli

использовать

Новый проект

-> trao init projectName

Taro init

Предварительный просмотр компиляции (апплет WeChat)

# npm script
-> npm run dev:weapp
# 仅限全局安装
-> taro build --type weapp --watch
# npx用户也可以使用
-> npx taro build --type weapp --watch

Taro build wechat

Taro wechat page

Предварительный просмотр компиляции (H5)

# npm script
-> npm run dev:h5
# 仅限全局安装
-> taro build --type h5 --watch
# npx用户也可以使用
-> npx taro build --type h5 --watch

Taro build h5

Taro h5 html

связанный с проектом

Структура каталогов проекта

├── dist                   编译结果目录
├── config                 配置目录
|   ├── dev.js             开发时配置
|   ├── index.js           默认配置
|   └── prod.js            打包时配置
├── src                    源码目录
|   ├── pages              页面文件目录
|   |   ├── index          index页面目录
|   |   |   ├── index.js   index页面逻辑
|   |   |   └── index.css  index页面样式
|   ├── app.css            项目总通用样式
|   └── app.js             项目入口文件
└── package.json

Входной файл:app.js

корреспонденция жизненного цикла

Соответствующая связь между жизненным циклом программы и жизненным циклом апплета:

  • componentWillMount ==> onLaunch
  • componentDidMount ==> onLaunch выполняется после componentWillMount
  • componentDidShow ==> onShow
  • componentDidHide ==> onHide

Соответствующая связь между жизненным циклом страницы и жизненным циклом страницы апплета:

  • componentWillMount ==> onLoad
  • componentDidMount ==> onReady
  • componentWillUnmount ==> onUnload
  • componentDidShow ==> onShow
  • componentDidHide ==> onHide

Эксклюзивный метод апплета страницы:

  • onPullDownRefresh
  • onReachBottom
  • onShareAppMessage
  • onPageScroll
  • onTabItemTap

API

API предоставлен самой Таро.

Базовый API предоставлен самой Таро

  • Компонент: базовый класс для всех классов компонентов
  • События: механизм сообщений
  • eventCenter: глобальный центр сообщений
  • ENV_TYPE: значение среды, константа, может использоваться напрямую
  • getEnv: получить текущую среду

Связанные с сетью

  • request: метод сетевого запроса
  • uploadFile: метод загрузки
  • downloadFile: метод загрузки

Связанные с сокетом

  • connectSocket: создать веб-сокет
    • onOpen: метод при открытии
    • onError: ошибка — это метод
    • отправить: отправить сообщение
    • onMessage: получать сообщения
    • закрыть: близко
    • onClose: метод при закрытии

связанные со СМИ(Добавлено 13 июня 2016 г.)

  • Связанные с изображением
    • ChooseImage: выберите изображение
    • previewImage: изображение для предварительного просмотра
    • getImageInfo: получить информацию об изображении
    • saveImageToPhotosAlbum: сохранить изображение в альбом
  • Связанные с записью
    • startRecord: начать запись
    • stopRecord: остановить запись
    • getRecorderManager: получить менеджер записи
  • Аудио связанные
    • playVoice: воспроизвести аудио
    • pauseVoice: приостановить звук
    • stopVoice: остановить звук
    • getBackgroundAudioManager: получить менеджер фонового звука
    • createAudioContext: создать объект автоматического контекста и вернуть
    • createInnerAudioContext: обновленная версия createAudioContext
  • связанный с музыкой
    • getBackgroundAudioPlayerState: получить состояние воспроизведения фоновой музыки.
    • playBackgroundAudio: воспроизведение фоновой музыки.
    • pauseBackgroundAudio: приостановить фоновую музыку.
    • seekBackgroundAudio: управление ходом воспроизведения музыки
    • stopBackgroundAudio: остановить фоновую музыку
    • onBackgroundAudioPlay: контролировать воспроизведение музыки
    • onBackgroundAudioPause: мониторинг музыкальной паузы
    • onBackgroundAudioStop: остановка прослушивания музыки
  • Видео связанные
    • выбратьвидео: выбрать видео
    • saveVideoToPhotosAlbum: сохранить видео в альбом
    • createVideoContext: создание и возврат объекта видеоконтекста.
  • связанные с камерой
    • createCameraContext: создать и вернуть объект контекста камеры

документ(Добавлено 14 июня 2016 г.)

  • saveFile: сохранить файл
  • getFileInfo: Получить информацию о файле
  • getSavedFileList: Получить список сохраненных файлов
  • getSavedFileInfo: Получить информацию о сохраненном файле
  • removeSavedFile: удалить локально сохраненный файл
  • openDocument: открыть документ

Связанные с хранением

  • setStorage: установить локальное хранилище
  • setStorageSync: установить локальное хранилище (метод синхронизации)
  • getStorage: получить локальное хранилище
  • getStorageSync: получить локальное хранилище (метод синхронизации)
  • getStorageInfo: получить информацию о локальном хранилище
  • getStorageInfoSync: получить информацию о локальном хранилище (метод синхронизации)
  • removeStorage: удалить локальное хранилище
  • removeStorageSync: удалить локальное хранилище (метод синхронизации)
  • clearStorage: очистить локальное хранилище
  • clearStorageSync: очищает локальное хранилище (метод синхронизации)

Место нахождения(Добавлено 14 июня 2016 г.)

  • getLocation: Получить информацию о местоположении
  • ChooseLocation: выберите информацию о местоположении
  • openLocation: откройте карту WeChat, чтобы просмотреть местоположение
  • createMapContext: создать и вернуть контекст карты

оборудование(Добавлено 14 июня 2016 г.)

  • система
    • getsysteminfo: получить системную информацию
    • getSystemInfoSync: Синхронное получение информации о системе
    • canIUse: определить, доступен ли он (API, обратный вызов, параметр, компонент и т. д.)
  • Интернет
    • getNetworkType: получить тип сети
    • onNetworkStatusChange: запускает событие при переключении состояния сети.
  • Акселерометр
    • onAccelerometerChange: отслеживать данные об изменении ускорения
    • startAccelerometer: начать прослушивание данных
    • stopAccelerometer: остановить прослушивание данных
  • компас
    • onCompassChange: отслеживать данные компаса
    • startCompass: начать прослушивание данных
    • stopCompass: остановить прослушивание данных
  • makePhoneCall: позвонить
  • scanCode: код сканирования
  • setClipboardData: установить содержимое буфера обмена
  • getClipboardData: получить содержимое буфера обмена
  • Bluetooth
    • openBluetoothAdapter: открыть модуль Bluetooth
    • closeBluetoothAdapter: закрывает модуль Bluetooth
    • getBluetoothAdapterState: получить состояние модуля Bluetooth.
    • onBluetoothAdapterStateChange: триггерное событие изменения состояния модуля bluetooth.
    • startBluetoothDevicesDiscovery: начать поиск устройств Bluetooth
    • stopBluetoothDevicesDiscovery: остановить поиск устройств Bluetooth
    • getBluetoothDevices: получить устройства Bluetooth.
    • getConnectedBluetoothDevices: получение подключенных устройств Bluetooth.
    • onBluetoothDeviceFound: прослушивание события обнаружения нового устройства
    • createBLEConnection: подключиться к устройству Bluetooth с низким энергопотреблением
    • closeBLEConnection: Отключить устройство Bluetooth с низким энергопотреблением.
    • getBLEDeviceServices: получить все службы устройства Bluetooth.
    • getBLEDeviceCharacteristics: получить все значения характеристик службы Bluetooth-устройства.
    • readBLEcharacteristicValue: чтение значения характеристики
    • writeBLEcharacteristicValue: записать значение характеристики
    • notifyBLECharacteristicValueChange: включить функцию уведомления при изменении значения характеристики
    • onBLEConnectionStateChange: прослушивание событий изменения состояния подключения Bluetooth с низким энергопотреблением.
    • onBLECharacteristicValueChange: отслеживание изменений значений характеристик устройств Bluetooth с низким энергопотреблением.
  • iBeacon
    • startBeaconDiscovery: начать поиск устройств
    • stopBeaconDiscovery: прекратить поиск устройств
    • getBeacons: получить искомое устройство
    • onBeaconUpdate: слушать события обновления
    • onBeaconServiceChange: прослушивание событий изменения состояния службы
  • Яркость экрана
    • setScreenBrightness: установить яркость экрана
    • getScreenBrightness: Получить яркость экрана
    • setKeepScreenOn: установить постоянное состояние
  • onUserCaptureScreen: событие захвата экрана пользователя
  • вибрация
    • vibrateLong: длительная вибрация
    • vibrateShort: короткая вибрация
  • addPhoneContact: добавить телефонный контакт
  • NFC
    • getHCEState: узнать, поддерживается ли это
    • startHCE: инициализация
    • стопHCE: закрыть
    • onHCEMessage: отслеживание обратного вызова информации об устройстве
    • sendHCEMessage: Отправить сообщение NFC
  • Wi-Fi
    • startWifi: Включить Wi-Fi
    • stopWifi: отключить Wi-Fi
    • подключитьWi-Fi: подключиться
    • getWifiList: получить список
    • onGetWifiList: слушайте, чтобы получить событие данных списка
    • setWifiList: уникальный интерфейс iOS, список настроек
    • onWifiConnected: прослушивание событий подключения
    • getConnectedWifi: получить информацию о подключенном Wi-Fi

работа интерфейса

  • взаимодействовать
    • showToast: показать всплывающую подсказку
    • hideToast: скрыть всплывающую подсказку
    • showLoading: Показать нагрузку
    • hideLoading: скрыть загрузку
    • showModal: показать модальное окно
    • showActionSheet: показать параметры действия
  • Панель навигации (добавлено 14 июня 2016 г.)
    • setNavigationBarTitle: установить заголовок панели навигации
    • showNavigationBarLoading: показать загрузку панели навигации
    • hideNavigationBarLoading: скрыть загрузку панели навигации
    • setNavigationBarColor: установить цвет фона панели навигации.
  • setTopBarText: установить текст верхней панели (добавлено 14 июня 2016 г.)
  • Связано с tabBar (добавлено 14 июня 2016 г.)
    • setTabBarBadge: установить угловую метку
    • removeTabBarBadge: удалить угловую метку
    • showTabBarRedDot: показать красную точку в правом верхнем углу tabBar.
    • hidetabbarreddot: скрыть красную точку в правом верхнем углу табра
    • setTabBarStyle: установить стиль
    • setTabBarItem: динамически устанавливать содержимое элемента tabBar.
    • showTabBar: показать tabBar
    • hideTabBar: скрыть tabBar
  • createAnimation: создание анимации (добавлено 14 июня 2016 г.)
  • pageScrollTo: прокрутите до (новинка от 14 июня 2016 г.)
  • Связано с холстом (добавлено 14 июня 2016 г.)
    • createCanvasContext: создать контекст
    • createContext: создание и возврат контекста рисования (устарело)
    • drawCanvas: рисование (устарело)
  • Потяните вниз, чтобы обновить (добавлено 14 июня 2016 г.)
    • startPullDownRefresh: начать обновление по запросу.
    • STOPULLDOWNREFRESH: прекратить выдвигать обновление

связанные с маршрутизацией

  • navigationTo: перейти на страницу
  • redirectTo: перенаправление страницы
  • НавигацияНазад: возврат

Связанный узел WXML

  • createSelectorQuery: создать селектор узлов
    • in: изменить диапазон выбора селектора
    • select: выберите соответствующие узлы
    • selectAll: выбрать все подходящие узлы
    • selectViewport: выберите область отображения
    • boundingClientRect: возвращает положение макета добавленного узла относительно области отображения в пикселях.
    • scrollOffset: возвращает положение прокрутки добавленного узла в пикселях.
    • fields: получить информацию об узлах
    • exec: выполнить все запросы

компоненты

Основание

  • Значок: значок
  • Текст: текст
  • Прогресс: индикатор выполнения
  • RichText: редактор форматированного текста (новинка от 13 июня 2016 г.)

Посмотреть контейнер

  • Просмотр: просмотр контейнера
  • ScrollView: контейнер с прокручиваемым представлением
  • Swiper: ползунок рассматривается как контейнер
  • MovableView: контейнер с подвижным представлением (новинка от 13 июня 2016 г.)
  • CoverView: текстовое представление, которое может охватывать нативные компоненты (новинка от 13 июня 2016 г.)

компонент формы

  • Кнопка: кнопка
  • Флажок: множественный выбор
  • Радио: радио
  • Переключатель: переключатель
  • Откуда: форма
  • Этикетка: этикетка
  • Вход: поле ввода
  • Textarea: текстовая область
  • Сборщик: Сборщик
  • PickerView: я не знаю, в чем польза
  • Силдер: Ползунок выбора

навигация

  • Навигатор: навигационные ссылки

СМИ

  • Аудио: аудио
  • Изображение: картина
  • Видео: Видео
  • Камера: камера

карта(Добавлено 13 июня 2016 г.)

  • Карта: карта

Моменты, на которые следует обратить внимание

Размер дизайна

Таро рекомендует использоватьpx,百分比 %. Преобразованный стандартный размер Таро750px. Если вам нужно изменить, измените файл конфигурацииdesignWidthхарактеристики.

Деликатный случай

Таро будетpxпреобразование единиц измерения выполняется, ноPxилиPXдля преобразования.

ссылка на статический ресурс

На статические ресурсы можно ссылаться через шаблоны ES6.

Правила именования компонентов

Компоненты названы с использованием Camel-Case.

название события

  • Имена событий пишутся верблюжьим регистром, а не строчными.
  • Передача параметров в события должна проходитьbindметод
  • Передача времени любого компонента должна начинаться сonначало
  • Объект события всегда является последним параметром метода.

Отображение условий

Условный рендеринг может быть выполнен следующими способами:

  • переменная элемента
  • Логические операторы&&
  • Тернарный оператор

state

  • Статус не может быть обновлен напрямую
  • Обновления статуса должны быть асинхронными
  • обновления состояния объединены

Отличия от Реакта

props

  • Вместо того, чтобы передавать элементы JSX через реквизиты.
  • Пользовательские компоненты не могут вкладывать дочерние элементы
  • Нативные компоненты могут вкладывать дочерние элементы

скомпилированный объект элемента

JSX в React будет скомпилирован в обычный JS для выполнения, и каждый элемент будет пропущен черезcreateElementСоздание функции, все можно отфильтровать после обхода карты. Но в Таро JSX будет скомпилирован в строку шаблона апплета WeChat, поэтому шаблон после обхода карты нельзя рассматривать как массив. Если требуется фильтрация, сначала используйте фильтрацию, а затем генерацию обхода.

Категории