1. Центрирование значков и текста
Текст и значки расположены не по центру
На самом деле он не может быть полностью отцентрирован, вы можете сообщить дизайнеру о положении значка и позволить дизайнеру настроить центрирование в svg в определенном допустимом диапазоне.
дальнейшее чтениеИзучение структуры шрифта и схемы вертикального центрирования текста
2. Реагистрирование мероприятия Bubling
Под маленьким экраном мобильного терминала элементы сложены друг на друга, и вероятность всплытия событий гораздо выше.
3.wx.config
При переходе на страницу интерфейса wx.config используйте window.location вместо push, replace и т. д. для react-router.
4. wx.previewImage
Часть возможностей WeChat по обработке изображений унаследована от операционной системы, и на разных моделях и системах она ведет себя по-разному. Размер и размер просматриваемого изображения могут привести к сбою предварительного просмотра изображения (высокая вероятность появления у Xiaomi и Huawei).
- Ограничение размера и размеров изображения (сложно ограничить размер)
- использовать третье лицоРеализовать изображения предварительного просмотра
Значок плавающего окна микроканала
Отображается в соответствии с аватаркой официальной учетной записи, соответствующей appId в конфигурационной информации wx.config, введенной, когда текущая страница использует JS-SDK. Если на странице не используется JS-SDK, значок [Плавающее окно] по умолчанию представляет собой серую форму «ссылки».
6. Изменить глобальную текущую страницу
Белый фон устанавливается глобально в global.css, а на некоторых специальных страницах используется другой цвет фона. Не изменяйте css. Лучше использовать следующий метод.
7. Отладчик не должен быть запакован в код
Используйте cdn + оценку доменного имени для загрузки и отладки.Если вы используете пакет npm, он может быть упакован в код и увеличить размер кода.
8. прыжок специального символа URL
js-base64Перевод
7. Пакетная отмена ajax
В одностраничных приложениях часто бывает так, что страница маршрутизации не была запрошена, и он переключается на следующий маршрут.Запрос данных предыдущей страницы маршрутизации проходит успешно, но страница уничтожается, и консоль может сообщить об ошибке.
просить:
Компонент макета:
9. CSS запрещает пользователям нажимать и нажимать для сканирования QR-кода
元素加上 pointer-events: none; 属性
10. междоменная проблема iframe ios 14
11. Экран iphone bangs подстраивается под безопасную зону
На самом деле WeChat browser ios поставляется со своей адаптацией, но лучше адаптировать ее самостоятельно.CSS адаптируется к безопасной области экрана iPhoneX
12. Оценка реакции && символа
Если данные равны 0, страница будет отображаться как 0, а не не отображаться, поэтому обязательно будьте строгими.истинностное значениесудить.
13. При использовании границы с радиусом на некоторых телефонах Android граница не отображается.
14. Используйте реакцию 17 с ts
Подробнее см. =>Медленный рабочий процесс Typescript + React17 + Eslint + Git hook
15. Продукт подходит для старения
Настройка увеличения шрифта в WeChat приведет к загромождению макета страницы.
ios (ни один и 100%, кажется, не работает):Андроид: не сделано
Дальнейшее чтение =>Нарушение макета страницы, вызванное установкой размера шрифта WeChat
16. Частота зависимое увеличение обновления упаковки
Рекомендуется для каждой итерации смотреть, есть ли npm-пакеты, которые можно обновить, и обновлять как можно больше, иначе все не обновятся, и никто не решится обновиться в будущем, и это в итоге станет горой кодовое дерьмо.
17. На некоторых Android-устройствах сбоку от полосы прокрутки будет черная точка (лишняя горизонтальная полоса прокрутки).
18. После перехода на страницу прокрутите вверх
Страница history.push не уничтожается, и всплывающее окно предыдущей страницы не закрывается, что может вызвать некоторые проблемы, лучше всего закрыть каждую страницу, либо использовать какие-то глобальные методы для ее закрытия.
antd может использовать Modal.destroyAll();
20. Страница возврата ios не обновляется
21. Некоторые машины Android поддерживают обработку кеша ajax.
22 Соседний элемент мобильного телефона Apple, проблема быстрого щелчка события onClick
Мобильный терминал: быстро нажмите на текст выше и ниже (фактический бизнес-сценарий — это соседние кнопки), будут непрерывные нажатия на выше, и событие текста ниже не будет вызвано (оно должно быть очень быстрым).демонстрационный адрес
import "./styles.css";
import { useState } from "react";
export default function App() {
const [tType, setT] = useState(false);
const [bType, setB] = useState(false);
const top = () => {
console.log("这是上面的", tType);
setT((state) => !state);
};
const bottom = () => {
console.log("这下面的", bType);
setB((state) => !state);
};
return (
<div>
<div className="pt20" onClick={top}>
<div>这是上面的</div>
</div>
<div className="pt20" onClick={bottom}>
<div>这下面的</div>
</div>
</div>
);
}
Решение — заменить событие onClick на onTouchStart (есть подозрение, что событие onClick задерживается, а первопричина не найдена. Если есть лучший способ, обсудите его в комментариях)
Релевантная информация
Изучение структуры шрифта и схемы вертикального центрирования текста
Рабочий процесс Typescript + React17 + Eslint + Git hook