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

Апплет WeChat

Я считаю, что у многих мелких партнеров возникнет необходимость настройки верхней панели навигации при разработке мини-программ WeChat.Недостаточно объяснить, что капсулу в правом верхнем углу мини-программы нельзя настроить.Кроме капсулы , остальные места можно настроить по собственным проектам.Решено, в разработке небольшой программы нужно настроить верх, и записывать процесс инкапсуляции этого компонента самостоятельно.

написание компонентов

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

Построение структуры компонентов

Сначала создайте структуру, как показано ниже:

Затем внесите только что созданный компонент в индекс:

Не забудьте добавить ссылочный путь в файл json, как показано на рисунке 1, и вы увидите эффект домашней страницы следующим образом:

Написание базового кода компонентов

На этом этапе нам нужно проверить в соответствии с официальными документами и знать, что если мы хотим настроить, мы должны изменить файл конфигурации по умолчанию в файле конфигурации.На самом деле мы можем установить его для определенной страницы.Возьмите индекс как Например, настройте следующий код в файле index.json: Вы можете увидеть следующие эффекты:

В это время мы можем начать писать то, что хотим.Сначала напишем простое с одной кнопкой возврата.Когда начнем писать, обнаружим большую проблему.Какая высота этого куска? Какова высота верхней строки состояния? Кажется, что я поставлен в тупик этими двумя проблемами.В это время зайдите в официальную документацию по API, и вы обнаружите, что вы можете получить высоту строки состояния в более актуальных параметрах системы, как показано на рисунке:

На самом деле, подумайте, что мы знаем только высоту строки состояния, а как насчет других высот, кроме высоты строки состояния? Еще вопрос. Из официального проектного документа апплета WeChat мы можем узнать, что высота этой части кажется такой же, как показано на рисунке:

Кажется, что этот кусок может быть таким высоким, как он есть.Ведь он может быть продлен вниз.После многих тестов (которые могут быть не точными) будут различия между Apple и Android, поэтому я сделал часть из этого( кажется, что старый мобильный телефон не поддерживает Shen Shen. инвазивный). Может быть слишком много ерунды, переходите сразу к коду

структура
<view class='topbar'>
  <view class='status' style="height:{{statusHeight}}px"></view>
  <view class='navbar' style="height:{{navHeight}}px">
    <view class='navbar_back' bindtap='backClick'>
      <image src='../images/black_back.png'></image>
    </view>
    <view class='navbar_title' style="height:{{navHeight}}px">
      <view>标题</view>
    </view>
  </view>
</view>

Основная идея здесь - использовать фиксированное позиционирование, а позже будет верстка контента сверху вниз, так что будет удобнее использовать все позиционирование.В целом есть две части, одна - статус бар, а другой заголовок и кнопка.

стиль
.topbar {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9999;
}
.status {
  width: 100%;
}
.navbar {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}

.navbar_back {
  padding: 0 32rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
}

.navbar_back image {
  width: 21rpx;
  height: 34rpx;
}

.navbar_title {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1;
}
.navbar_title view {
  width: 40%;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 38rpx;
}

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

логическая обработка
Component({
  properties: {
    /**
     * 自定义返回事件处理
     * customBackReturn="{{true}}" bind:customBackReturn="customBackReturn"
     */
    customBackReturn: {
      type: Boolean,
      value: false
    }
  },
  data: {

  },
  methods: {
    backClick() {
      if (this.data.customBackReturn) {
        this.triggerEvent("customBackReturn")
      } else {
        if (getCurrentPages().length == 1) {
          wx.switchTab({
            url: '/pages/index/index',
          })
        } else {
          wx.navigateBack({
            delta: 1
          })
        }
      }
    }
  },
  attached() {
    var self = this;
    wx.getSystemInfo({
      success(res) {
        var isIos = res.system.indexOf('iOS') > -1;
        self.setData({
          statusHeight: res.statusBarHeight,
          navHeight: isIos ? 44 : 48
        })
      }
    })
  }
})

В логике в основном есть два места: одно — оценка высоты навигации при получении системной информации, а другое — логика возврата на предыдущую страницу.По умолчанию открывается домашняя страница (обратите внимание на используемый API), если есть пользовательское событие, используйте пользовательское событие customBackReturn

Эффект

Текущий эффект почти такой же, как и раньше, без настройки, это просто обычная кнопка возврата и текст заголовка, как показано ниже:

Тогда такая простая кастомная навигационная панель ок, но если это так, то зачем мне ее настраивать?Не лучше использовать ту, что идет в комплекте с апплетом, так что надо продолжать улучшать и добавлять кнопку возврата на главную страницу.

Навигация с помощью кнопки «Назад»

