miniprogram template

минипрограмма-шаблон

Проект шаблона мини-программы wechat — лучшая практика использования TypeScript и VSCode

[Рекомендации по созданию шаблонов мини-программ (TypeScript+VSCode), созданных с помощью инструмента сборки мини-программ]

---

Требуется [требуемая среда]

• nodejs: npm >= 6.0 (или yarn ) Node >= 10
• Редактор: VSCode
• Wechat-Devtools: мини-инструмент разработки программ (и открытый服务端口).

Быстрый старт [Использовать]

1. создать проект [Создать новый проект одним щелчком мыши]

Нажмите Использовать этот шаблон, чтобы использовать этот шаблон одним щелчком мыши, или используйте командную строку:

 # 不指定`[本地目录]`则在当前目录创建,`-n`表示使用最新模板
npm create miniprogram NewFuture/miniprogram-template -n [本地目录]
# 或者
# yarn create miniprogram NewFuture/miniprogram-template -n [本地目录]

2. начать [запустить из файла проекта]

 # cd [本地目录名]
npm start
# 或者
# yarn start

После обычного запуска инструмент отладки автоматически откроет предварительный просмотр dist .

Скрипт [команда]

npm можно заменить yarn

• npm start : перекомпилировать проект и обновить его в режиме реального времени [псевдоним npm run start ]
  • npm run start:test : использовать файл конфигурации тестовой среды для разработки.
  • npm run start:prod : использовать файл конфигурации среды сборки для разработки.
• npm run upload : упаковать и загрузить проект в фоновую мини-программу (конфигурация среды разработки).
  • npm run upload:test : используйте конфигурацию тестовой среды для упаковки и загрузки проекта в фоновую мини-программу.
  • npm run upload:prod : используйте конфигурацию среды сборки для упаковки и загрузки проекта в фоновую мини-программу.
• npm run build : переупаковать и скомпилировать (конфигурация среды разработки)
  • npm run build:test : переупаковать и скомпилировать
  • npm run build:prod : переупаковать и скомпилировать
• npm test : тест [псевдоним npm run test ]
• npm run check : проверка стиля и формата кода (поддерживает отдельные lint на разных языках)
• npm run fix : автоматически устраняет исправимые проблемы с ворсом и стилем кода.
• npm run help : просмотр подробного использования инструмента компиляции mp.

Все команды быстрого доступа package.json

Множественная среда [Несколько настроек среды]

Каждую среду можно настроить по-разному (конфигурацию среды можно увеличить или уменьшить по мере необходимости)

• .mpconfig.jsonc интегрированная среда разработки
• конфигурация тестовой среды env/test.jsonc
• env/prod.jsonc онлайн-конфигурация производственной среды

Если имеется только одна среда, вы можете удалить каталог env и настроить его напрямую с помощью .mpconfig.jsonc

Кодирование [кодирование]

Языки [языки программирования]

js

• .ts (TypeScript) или .js (JavaScript) ( рекомендуется ts )
• Eslint + Prettier проверяет стиль кода и автоматическое форматирование
• TS поддерживает импорт / импорт абсолютного пути

wxml

• .wxml или .html
• Htmlhit + Prettier проверяет стиль кода и автоматическое форматирование
• Используйте vscode-minapp для проверки и форматирования кода.

wxss

• .scss , .sass или .css (рекомендуется scss )
• Stylelint + Prettier проверяет стиль кода и автоматическое форматирование.
• Автоматически сортировать свойства CSS в указанном порядке
• scss может напрямую @import содержимое каталога ресурсов.

JSON

• Поддерживаются аннотации .jsonc , .json или .json5
• Улучшенная проверка кода и автоматическое форматирование.

wxs

• .wxts (TypeScript), .wxs (JavaScript) (рекомендуется wxts )
• Улучшенная проверка кода и автоматическое форматирование.
• miniprogram-wxs выполняет проверку и квалификацию типов

Редактор [редактор]

Используйте VSCode и автоматически устанавливайте рекомендуемые плагины

1. Автоматически устанавливать рекомендуемые плагины в соответствии с подсказками при первом использовании.
2. Все плагины настроены, автоматически будут выполняться запросы на проверку кода и автоматически восстанавливаться при сохранении.
3. При создании новой Page , Component , wxs автоматически сгенерирует файлы шаблона (шаблон можно изменить)

CI [Непрерывная интеграция]

Действия Auzre Pipelines, Travis CI и Github настроены по умолчанию и могут быть открыты и изменены по мере необходимости.

• Azure Pipelines При необходимости измените конфигурацию azure-pipelines.yml.
• Travis-CI модифицирует файл Configuration.travis.yml по мере необходимости.
• Действия Github Измените конфигурацию по мере необходимости.github/workflows/nodejs.yml