wxa.js

Лёгкий прогрессивный фреймворк для разработки мини-приложений, ориентированный на нативное программирование мини-приложений, предоставляющий лучшие возможности инженерики, повторного использования кода, повышающие производительность разработки и улучшающие опыт разработки.

Быстрый вход в проект, нулевое конфигурирование, безболезненная миграция.

Преимущества фреймворка

🖖 Быстрый вход в проект Без дополнительных барьеров обучения, можно полностью использовать нативный синтаксис мини-приложений для разработки.- Нулевое конфигурирование Для стандартного проекта нет необходимости в каких-либо настройках для запуска.
Низкая стоимость Очень низкие затраты на миграцию, нативные мини-приложения могут сразу работать в @wxa/cli2. Поддерживает смешанное использование нативных и WXA компонентов, что помогает старым проектам постепенно переходить.
Алгоритмы пакетизации зависимостей Самописные алгоритмы пакетизации зависимостей, помогающие разработчикам эффективно использовать пространство пакетов.
Анализ зависимости Автоматический анализ проектной зависимости, позволяющий избежать ручного копирования сторонних зависимостей в проект.
🤖 Динамическая загрузка любых сторонних инструментов, компонентов, моментальная установка и использование, идеально совместима с WeUI, Vant-WeApp и другими библиотеками компонентов.
Множественные экземпляры одновременная компиляция нескольких проектов сторонних разработчиков или небольших приложений для других платформ, таких как мини-приложения DouYin.

Более подробная информация доступна в документации.

Установка и использование

Установите глобально с помощью yarn или npm.

npm i -g @wxa/cli2
```**Быстрое создание нового проекта**

```bash
wxa2 create

Запуск среды разработки

wxa2 build --watch

Примеры разработки

app.wxa

<script>
import { App } from '@wxa/core';

@App
export default class Main {
    globalData = {
        userInfo: 'Genuifx',
    }
}
</script>

<config>
{
    "pages": [
        "pages/index"
    ]
}
</config>

<style lang="scss">
page {
    width: 100%;
    height: 100%;
}
</style>

pages/index.wxa

<script>
import { Page, Mixins, Debounce } from '@wxa/core';
import fooMixin from '../mixins/foo.js';

// Определение страницы и добавление миксинов
@Page
@Mixins(fooMixin)
export default class Index {
    data = {
        formA: {
            org: 'fintech',
            name: 'wxa'
        }
    }

    async onLoad() {
        console.log('Hello World');
    }

    // Создание функции debounce
    @Debounce(300)
    submitA(e) {
        console.log('submit success!');
    }
}
</script>

<config>
{
    "navigationBarTitleText": "Hello Wxa"
}
</config>

<template>
    <view class="page">
        Hi, <input type="text" value="{{formA.name}}" />
        <button bindtap="submitA">Отправить</button>
    </view>
</template>

<style lang="scss">
.page {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
</style>

По умолчанию экспортированные методы будут автоматически вызываться соответствующими методами Page, Component, App мини-приложения для регистрации.

Более подробная информация доступна в документации.

Быстрая предварительная проверка мини-приложения

wxa2 cli --action preview

Технические особенности

WXA — это фреймворк AOP, основанный на использовании декораторов (перехват выполнения) и предварительной компиляции для реализации функциональности фреймворка.С помощью декораторов реализовано:

Fetch автоматическая защита от повторной отправки запросов и управление очередью запросов.
Router простой API и возможность предварительной загрузки.
Eventbus простое решение для взаимодействия между страницами и компонентами.
Mixins объединение логики между страницами и компонентами.
Diff увеличенное использование данных.
Storage долговременное кэширование данных в небольшом приложении.
SessionStorage кэширование данных внутри периода работы приложения.
Lock предотвращение повторного выполнения функций, эффективное средство защиты от повторений на клиентской стороне.
Debounce предотвращение дребезга.

Примечание: В некоторых случаях было использовано более общее понятие вместо специфического термина, чтобы обеспечить правильность перевода в контексте IT-документации. Например, "prevent duplicate execution" переведено как "предотвращение повторного выполнения", а не "дебунчинг".

Просмотреть подробную информацию о Классовых декораторахС точки зрения предварительной компиляции, был реализован анализ зависимостей проекта мини-приложений, используя дерево зависимостей для управления всем проектом. На этой основе были адаптированы npm, однострочное развитие, облачное развитие и третье развитие. В плане синтаксиса поддерживаются последние ES*-синтаксис (включая Async/Await), Sass/Scss, Stylus. При необходимости можно адаптировать больше синтаксисов.## Экосистема WXA|Пакет|Описание|Версия |-----|--------|----- |@wxa/core|Основной пакет WXA runtime|| |@wxa/cli2|Командная строка и компиляция WXA|| |@wxa/validate|Валидация форм с поддержкой пользовательских правил проверки и сообщений|| |@wxa/watch|Watch & computed|| |@wxa/log|Отправка логов в реальном времени для мини-приложений|| |@wxa/mobx|Интеграция MobX в WXA|| |@wxa/redux|Интеграция Redux в WXA|| |@wxa/plugin-uglifyjs|Сжатие и улучшение качества JavaScript кода|| |@wxa/plugin-replace|Замена произвольных символов, используется для замены тестовых параметров при сборке|| |@wxa/plugin-copy|Копирование указанных статических ресурсов|| |@wxa/plugin-bind-hijack|Плагин для перехвата событий bind в мини-приложении|| |@wxa/plugin-minify-wxml|Сжатие WXML|||@wxa/plugin-postcss|Пользовательский плагин PostCSS| |@wxa/plugin-dependencies-analysis|Визуализация зависимостей модулей после сборки проекта, размеров и других данных, что помогает анализировать возможности оптимизации проекта.| |wxa-vscode|Плагин для Visual Studio Code|После установки вы сразу получите: автодополнение кода, форматирование; синтаксическое выделение цветами, проверку (включая файлы wxml и wxs); подсказки по фрагментам кода; поддержку однофайловых компонентов|