В апплете, особенно на общей странице, если нет кнопки для возврата на домашнюю страницу, пользователь не знает, как вернуться на домашнюю страницу апплета, поэтому это доставляет пользователю большие неудобства, поэтому такое требование должно иметь Теперь, что, если это произойдет? На самом деле это очень просто, ведь один уже вышел, и осталось только добавить еще один.

структура
<view class='topbar'>
  <view class='status' style="height:{{statusHeight}}px"></view>
  <view class='navbar' style="height:{{navHeight}}px">
    <view class='navbar_home'>
      <image src='../images/black_back.png' bindtap='backClick'></image>
      <image src='../images/home_black.png' bindtap='homeClick'></image>
    </view>
    <!-- <view class='navbar_back' bindtap='backClick'>
      <image src='../images/black_back.png'></image>
    </view> -->
    <view class='navbar_title' style="height:{{navHeight}}px">
      <view>标题</view>
    </view>
  </view>
</view>

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

стиль
.navbar_home {
  margin-left: 32rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 33rpx;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0,0,0,0.2);
  box-sizing: border-box;
  padding: 10rpx 0;
}

.navbar_home image:first-child {
  width: 21rpx;
  height: 34rpx;
  padding: 0 32rpx;
  border-right: 1px solid rgba(255,255,255,0.2);
}

.navbar_home image:last-child {
  width: 37rpx;
  height: 35rpx;
  padding: 0 32rpx;
}

Тот же стиль только добавляет вышеперечисленные стили на основе предыдущих.

логика
 homeClick() {
      wx.switchTab({
        url: '/pages/index/index',
      })
    }

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

Эффект

Вы можете выбрать стиль в соответствии с вашим собственным проектом.

Функции этих двух частей завершены, но если мы сейчас добавим некоторый контент на домашнюю страницу, вы обнаружите следующую проблему:

Наш контент тоже ушел в топ, но если подумать, разве это не эффект выталкивания контента в топ, так что эта проблема решена, но теперь проблема в том, что если вы этого не хотите ? Если подумать, с этим должно быть легко справиться. Я могу добавить блок одинаковой высоты в этой части, не позиционируя его, поэтому я реализую его сейчас. Код выглядит следующим образом:

<view style="height:{{statusHeight+navHeight}}px" hidden='{{false}}'></view>
<view class='topbar'>
  <view class='status' style="height:{{statusHeight}}px"></view>
  <view class='navbar' style="height:{{navHeight}}px">
    <view class='navbar_home'>
      <image src='../images/black_back.png' bindtap='backClick'></image>
      <image src='../images/home_black.png' bindtap='homeClick'></image>
    </view>
    <!-- <view class='navbar_back' bindtap='backClick'>
      <image src='../images/black_back.png'></image>
    </view> -->
    <view class='navbar_title' style="height:{{navHeight}}px">
      <view>标题</view>
    </view>
  </view>
</view>

Эффект следующий:

Когда мы меняем false на true, мы можем получить эффект, что содержимое выдвигается наверх, таким образом достигаются два эффекта: поскольку мы инкапсулируем его как компонент, мы не можем просто написать это так, и нам нужно сделать некоторые инкапсуляция Затем настройте и используйте его для других страниц, поэтому его необходимо изменить.

Оберните панель навигации, чтобы сделать ее настраиваемой

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

Структурная реконструкция

Первое, что необходимо преобразовать, это структура, чтобы можно было настроить больше параметров.Структурное преобразование выглядит следующим образом:

<view style="height:{{statusHeight+navHeight}}px" hidden='{{header.hiddenBlock}}'></view>
<view class='topbar' style="background:{{header.headerbg}}">
  <view class='status' style="height:{{statusHeight}}px"></view>
  <view class='navbar' style="height:{{navHeight}}px">
    <block wx:if="{{header.slot}}">
      <slot></slot>
    </block>
    <block wx:else>
      <view class='navbar_home' wx:if="{{header.homeCapsule}}" style="background:{{header.capsulebg}};border:{{header.capsuleborder}}">
        <image src='../images/black_back.png' bindtap='backClick' style="border-right:{{header.capsulesep}}"></image>
        <image src='../images/home_black.png' bindtap='homeClick'></image>
      </view>
      <view class='navbar_back' bindtap='backClick' wx:else>
        <image src='../images/black_back.png'></image>
      </view>
      <view class='navbar_title' style="height:{{navHeight}}px">
        <view style="color:{{header.fontColor}};font-size:{{header.fontSize}}">{{header.title}}</view>
      </view>
    </block>
  </view>
</view>

Все вышеперечисленные параметры настраиваются, что значительно позволяет разработчикам настраивать различные стили.Если что-то все же не соответствует, лучше напрямую изменить приведенный выше код или инкапсулировать его самостоятельно.

