Пользовательская панель навигации апплета WeChat

Апплет WeChat

задний план

При работе над апплетом такси Kuaigou мы столкнулись со следующими проблемами в отношении панели навигации по умолчанию:

  1. В мобильных телефонах Android и IOS заголовки страниц отображаются несогласованно, а заголовки Android отображаются не по центру.
  2. Заголовок страницы поддерживает управление стилем только на уровне обычного текста и не может создавать более богатые эффекты заголовка.
  3. События в левом верхнем углу нельзя отслеживать и настраивать
  4. Навигация по маршруту одиночная, и она может вернуться только на предыдущую страницу, а возврат страницы глубокого уровня недостаточно дружелюбен

Мы хотим: согласованность заголовков и персонализированное отображение на каждой странице модели, управление событиями кликов в верхнем левом углу и возврат одним нажатием на страницы глубокого уровня.

выполнить

шаг 1 Настроить

Первый шаг — получить контроль над панелью навигации.

Апплет поддерживает пользовательскую панель навигации, просто нужноapp.jsonфайл,windowконфигурация элемента

"navigationStyle": "custom"

Таким образом, WeChat освобождает панель навигации от контроля и сохраняет только капсулу в правом верхнем углу.

Страница начнется сверхняя часть окнаЗапустите рендеринг, как показано на рисунке

custom样式

Далее нам нужно реализовать компонент панели навигации и поместить его в положение исходной панели навигации по умолчанию на странице, а содержимое полностью настроить разработчиком.

функциональная точка шага 2

Второй шаг — разобраться с функциональными точками панели навигации.

  • Высота панели навигации (динамическая адаптация для каждой модели)
  • Настройка содержимого панели навигации
    • Названия всех моделей отображаются по центру (реализовано собственной раскладкой)
    • 首页В верхнем левом углу панели навигации отображается персональный центр, в среднем заголовке используется персонализированный значок.
    • 嵌套页面верхний левый дисплей返回上一页 + 回到首页кнопка
    • 非常规首页верхний левый дисплей回到首页кнопка

Высота панели навигации состоит из двух частей: панели инструментов и строки заголовка.Высота панели инструментов обычно составляет 20 пикселей, а высоту строки заголовка необходимо рассчитать.

Чтобы настроить содержимое панели навигации, необходимо определить характер текущей страницы и отобразить различный контент в зависимости от разных страниц.Вы можете определить характер текущей страницы, получив стек маршрутизации текущей страницы.

导航栏组件功能拆分

step3 Базовая структура компонента панели навигации

Текущая базовая структура мини-программы такси Куайгоу

// navBar.wxml
<cover-view class='place-holder'></cover-view>
<cover-view class='nav-bar'>
    <cover-view class='tool-bar' style='height: 20px'></cover-view>
    <cover-view class='title-bar'>
        <cover-view class='left-cell'>
            // scene0 常规首页   个人中心按钮
            // scene1 非常规首页 回首页按钮
            // scene2 嵌套页     返回上一页按钮 + 回首页按钮
        </cover-view>
        <cover-view class='center-cell'>
            // scene0 常规首页  个性化title
            // scene1 其他页    正常title
        </cover-view>
        <cover-view class='right-cell'>
            // 占位用的
        </cover-view>
    </cover-view>
</cover-view>

Tips:

  • В компоненте есть дополнительный блок-заполнитель, потому что на некоторых страницах есть требования, такие как прокручиваемые списки.Чтобы панель навигации всегда находилась в верхней части области просмотра, вам нужно использовать позиционирование.После позиционирования она отделяется от документа В начале Блок-заполнитель необходим, чтобы гарантировать, что последующее содержимое страницы не будет заблокировано панелью навигации.
  • использоватьcover-viewРасположение связано с тем, что в бизнесе Куайгоу есть сходство.mapСобственный компонент , используяviewриск быть заблокированным

шаг 4 расчет высоты

нужно рассчитатьtitle-barвысота

По умолчанию панель навигации на нижней панели вкладок и без регистра,wx.getSystemInfoSyncПолучите информацию о мобильном телефоне, вы можете увидеть две части информации:

  • screenHeightвысота экрана, в пикселях
  • windowHeightДоступная высота окна, в пикселях

В этом случае разница между ними — это высота панели навигации по умолчанию, но после установки"navigationStyle": "custom"После этого значения обоих одинаковы, поэтому нам нужно использовать эмпирическое значение статистики для высоты панели навигации.

По статистике получаются следующие результаты:

{
    'iPhone': 64,
    'iPhoneX': 88,
    'Android': 68,
    'samsung': 72
}

Высота панели инструментов может быть отрегулирована в соответствии сwx.getSystemInfoSyncв возвращаемом значенииstatusBarHeightПолучать.

На этом этапе мы получаем соответствующее значение высоты панели навигации.

// 导航栏总高度 & 占位块高度
placeHoder = totalBar = {
    'iPhone': 64,
    'iPhoneX': 88,
    'Android': 68,
    'samsung': 72
}
// 时间、信号等工具栏的高度
toolBar = systermInfo.statusBarHeight
// 页面title栏的高度
titleBar = totalBar - toolBar

шаг 5 Настройка контента

Функции жизненного цикла в компонентахattached, мы можем получить текущий стек маршрутизации страницы

let pages = getCurrentPages()
let current_page = pages[pages.length - 1].route 
const NORMAL_ENTRY = '常规的入口页路径'

// scene 0 常规入口页  个性化title、个人中心
pages.length === 1 && current_page === NORMAL_ENTRY
// scene 1 非常规入口页 回首页
pages.length === 1 && current_page !== NORMAL_ENTRY
// scene 2 嵌套页面  返回 + 回首页
pages.length > 1

Отображение разного контента в зависимости от разных условий

окончательный эффект

сцена 0 Общая Главная

image

сцена 1 нетрадиционная домашняя страница

image

сцена 2 вложенные страницы

image

В настоящее время 99 % моделей в производственной среде могут работать безукоризненно.

напиши в конце

  • Настраиваемая панель навигации действует глобально. После настройки каждую собственную страницу апплета необходимо импортировать.
  • В настоящее время версия микроканала 7+ поддерживает настраиваемую панель навигации для конкретной страницы, которую можно настроить в соответствии с индивидуальными потребностями.
  • Пользовательская панель навигации не работает на веб-страницах
  • Я попытался сделать панель навигации плагином, но столкнулся с проблемой, что стек маршрутизации страниц не мог быть получен в компоненте плагина, поэтому это было неудачно.
Категории