Небольшой и красивый каркас апплета, позволяющий более плавно разрабатывать программы апплета.

Апплет WeChat

Сегодня я хотел бы порекомендовать небольшую платформу для разработки программ, разработанную мной. Она используется уже почти год и относительно стабильна. В будущем она будет обновляться. Добро пожаловать в использование, добро пожаловать в звезду.

По сравнению с различными межконечными решениями, представленными в настоящее время на рынке, этот процесс разработки является более чистым, без каких-либо новых трудностей разработки и повышения эффективности разработки полностью на основе собственных апплетов ~

pandora-boierpalte-wechatЭто небольшая и красивая платформа для разработки апплетов WeChat. Мы не ввели никаких новых сложностей и имеем 100% возможность использовать апплет, но мы дополнили существующие инструменты разработчика небольших программ по сравнению с обычной веб-разработкой. Короткая доска упрощает для вас, чтобы разработать мини-программы WeChat.

Мы поддерживаем следующие улучшения:

  • Менее предварительно скомпилированный стиль письма, автоматически преобразованный в wxss

  • Автоматически импортировать асинхронные/ожидающие зависимости

  • dev/test/pre/prod многосредовая конфигурация

  • зависимостей npm, используйте пакеты npm, как обычные веб-проекты, а остальное оставьте на подмости.

  • Псевдонимы модулей, больше не нужно использовать относительные пути для импорта модулей js.

  • файл шрифта шрифта icon, маленькие значки используют файл шрифта напрямую, мы можем перейти на сайт IconFont, чтобы загрузить любимый файл svg

  • По умолчанию мы интегрируем vant-weapp, предоставленный Youzan, в библиотеку компонентов апплета, просто нужноpa i <component-name>Мы можем установить необходимые компоненты и их зависимости в проект

  • Создание файла шаблона

  • и его удобные возможности CICD,pa releaseРазвертывание одним щелчком мыши в фоновом режиме управления апплетом, более семантическое управление номером версии

Мы рекомендуем использовать сpandora-cliдля разработки мини-программ WeChat.

Меньше использования

На самом деле, само собой разумеется, просто создайте файл меньшего размера, чтобы заменить файл wxss.

Автоматически импортировать асинхронные/ожидающие зависимости

Сценарий сборки скаффолдинга автоматически проанализирует, используются ли в коде ключевые слова async и await. синтаксис с уверенностью.

Конфигурация с несколькими средами

После инициализации проекта апплета вы можетеconfig/app.yamlв конфигурации с несколькими средами. Поза следующая:

Содержимое конфигурации app.yaml выглядит следующим образом:

    appId: 'wxxxxxxxxx'
    appName: 'test-pandora'
    version: '1.0.0'
    development:
      env: 'development'
      host: 'https://api.dev.com'
    test:
      env: 'test'
      host: 'https://api.test.com'
    preproduction:
      env: 'preproduction'
      host: 'https://api.pre.com'
    production:
      env: 'production'
      host: 'https://api.prod.com'

После запуска проекта, то есть после запуска pa, каждое обновление и модификация файла app.yaml будет запускать автоматическую компиляцию.

В файле js, который необходимо использовать, импортируйте его следующим образом.

    import config from 'config'

Объект конфигурации — это файл конфигурации, который мы создаем в различных средах.

Например, после запуска pa start мы получаем следующий объект конфигурации:


{
    appId: 'wxxxxxxxxx',
    appName: 'test-pandora',
    version: '1.0.0',
    env: 'development',
    host: 'https://api.dev.com'
}

использоватьpa build --env test, результирующий объект конфигурации выглядит следующим образом:

{   
 
    appId: 'wxxxxxxxxx',
 
    appName: 'test-pandora',
    version: '1.0.0',
    env: 'test',
    host: 'https://api.test.com'
}

npm-зависимости

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

  • При разработке строительных лесов pandora-boilerpalte-wechat npm официально не поддерживается.

  • Официальная возможность npm требует, чтобы каталог node_modules располагался в корневом каталоге апплета, что противоречит текущим соглашениям о каталогах скаффолдинга и отличается от обычной структуры веб-проекта.

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

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


pa i <pkg> --npm



或者



npm i <pkg>

Оба вышеуказанных метода можно использовать для установки последней версии соответствующего pkg в проект node_modules.

Библиотека компонентов

Мы интегрировали Zan с открытым исходным кодомvant-weappПри использовании библиотеки компонентов апплета вам нужно установить только те компоненты, которые вам нужны, с помощью команды pa. Мы автоматически установим все необходимые зависимости, а затем будем использовать их в соответствии с положением использования пользовательских компонентов апплета. Максимизируйте эффективность разработки небольшие программы.

Например, мы хотим установить компонент диалога

pa i dialog

Эта команда автоматически установит только компонент диалога и его зависимости в проект src/compnents из библиотеки vant-weapp.

псевдоним модуля

Конфигурация находится в файле build.config.js в каталоге обновления проекта. Мы можем настроить псевдонимы для каталогов в проекте и использовать псевдонимы ссылок в исходном коде.

поддержка иконочного шрифта

Перейдите на официальный сайт Ali IconFont, чтобы загрузить SVG-файл вашего любимого значка в корневой каталог проекта.icons, сборка автоматически сгенерирует файлы шрифтов и встроит их в проект, вы можете использовать их следующим образом.

В каталоге значков есть следующие файлы

wechat.svg

В файле wxml вы можете добавить следующий класс к соответствующему тегу

<text class="icon-font icon-font_wechat"></text>

вicon-fontтребуется, второй тип композицииicon-font_<svg 文件名>

Конечно, мы можем добавить другие стили к этому элементу.

Создание файла шаблона

Создание компонентов

pa c component demo

或者 

pa create component demo

Созданный файл будет автоматически расположен в папке проекта src/components.

Создать страницу

pa c page demo

或者 

pa create page demo

Созданный файл автоматически размещается в папке проекта src/pages.

поддержка CICD

Выполните следующую команду в корневом каталоге проекта, чтобы автоматически опубликовать проект в фоновом режиме апплета.

pa release <version-type> -m '<comments>'

вversion-typeДля основных, второстепенных исправлений обратитесь к версии npm. Семантическая версия.

commentsТребуется для описания этого выпуска.

Здесь следует отметить, что pa-выпуск использует HTTP-интерфейс инструмента разработчика апплета, поэтому обязательно запустите инструмент разработчика апплета и设置 -> 安全 -> 安全（服务端口）开启

Категории