логическое преобразование
Component({
  properties: {
    header: {
      type: Object,
      value: {
        homeCapsule: false,
        headerbg: "#fff",
        title: "",
        fontColor: "#000",
        fontSize: '16',
        hiddenBlock: false,
        capsulebg: 'rgba(0,0,0,0.2)',
        capsuleborder: '1px solid rgba(0, 0, 0, 0.1)',
        capsulesep: '1px solid rgba(255,255,255,0.2)',
        slot: false
      }
    },
    /**
     * 自定义返回事件处理
     * customBackReturn="{{true}}" bind:customBackReturn="customBackReturn"
     */
    customBackReturn: {
      type: Boolean,
      value: false
    }
  },
  methods: {
    backClick() {
      if (this.data.customBackReturn) {
        this.triggerEvent("customBackReturn")
      } else {
        if (getCurrentPages().length == 1) {
          wx.switchTab({
            url: '/pages/index/index',
          })
        } else {
          wx.navigateBack({
            delta: 1
          })
        }
      }
    },
    homeClick() {
      wx.switchTab({
        url: '/pages/index/index',
      })
    }
  },
  attached() {
    var self = this;
    wx.getSystemInfo({
      success(res) {
        var isIos = res.system.indexOf('iOS') > -1;
        self.setData({
          statusHeight: res.statusBarHeight,
          navHeight: isIos ? 44 : 48
        })
      }
    })
  }
})

Преобразование структуры фактически заключается в добавлении некоторых значений, которые можно передать для настройки.

На данный момент компонент в основном упакован, и следующим шагом будет его использование.

Обычный чехол с кнопкой возврата

Применение этого метода очень просто для непосредственной настройки некоторых параметров.

Сначала импортируйте компоненты следующим образом:
{
  "navigationStyle":"custom",
  "usingComponents": {
    "header":"../../components/navbar/navbar"
  }
}

Вам нужно настроить панель навигации, иначе это не будет иметь никакого эффекта. Вы можете импортировать его по своему пути. Если нужно использовать все страницы, рекомендуется настроить его непосредственно в app.json, чтобы вы не нужно настраивать каждую страницу.

Использование тегов компонентов в wxml
<header header='{{header}}'></header>
<view>内容区域哦</view>

Используйте тег заголовка на странице, которую вам нужно использовать

параметры конфигурации файла js
Page({
  data: {
    header:{
      homeCapsule: false,
      title: '标题',
      fontColor: "#000",
      fontSize: '36rpx',
      headerbg: '#f40',
      hiddenBlock: false,
      slot: false
    }
  },
  onLoad: function() {}
});

Необходимо настроить три параметра: homeCapsule, hiddenBlock и slot. Три параметра определяют, отображать ли кнопку «Домой», скрывать ли всю верхнюю часть (будет представлено позже) и настраивать ли структуру.

Эффект

Затем достигается самое основное.

Пример размещения контента в топе

Иногда нужно разместить контент сверху, так будет лучше смотреться, поэтому нужно настроить hiddenBlock, смотрим код:

<header header='{{header}}'></header>
<image src='../../images/timg.jpg' style="width:100%" mode="aspectFill"></image>
<view>内容区域哦</view>

Важно то, как настроить, следующим образом:

Page({
  data: {
    header:{
      homeCapsule: false,
      title: '',
      headerbg: 'transparent',
      hiddenBlock: true,
      slot: false
    }
  },
  onLoad: function() {}
});

Эффект следующий:

Навигация с помощью кнопки «Домой»

На странице обмена должна быть кнопка для возврата на главную страницу Как ее настроить? С этим компонентом легко настроить, конфигурация следующая:

Page({
  data: {
    header:{
      homeCapsule: true,
      title: '测试标题',
      headerbg: '#f40',
      hiddenBlock: false,
      slot: false
    }
  },
  onLoad: function() {}
});

Эффект следующий:

полностью настраиваемый

Если ни один из вышеперечисленных не может удовлетворить ваши потребности, то вы можете написать его только самостоятельно.Простой пример выглядит следующим образом:

<header header='{{header}}'>
  <view>测试的标题哦</view>
</header>
<image src='../../images/timg.jpg' style="width:100%" mode="aspectFill"></image>
<view>内容区域哦</view>

Конфигурация выглядит следующим образом:

Page({
  data: {
    header:{
      headerbg: 'transparent',
      hiddenBlock: false,
      slot: true
    }
  },
  onLoad: function() {}
});

Эффект следующий:

Конечно, здесь всего лишь простой каштан, и каждый сам должен это осознать. На этом большая часть упаковки этого компонента завершена. Спасибо вам всем!

Категории