wechat h5 boilerplate
v0.3.6
«Сделайте производство H5 таким же простым, как производство PPT!»
Wechat-H5-Boilerplate (далее WHB) — это динамический шаблон H5, специально оптимизированный для WeChat и подходящий для быстрого создания полноэкранной рекламной страницы H5 с прокруткой.
Например, для анимации фрагмента текста требуется всего одна строка кода:
<p class="animated" data-ani-name="slideInRight" data-ani-duration="1s" data-ani-delay="0.3s">I'm a coder!</p>
Используйте свой мобильный телефон , чтобы посетить адрес, указанный ниже, или отсканируйте QR-код ниже.
https://panteng.github.io/wechat-h5-boilerplate/
/app
/dist --> 项目文件的分发版本，所有的文件均由Gulp任务生成，请勿手动修改
/audios --> 从app/src/audios复制而来
/fonts --> 从app/src/fonts和在config/vendors.js中指定的第三方字体复制而来
/images --> 由app/src/images下的图片经Imagemin压缩优化生成
/javascripts --> 由app/src/javascripts下的文件经Browserify打包生成
/stylesheets --> 由app/src/scss下的文件编译生成
index.html --> 由app/src/index.html经Gulp-inject插入bundle.(min.).css和bundle.(min.).js后生成
/src --> 项目的源码，所有文件都可编辑
/audios --> 存放音频、视频文件
/fonts --> 存放字体文件
/images --> 存放图片文件
/javascripts --> JS源文件，经Browserify打包后生成app/dist/javascripts/bundle.js
/scss --> SCSS文件，经过编译后生成app/dist/stylesheets/bundle.css
index.html --> 页面HTML，经过Gulp-inject处理后生成app/dist/index.html
/config
vendors.js --> 第三方CSS、JS、Fonts列表，详见vendors.js说明
.gitignore
gulpfile.js --> Gulp任务
package.json
Клонировать этот проект локально
Запустите в консоли:
git clone --depth=1 https://github.com/panteng/wechat-h5-boilerplate.git <your-project-name>
cd <your-project-name>
Или вы можете загрузить сжатый пакет исходного кода WHB прямо со страницы выпуска.
Установите сторонние пакеты
WHB использует NPM для управления сторонними пакетами
Запустите в консоли:
npm install
Примечание 1. Из-за плохой сетевой среды в Китае загрузка пакетов через NPM осуществляется очень медленно. Рекомендуется использовать зеркало Taobao NPM CNPM. Способ установки CNPM см. в инструкциях официального сайта. В CNPM v4.2.0 есть ошибка в системах Windows (см. № 97). Пользователям Windows не следует использовать эту версию. Хотя официальный представитель сказал, что она исправлена, я все равно получаю сообщение об ошибке, когда использую CNPM в Windows для установки пакетов, требующих этого. компиляция node-gyp. Я также не рекомендую использовать CNPM v3.4.1, поскольку его встроенная версия NPM слишком старая. Рекомендуется установить npm install --registry=https://registry.npm.taobao.org -d напрямую, используя зеркальное хранилище. (-d добавляется для отображения подробной информации во время процесса установки. Лично я часто использую этот метод, чтобы определить, завис ли процесс установки из-за сетевых или других проблем).
Примечание 2. Некоторые сторонние пакеты, необходимые для WHB, зависят от node-gyp. Перед установкой этих пакетов убедитесь, что node-gyp правильно установлен на вашем компьютере. Для установки обратитесь к официальной документации node-gyp. У пользователей Windows могут возникнуть некоторые проблемы, поскольку установка node-gyp в Windows вызывает затруднения.
Примечание 3. Пользователи Windows, пожалуйста, не размещайте WHB в каталоге, расположенном слишком глубоко в пути. Поскольку Windows поддерживает только пути длиной менее 255 символов, если вы поместите этот проект в каталог с глубоким путем, весьма вероятно, что node-gyp не удастся скомпилировать.
Примечание 4. Пользователи Windows, если вы правильно установили node-gyp, но при запуске npm install -d по-прежнему получаете сообщение об ошибке «EPERM, операция не разрешена», попробуйте npm install -d --force .
Начать разработку
Запустите на консоли:
gulp dev
Через некоторое время окно браузера автоматически откроется и укажет на адрес localhost:3000 . Когда вы измените любой файл в разделе app/src, страница браузера автоматически обновится.
Выполнить задачу gulp prod
Запустите в консоли:
gulp prod
Эта задача создаст два новых файла Bundle.min.css и Bundle.min.js в папке app/dist и удалит исходные файлы Bundle.css и Bundle.js.
При публикации вам нужно только загрузить на сервер файлы из папки app/dist, никаких других файлов не требуется. Файлы CSS, JS и изображений в app/dist сжаты и оптимизированы.
анимация загрузки
Страницы H5 обычно содержат много изображений и фоновой музыки, поэтому необходима красивая анимация загрузки.
Вы можете написать некоторые анимации CSS3 самостоятельно, вставить HTML-код, связанный с анимацией, в <div class="loading-overlay"></div> в app/src/index.html и интегрировать соответствующий код анимации CSS3 в файл app/. источник/scss.
Если вы хотите избежать хлопот, сайт loading.io может помочь вам создать готовые анимации загрузки (если вы не можете его открыть, пройдите через стену). Рекомендуется создать файл анимированного изображения в формате SVG, изменить его на loading.svg и заменить файл с тем же именем в папке app/src/images/.
Также поделитесь отличными библиотеками анимации загрузки CSS3:
Эффект переключения страниц
Переключение страниц в настоящее время поддерживает только четыре типа, которые входят в состав Swiper: слайд, затухание, переворот и перекрытие (куб не поддерживает это, поскольку не соответствует этому сценарию). Подробности см. в разделе об эффектах документации Swiper.
WHB пока не умеет указывать разные методы переключения для разных страниц. Я рассмотрю возможность добавления этой функции и более интересных методов переключения в последующих версиях.
Анимация элементов (картинок, текста) внутри страницы.
Добавить анимацию к изображениям и тексту в WHB очень просто.
Например, на первой странице есть абзац текста, который необходимо отобразить в анимации. Код следующий:
<div class="swiper-slide slide-1">
<p class="animated" data-ani-name="slideInRight" data-ani-duration="1s" data-ani-delay="0.3s">I'm a coder!</p>
</div>
Просто добавьте к этому тексту имя animated класса и укажите три атрибута: data-ani-name (имя анимации), data-ani-duration (время выполнения анимации) и data-ani-delay (время задержки анимации).
Анимация WHB предоставляется Animate.css. Поддерживаемые названия анимаций можно просмотреть на официальном сайте Animate.css.
Значок шрифта
В файле значков шрифта, поставляемом с WHB, есть только два значка, а именно: символ музыки в правом верхнем углу и символ подсказки в нижней части экрана. Если вам нужно больше значков, рекомендуется использовать Icomoon.io для настройки, выбрать нужные значки (вы также можете создать и загрузить их самостоятельно) и упаковать их в файлы шрифтов.
Причина, по которой не рекомендуется использовать общие пакеты шрифтов, такие как Font-Awesome, заключается в том, что в Font-Awesome много значков, поэтому файл шрифта будет относительно большим, и большинство значков не используются. Файлы шрифтов большего размера могут замедлить загрузку веб-страниц на пользовательских устройствах.
Оптимизация изображения
WHB поставляется с функцией сжатия изображений с потерями в папке app/src/images, но я все же рекомендую вам выполнить необходимую ручную оптимизацию изображений, прежде чем загружать их в папку app/src/images, например: «Отрегулировать до соответствующего размера, интегрировать». несколько небольших картинок в спрайты и т.д.
Поделитесь некоторыми полезными веб-сайтами по оптимизации и обработке изображений:
фоновая музыка
Рекомендуется формат файла фоновой музыки mp3, размер не должен превышать 1 МБ. Вы можете использовать профессиональное программное обеспечение для редактирования аудио, такое как Adobe Audition, для перехвата и сжатия фоновой музыки.
Если в этом нет необходимости, не устанавливайте фоновую музыку, которая будет мешать пользователям.
Отладка мобильного терминала
Сначала запустите задачу gulp dev и найдите следующий абзац в выводе консоли:
[BS] Access URLs:
----------------------------------------
Local: http://localhost:3000
External: http://192.168.187.101:3000
----------------------------------------
UI: http://localhost:3001
UI External: http://192.168.187.101:3001
----------------------------------------
Затем убедитесь, что ваше мобильное устройство (мобильный телефон, планшет и т. д.) и компьютер находятся в одной локальной сети (самый простой способ — подключить компьютер, мобильный телефон и планшет к одному и тому же Wi-Fi; или компьютер подключен к маршрутизатору). с помощью сетевого кабеля, а мобильный телефон и планшет подключены к одному и тому же Wi-Fi, выдаваемому маршрутизатором).
Наконец, откройте браузер на своем мобильном устройстве и перейдите к URL-адресу, соответствующему «Внешнему» в третьей строке выше (обратите внимание, что ваш URL-адрес может отличаться от того, что я написал выше, обратитесь к внешнему URL-адресу, отображаемому в вашей собственной консоли).
Теперь, если вы измените файл в разделе app/src, все мобильные устройства и компьютеры, обращающиеся к этому URL-адресу, будут автоматически обновлять страницу браузера. Операции, которые вы выполняете на одном устройстве, также синхронизируются с другими устройствами в режиме реального времени (например, пролистывание страницы пальцем вверх).
Адаптивный дизайн
Рекомендуется использовать rem вместо px для установки размера, полей и размера шрифта элементов.
В WHB значение пикселей, соответствующее 1rem, будет меняться в зависимости от размера экрана устройства.
На устройствах с шириной экрана менее 400 пикселей 1rem = 16 пикселей;
На устройствах с шириной экрана более 400 пикселей и менее 600 пикселей 1rem = 22 пикселя;
На устройствах с шириной экрана более 600 пикселей 1rem = 32 пикселя;
См. код Media Query в app/src/scss/base/_base.scss.
описание config/vendors.js
Файлvendors.js используется для регистрации сторонней информации CSS, JS и шрифтов. Все сторонние файлы, зарегистрированные вvendors.js, будут добавлены в проект в той или иной форме. Например: еслиvendors.js теперь выглядит так:
module.exports = {
stylesheets: [
'node_modules/normalize.css/normalize.css',
'node_modules/swiper/dist/css/swiper.css',
'node_modules/animate.css/animate.css',
'node_modules/font-awesome/css/font-awesome.css'
],
javascripts: [
'node_modules/jquery/dist/jquery.js'，
'node_modules/swiper/dist/js/swiper.jquery.js'
],
fonts: [
'node_modules/font-awesome/fonts/*'
]
};
Все файлы CSS в таблицах стилейvendors.js будут добавлены в файл Bundle.css, окончательно сгенерированный проектом;
Все js-файлы в javascript-файлахvendors.js будут добавлены в Bundle.js, окончательно сгенерированный проектом;
Все файлы шрифтовvendors.js будут скопированы в папку app/dist/fonts.
Помните, что файлы, зарегистрированные вvendors.js, сначала будут добавлены в Bundle.css и Bundle.js, поэтому вам не нужно беспокоиться о том, что стили в SCSS, которые вы написали, будут перезаписаны или что объект из сторонней библиотеки будет перезаписан. не найден в определенной ситуации main.js. Файлы, зарегистрированные в файлеvendors.js, будут добавлены в Bundle.css и Bundle.js в порядке регистрации, поэтому необходимо убедиться в правильности порядка регистрации. Например, jquery.js необходимо зарегистрировать до swiper.jquery.js. , поскольку swiper.jquery.js зависит от jquery.js.
Примечание 1. Путь к файлу указан относительно gulpfile.js, а неvendors.js.
Примечание 2. Если вам не нравится импортировать сторонние файлы JS таким способом и вы хотите использовать для их импорта метод записи, требующий записи CommonJS, это также возможно. Например, добавьте jQuery в app/src/javascripts/main.js следующим образом:
var $ = require('jquery');
Гулп-задачи
Если в процессе разработки вы обнаружите, что вы изменили или заменили изображения, аудио, шрифты и другие файлы в файле app/src, но страница в браузере соответствующим образом не изменилась, попробуйте еще раз запустить gulp dev в консоли. задачи gulp dev .
Массачусетский технологический институт
