После полутора недель цикла разработки моя страница активности WeChat на основе Vue почти не доступна. Я прошел через много ям и заполнил много ям. В целом, я получил большую пользу.
В этой статье будут рассмотрены:
- Создание каркаса активной страницы Vue
- Связанное использование маршрутизации при разработке активных страниц
- Страница активности общается с пользователями основного сайта
- Проблемы, возникающие в реальной линии
- Краткое изложение этой разработки
Создание каркаса активной страницы Vue
Я считаю, что потребность в создании страницы активности появилась у всех, и в большинстве случаев она основана на среде WeChat. В этом контексте удобный и быстрый производственный режим Vue кажется более доминирующим, чем другие фреймворки.
Как правило, технологии, необходимые для разработки активной одиночной страницы, — это Vue/Vue-router/axios/sass/webpack, которых вроде бы достаточно много, но на самом деле vue-cli помогает нам решить эти проблемы, а настройка конфигурация также является После завершения настройки вам нужно только изменить или добавить некоторые конфигурации в соответствии с вашими потребностями, чтобы быстро создать пригодную для использования структуру активной страницы. Ниже находится портал о построении активного фрейма страницы↓↓
Разработка страницы активности с нуля
Связанное использование маршрутизации при разработке активных страниц
Независимо от того, успешна ли разработка мобильной страницы действий или нет, я лично считаю, что опыт является основным фактором. Поскольку об опыте говорят, маршрутизацию нельзя игнорировать. Хороший скачок маршрутизации может многое добавить ко всей странице активности, но в реальной разработке, роутинг не так просто подогнать под наш бизнес, особенно в среде WeChat.
Большая часть времени на этой странице событий проводится в ямах маршрутизации.Будь то авторизация WeChat или оплата WeChat, есть ямы и ямы.Ниже приведен портал о маршрутизации использования страницы событий↓↓
Разработка страницы активности на основе vue - связанная с маршрутизацией
Страница активности общается с пользователями основного сайта
Я все же хочу кратко упомянуть об этом.Вообще говоря, страница активности незаменима для авторизации или оплаты WeChat.В настоящее время было бы очень круто, если бы пользовательские данные основного сайта можно было использовать повторно (особенно с точки зрения пользовательского опыта) , поэтому страницу активности рекомендуется по возможности разместить под доменным именем основного сайта, почему? Могу поделиться чем-нибудь
Проблемы, возникающие в реальной линии
① Проблема базового пути в vue-router
В статье про маршрутизацию упоминается использование базового пути для решения проблемы, что некорневой путь указывает на индекс, но оказывается, что это неосуществимо (конечно, неосуществимо исходя из моей разработки задний план).
Браузер всегда добавляет '/' в конце моего пути, из-за чего платеж WeChat не может быть активирован нормально (особенно для устройств Android). В конце путь в маршруте изменяется на соответствующий полный путь, чтобы решить эту проблему. .
②Как инициализировать WeChat JSSDK
В начале JSSDK был инициализирован в main.js, но было обнаружено, что текущее состояние wxReady не может быть хорошо получено в приложении vue, что может привести к проблемам в обмене WeChat. В конце концов, был создан отдельный компонент для загрузки JSSDK WeChat и отслеживания состояния $route, а также сброса общего доступа WeChat при каждом изменении маршрута.
Одним из преимуществ включения метода инициализации JSSDK в компонент является то, что можно использовать реквизиты и состояние, и эффект выдающийся при работе с определенными требованиями.
③Об оплате
В начале разработки все платежные методы были вынесены в Utils.js, но по мере разработки глубина страницы увеличивалась, а жесты для запуска платежа становились все разнообразнее. , размещенный в компоненте Pay.vue, смонтированный в родительском компоненте верхнего уровня и переданный vuex для обработки логики оплаты.
④Каталог проекта
Наконец, позвольте мне показать вам структуру каталогов этого проекта.Хотя предполагается, что есть еще много ям, я все же надеюсь, что это может быть полезно.
На этот раз я не только собрал Utils для js, но и попытался настроить аналогичную «общую библиотеку» в scss для хранения некоторых методов о px2rem и некоторых часто используемых миксинах, и эффект теста был хорошим.
Кроме того, независимо от разработки на уровне страницы или на уровне компонентов, пока проект не особо большой, я рекомендую помещать html, css и js в одну папку.Если вы используете ресурсы изображений, вы можете даже положить их в той же папке. , так что, если проект станет больше, его эффект проявится.
WeChat JSSDK и платежные компоненты, упомянутые выше, записаны в папке компонентов для удобства будущих студентов, изучающих техническое обслуживание, «как следует из названия».
Суммировать
Это также одна из немногих страниц активности малого и среднего размера, которую решает один человек.По прошествии более недели рабочая нагрузка все еще относительно насыщена.(Хотя они проверяют документацию). По сути, это не только энергозатратное построение проекта и логика, но и трата большого количества времени на восстановление дизайн-проекта страницы, ведь речь идет о множественных списках и смешении горизонтальных и вертикальных списков, и количество информации на странице очень огромное, да и верстка тоже написана удушающе.
Подождите, пока мои коллеги закончат контент, который нужно отобразить, надеюсь, я смогу показать его всем здесь, спасибо, что читаете~