Когда я впервые начал создавать мини-программы, разработчикам был доступен лишь ограниченный набор функций пользовательского интерфейса. Со временем этот набор функций постепенно расширялся, позволяя заменять фиксированные «родные» элементы, такие как панель вкладок, и настраивать их для таких целей, как:
- Отображение разных вкладок для определенных типов пользователей
- Персонализация внешнего вида панели вкладок и элементов вкладок
Эти потребности можно удовлетворить, настроив нашу панель вкладок на пользовательскую и создав ее самостоятельно.
Сегодня я покажу вам, как настроить и создать пользовательскую панель вкладок, и расскажу о некоторых ограничениях, с которыми я столкнулся при использовании ее в рабочем проекте.
Шаг 1. Настройте файл app.json.
Давайте начнем с включения функции пользовательской панели вкладок в файле конфигурации нашего приложения.
Откройте app.json и прокрутите вниз до свойства tabBar.
Добавьте к этому объекту свойство с именем «custom» со значением true.
Если вы создаете панель вкладок для отображения разных вкладок в зависимости от определенных ролей пользователей, вы также должны убедиться, что все страницы, которые вы хотите использовать в качестве элементов панели вкладок, добавлены в панель вкладок. массив «список».
Настройка «tabBar» на «пользовательский» отключает собственную панель вкладок и позволяет создать компонент, который будет отображаться на всех страницах, добавленных в список «tabBar».
Шаг 2. Создайте файлы пользовательской панели вкладок
Согласно документации, теперь нам нужно создать компонент для пользовательской панели вкладок.
Этот компонент должен находиться в определенной папке под названием «custom-tab-bar», где эта папка находится непосредственно в корневом каталоге вашей мини-программы.
После создания папки пользовательской панели вкладок щелкните ее правой кнопкой мыши в инструментах разработки MP и создайте новый компонент с именем «index». Инструменты разработчика сгенерируют 4 файла, и структура вашей папки должна выглядеть так:
Если вы все сделали правильно, ваша новая настраиваемая панель вкладок уже должна отображать текст по умолчанию «custom-tab-bar/index.wxml» внизу страницы.
Шаг 3. Стиль пользовательской панели вкладок
Теперь, когда наш компонент панели вкладок создан и отображается на наших страницах, давайте сделаем так, чтобы он действительно выглядел как панель вкладок. Мы собираемся использовать код из официального примера WeChat, чтобы воссоздать исходную панель вкладок.
Пока ваши инструменты разработки открыты, нажмите на эту ссылку, чтобы открыть и импортировать пример. Вы захотите скопировать код из всех файлов в папке custom-tab-bar примера в свой проект.
Обратите внимание, что в примере кода вместо компонентов представления и изображения используются обложка-представление и обложка-изображение. Это связано с тем, что некоторые собственные компоненты, такие как камера, холст или текстовое поле, будут отображаться поверх всего, кроме обложки, и вы не хотите, чтобы ваша панель вкладок исчезала под ними.
Шаг 4. Реализация логики панели вкладок
Теперь, когда у нас есть базовая структура и стиль для нашей панели вкладок, откройте файл index.js компонента и замените значения objectArray «списка» для pagePath, iconPath, selectedIconPath и текст для каждого элемента вкладки значениями, которые будет использовать ваш проект. .
Если ваш список вкладок будет динамическим, вам нужно будет использовать глобальное хранилище, чтобы убедиться, что каждый экземпляр панели вкладок обновляется правильным списком элементов панели вкладок, например, после потока аутентификации. Если вы новичок в глобальных хранилищах, я ранее писал о внедрении глобального хранилища в вашу мини-программу здесь:
Этот файл также содержит один метод, называемый switchTab, который переходит на страницу, на которую нажали, и устанавливает правильный индекс вкладки в данных компонента. Если ваш pagePath правильно настроен для каждой вкладки, вы сможете перейти на все свои вкладки.
После того, как вы нажмете на вкладку, вы заметите, что «активный» значок и текст ненадолго изменятся на правильную вкладку, но затем вернутся к первой вкладке. Это связано с тем, что наша панель вкладок теперь является компонентом, а в структуре мини-программы компоненты являются дочерними элементами страницы, на которой они находятся.
В настоящее время нет глобальных компонентов, которые могут обернуть всю мини-программу. Это означает, что на каждой из наших страниц отображается панель вкладок, мы фактически визуализируем совершенно новый компонент панели вкладок, и начальная активная вкладка нашего компонента устанавливается на первую.
Чтобы смягчить эту проблему, мы должны установить правильный индекс панели вкладок на каждой из наших страниц. Если вы посмотрите на любую из страниц в примере кода, вы увидите, что в метод жизненного цикла страницы show() добавлен код:
Этот код использует глобальную функцию мини-программы с именем this.getTabBar(), которая получает экземпляр компонента панели вкладок, прикрепленный к текущей странице, и устанавливает значение его индекса активной вкладки.
Вам нужно будет скопировать этот код на каждую из ваших страниц, убедившись, что вы установили правильный индекс вкладок в соответствии с порядком ваших вкладок. Если вы реализуете динамический список вкладок, вам придется добавить собственную логику для расчета правильного индекса вкладок для текущей страницы.
Теперь, когда вы нажимаете на каждую вкладку, страница устанавливает правильную активную вкладку. Вы успешно создали настраиваемую панель вкладок!
Ограничения
Конечно, у индивидуальной настройки есть свои недостатки. При разработке настраиваемой панели вкладок для мини-программы в продакшене я наткнулся на несколько вещей, из-за которых мне показалось, что панель вкладок была добавлена в последнюю очередь:
- Теперь вы должны компенсировать высоту панели вкладок на всех ваших вкладках (добавьте нижнее поле или отступ к стилю страницы).
- При нажатии на вкладку панель вкладок немного мерцает, поскольку цвета и пути к изображениям меняются*
- Панель вкладок повторно отображается на каждой странице, отображая пустую панель вкладок в течение определенного периода времени. Тяжелые мини-программы могут иметь пустые полосы в течение длительного времени*
- Вы должны установить активный индекс панели вкладок на каждой странице или использовать глобальное хранилище, чтобы ввести правильный индекс в каждый экземпляр панели вкладок.
- Эти проблемы более распространены на устройствах Android. Связь между слоями сервиса и представления на устройствах iOS намного быстрее.
Вот мой пример кода для этого проекта, который вы можете щелкнуть, чтобы импортировать с помощью инструментов разработчика (введите appId, если вы хотите просмотреть его на своем телефоне):
Для получения дополнительной информации, пожалуйста, посетите shanghaicoders.com
