Скачать wx miniprogram boilerplate - wx miniprogram boilerplate Скачать исходный код

wx miniprogram boilerplate

AI Исходный код

1.0.0

Скачать

️ иллюстрировать

️ ️ ️ Обновления остановлены. Это только для ознакомления. Рекомендуется использовать другие зрелые среды разработки небольших программ.

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

Рабочий процесс разработки апплета WeChat на основе Gulp

Модель разработки нативных небольших программ слишком проста. С точки зрения стиля студенты, привыкшие писать меньше, стилусом и sass, не смогут терпеть метод написания wxss. Исходя из этого, я решил использовать инструменты автоматизации gulp . для создания набора небольших программ WeChat. Базовый шаблон, полностью сохраняя функции и возможности апплета WeChat, также может использовать less стилей. В то же время он также добавляет такие функции, как сжатие изображений и быстрые команды. линия создания шаблонов для повышения эффективности разработки!

характеристика

Проект мини-программы WeChat на основе gulp+less
Автоматическое сжатие изображений проекта
Проверка кода ESLint
Быстро создавайте page , template и component с помощью командной строки.
Поддержка упаковки производственной среды

Начиная

0. Перед запуском убедитесь, что node и npm установлены, а gulp-cli установлен глобально.

 $ npm install --global gulp-cli

1. Загрузите код

 $ git clone https://github.com/YangQiGitHub/wx-miniprogram-boilerplate.git

2. Войдите в каталог и установите зависимости.

 $ cd wx-miniprogram-boilerplate && npm install

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

 $ npm run dev （开发环境打包）
$ npm run test (测试环境打包)

4. Создайте новую страницу, шаблон или компонент.

  gulp auto -p mypage           创建名为mypage的page文件
  gulp auto -t mytpl            创建名为mytpl的template文件
  gulp auto -c mycomponent      创建名为mycomponent的component文件
  gulp auto -s index -p mypage  复制pages/index中的文件创建名称为mypage的页面

5. Скомпилируйте перед загрузкой кода

 $ npm run build （生产环境打包）

6. Загрузите код, проверьте и опубликуйте его.

инженерное сооружение

 wx-miniprogram-boilerplate
├── dist         // 编译后目录
├── node_modules // 项目依赖
├── src 
│    ├── components // 微信小程序自定义组件
│    ├── env        // 请求域名配置
│    ├── images     // 页面中的图片和icon
│    ├── pages      // 小程序page文件
│    ├── styles     // ui框架，公共样式
│    ├── template   // 模板
│    ├── utils      // 公共js文件
│    ├── app.js
│    ├── app.json
│    ├── app.less
│    ├── project.config.json // 项目配置文件
│    └── api.config.js       // 项目api接口配置
├── .gitignore
├── .eslintrc.js
├── package-lock.json
├── package.json
└── README.md

Описание глотка

 Tasks:
  dev              开发编译，同时监听文件变化
  test             整体编译，请求指向测试环境
  build            整体编译

  clean            清空产出目录
  wxml             编译wxml文件（仅仅copy）
  js               编译js文件，同时进行ESLint语法检查
  json             编译json文件（仅仅copy）
  wxss             编译less文件为wxss
  img              编译压缩图片文件
  watch            监听开发文件变化
  devEnv/testEnv/prodEnv 生成对应环境的请求域名配置

  auto             自动根据模板创建page,template或者component(小程序自定义组件)

gulp auto 

选项：
  -s, --src        copy的模板                     [字符串] [默认值: "_template"]
  -p, --page       生成的page名称                                       [字符串]
  -t, --template   生成的template名称                                   [字符串]
  -c, --component  生成的component名称                                  [字符串]
  --msg            显示帮助信息                                           [布尔]

示例：
  gulp auto -p mypage           创建名为mypage的page文件
  gulp auto -t mytpl            创建名为mytpl的template文件
  gulp auto -c mycomponent      创建名为mycomponent的component文件
  gulp auto -s index -p mypage  复制pages/index中的文件创建名称为mypage的页面

Вопросы и ответы

Вопрос: Почему преобразование js, завершение стилей и сжатие кода не включены в рабочий процесс?
О: Инструменты разработчика WeChat включают в себя функции Babel по преобразованию ES6 в ES5, дополнению стилей и сжатию кода JS. Никаких дополнительных дополнений в этом рабочем процессе не требуется.
Вопрос: Как используются файлы в каталоге _template ?
О: Используйте команду gulp auto для автоматического создания файлов. Параметр -s может указать объект копирования. По умолчанию в качестве объекта копирования _template файлы в папке в соответствующем каталоге. Разработчики могут настраивать файлы _template в соответствии с потребностями бизнеса.
Вопрос: Будут ли файлы из каталога _template скомпилированы в каталог dist ?
А: Нет.