HTTP-запрос
вторичная инкапсуляция uni.request
междоменная проблема h5
npm run dev:mp-weixin
npm run dev:h5
Небольшая яма: когда значение возвращаемого поля интерфейса на стороне апплета равно нулю, это значение отображается на странице в виде строки.
На стороне h5 вроде нет проблем, и доступ к интерфейсу очень плавный.Взгляните на сторону апплета WeChat, и на странице много нулей. Откройте сеть и увидите, что поле явно возвращает null, почему оно становится нулевой строкой и отображается.
Решение выглядит следующим образом:
Оптимизация: сделать асинхронность более элегантной (имитировать формат асинхронного возврата узла [ошибка, разрешение])
Оптимизация: проблема с защитой от сотрясения (форма отправляется несколько раз, проверка правил поля формы, мониторинг прокрутки)
Когда вы не понимаете, что такое антишейк, нажмите на свой аватар «Наггетс» -> «Написать статью» -> начните писать свой блог, вы обнаружите эффект автоматического сохранения, откройте сеть и внимательно наблюдайте, вы найдет Если вы не вводите текст в течение 2-3 секунд в процессе написания блога, будет отправлен запрос updateDraft для сохранения вашего блога в черновике~~~ Вы чувствуете, что сразу что-то понимаете?
Код спускайся вниз — это блог старшей фронтенд-леди некоего Донга, краткий анализ волны
Имитация Vue-маршрутизатора (uni-simple-router)
Конкретный адрес плагина, который можно переместить к большому парню:Боюсь 1-solve.byte IMG.com/to S-talent-i-he 2…
Таким образом, маршрутизатор может работать так же элегантно, как vue, эксклюзивная защита маршрутизации на уровне страницы (beforeEnter), глобальная защита маршрутизации (beforeEach, afterEach), базовая передача, замена и т. д.
обновление страницы vuex ясно проблема
постоянство vuex: vuex-persistedstate плюс mp-storage (поддержка универсальных многотерминальных прокладок хранилища), вы также можете распечатать журнал vuex в среде разработки, vuex может принимать localStorage, sessionStorage, файлы cookie и т. д.
Мой выбор в проекте: localStorage.
В это время мы подумаем, хочу ли я сохранить только часть ключей в хранилище, а другая часть ключей не будет сохранена.
Ниже мое решение.
Вход (бесплатный вход через встроенный браузер wechat, бесплатный вход через апплет wechat, вход с обычным кодом подтверждения)
Обычный вход с кодом подтверждения
Просто пройдите проверку JWT. Токен можно кэшировать локально.
Встроенный браузер WeChat без входа в систему
(Просто перейдите непосредственно в WeChat SDK, перенаправьте и измените код, чтобы получить ссылку openId. Teleport:Билеты.WeChat.QQ.com/wiki?Он = горячая вода...)
Бесплатный вход в апплет Wechat (аналог апплета Alipay, authCode)
uni.login, чтобы получить код. Когда вы входите в систему в первый раз, code+mobile+icode выбрасывается на серверную часть, и серверная часть сохраняет openId в библиотеке. При повторном входе код выбрасывается на серверную часть, и серверная часть сравнивает openId текущего пользователя с openId в таблице.
Оплата (оплата Alipay h5, оплата через апплет WeChat, оплата через встроенный браузер WeChat)
Советы: сложность оплаты находится на заднем конце. Просто съешьте дыню молча на переднем конце
Платеж Alipay h5
// Пример кода (базовая отправка формы)
const div = document.createElement("div");
div.innerHTML = res;
document.body.appendChild(div);
document.forms[0].submit();
Платежный апплет микроканала
uni.requestPayment() Можно проверить различные платежные поля WeChat (например, nonceStr, paySign и т. д.).
Встроенная оплата браузера WeChat
Перейдите в WeChat SDK, и вы сможете проверить подпись различных платежных полей WeChat (таких как nonceStr, paySign и т. д.) по ссылке телепорта:Боюсь, что есть. WeChat.QQ.com/wiki/doc/AP…)
Упаковка компонентов
Параметры передачи реквизита (проверка формата, проверка значения и т. д.), слот-слот (наиболее часто используется слот области). К пользовательским компонентам в проекте относятся: компонент платежной клавиатуры, компонент фильтра-фильтра (с адсорбцией сверху) и др.
Когда мы инкапсулировали эти компоненты, думали ли мы когда-нибудь, что объем требований, которые мы инкапсулируем сейчас, — это только проект, как мы можем удовлетворить 90% или более бизнес-требований, таких как antd и element. В это время вы можете перейти к блогу босса Али:nuggets.capable/post/684490…
прокатное проникновение
- Когда в модальном слое нет прокрутки, когда модальное отображается, можно напрямую отключить touchmove.
- Когда модальный слой имеет прокрутку, страница{ положение: фиксированное; верх:0; высота:100%; переполнение: скрыто; } Модальный слой использует вид прокрутки, который может решить проблему проникновения прокрутки.
Авторизация апплета WeChat отключена (авторизация местоположения карты ChooseLocation, авторизация шагов WeChat getRunData, личная информация WeChat getUserInfo)
Пример: когда вы входите в апплет в первый раз и кнопка вручную запускает getUserInfo, появляется всплывающая авторизация WeChat. Если вы нажмете «Отмена», авторизация будет отклонена (Советы: В случае, если апплет не будет удален вручную, после того, как пользователь откажется от авторизации, повторный вызов API разрешений, такого как getUserInfo, не вызовет всплывающее окно авторизации, а перейти непосредственно к обратному вызову ошибки getUserInfo), такое взаимодействие очень недружественно.
Решение: getSetting для получения авторизации пользователя, если авторизация пользователя закрыта, showModal направляет пользователя вручную открыть авторизацию WeChat. Если пользователь нажимает «ОК» в модальном окне, он напрямую вызывает openSetting (открывает интерфейс настроек и помогает пользователю включить авторизацию). Если пользователь нажмет «Отмена» в модальном окне, при следующем входе в апплет он перейдет к showModal из getSetting, чтобы предложить пользователю активировать авторизацию вручную.
отладка
Сторона h5: Плагин vconsole позволяет просматривать лог-лог в симуляции реальной машины, что удобно для своевременного поиска и решения проблем.
Небольшая программа: реальная отладка машин крупных производителей была очень совершенной. Апплет WeChat недавно обновил автоматизированное тестирование (версия узла), чтобы облегчить тестирование.
Финальная битва: выпустить апплет, выпустить h5
Выпуск h5: все еще выпуск jenkins, такой же, как и обычные веб-проекты vue и react.
Небольшой выпуск программы: Самопроверка => Обзор => Выпуск (возможно, придется пройти через NNN раз в середине... если проверка не удалась, сохраняйте спокойствие)