Пользовательские компоненты апплета WeChat реализуют tabBar, navBar

Апплет WeChat

Давно не писал, руки немного сыроваты, извините.

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

Есть две причины для выбора здесь:

  • narBar WeChat изначально не поддерживает настройку значка возврата, а заголовок отображается слева на Android и по центру на iOS.
  • Нижняя панель tabBar не поддерживает нажатие для перехода на страницу, а макет значка не поддерживает высоту, превышающую высоту tabBar.

Следующие две картинки — результат простой реализации.

image.png

Анализ реализации Адрес источника

image.png

Анализ реализации

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

Пользовательские компоненты программы WeChat Mini

Официальный адрес документаDevelopers.WeChat.QQ.com/mini программа…

Пользовательские компоненты объясняются в документации

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

Создание пользовательских компонентов

Прямое создание компонентов уже поддерживается в последних инструментах разработки.componentsкаталог, а затем создайте компонент для каталога, например, здесь создаетсяtabbarкаталог, затем щелкните правой кнопкой мыши каталог и выберите新建Component, вы можете ввести имя компонента, например, здесь вводtabbar.

image.png

Шаблоны и стили компонентов

официальная документацияDevelopers.WeChat.QQ.com/mini программа…

Как и страницы, пользовательские компоненты имеют свои собственныеwxmlшаблоны иwxssстиль

В шаблоне компонента вы можете указать<slot>Узел, который используется для переноса дочерних узлов, предоставляемых при ссылке на компонент. это<slot>Узлы эквивалентны заполнителям компонентов.

image.png

По умолчаниюwxmlподдерживает только один<solt>Узел, можно настроить для поддержки нескольких<solt>узел:

image.png

После того, как макет написан, вы начинаете задавать стиль, доступ к которому можно получить на странице черезwxssопределить или установить компонентclassимя перед вызовом компонентаwxssОпределить стиль в стиле.

image.png
image.png

компонентwxssПо умолчанию не поддерживаетсяapp.wxssстиле, но может быть установлено столько, сколько<slot>То же, настроить:

image.png

привязка данных шаблона

Вызывая конструктор компонента, вы можете указать свойства, данные, методы и т. д. компонента.Developers.WeChat.QQ.com/mini программа…

Component({
  // 详细使用看文档
  behaviors: [],

  properties: {
    myProperty: { // 属性名
      type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '', // 属性初始值（可选），如果未指定则会根据类型选择一个
      observer(newVal, oldVal, changedPath) {
        // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'
        // 通常 newVal 就是新设置的数据， oldVal 是旧数据
      }
    },
    myProperty2: String // 简化的定义方式
  },
  data: {}, // 私有数据，可用于模板渲染

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached() { },
    moved() { },
    detached() { },
  },

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached() { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready() { },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show() { },
    hide() { },
    resize() { },
  },

  methods: {
    onMyButtonTap() {
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
      })
    },
    // 内部方法建议以下划线开头
    _myPrivateMethod() {
      // 这里将 data.A[0].B 设为 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange(newVal, oldVal) {

    }
  }

})

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

Связь между компонентами

в состоянии пройтиtriggerEventИли получить компонент напрямуюthis.selectComponentПримеры вызова методов и свойств.

  • triggerEvent
  • Родительский компонент также может получить экземпляр объекта дочернего компонента с помощью метода this.selectComponent, так что вы можете напрямую обращаться к любым данным и методам компонента.

image.png
image.png

Начните работу с компонентами

на страницеjsonПуть компонента конфигурации в файле, как показано ниже:

{
  "usingComponents": {
    "navbar": "/components/navbar/index",
    "tabbar": "/components/tabbar/tabbar"
  }
}

на страницеwxmlДобавьте в макет следующим образом:

// 引入组件
<navbar navbar-data='{{nvabarData}}'></navbar>
// 内容
<view class="home-page">
  <view style='margin-top: {{height}}px;margin-bottom:10px;'></view>
</view>
// 引入组件
<tabbar tabbar="{{tabbar}}"></tabbar>

Анализ пользовательского компонента tabBar

См. оригинальный авторский анализ в верхней части статьи. Вот некоторые ямы.

  • Хотя компонентjsбыл установлен в файлеtabbarНо когдаapp.jsonеще нужно настроитьtabbar, подробную настройку можно найти вверху статьиgithubСвязь.

  • на страницеonloadнужно установить заново

wx.hideTabBar({
    })

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

  • Обратите внимание на проблему пути, новая версия средств разработкиcomponentsфайл должен быть вminiprogramвниз, иpagesкак одноуровневый, иначе могут возникнуть ошибки в пути к импортируемому компоненту.

Анализ пользовательского компонента navBar

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

Здесь через значение сцены апплета и с помощью глобальной переменнойshareчтобы определить, исходит ли он со страницы обмена. существуетapp.jsОбработано в:

// 判断是否由分享进入小程序
    if (options.scene == 1007 || options.scene == 1008) {
      this.globalData.share = true
    } else {
      this.globalData.share = false
    };

Чтобы соответствовать высоте верха, вwxmlМакет также динамически устанавливаетmargin-topВысота, которая получается путем получения высоты строки состояния системы.

 getSystemInfo: function () {
    let t = this;
    wx.getSystemInfo({
      success: function (res) {
        // 获取高度
        t.globalData.height = res.statusBarHeight;
      }
    });
  },

потом на страницеdataУстановите высоту данных компонента и строки состояния в:

data: {
    // 组件所需的参数
    nvabarData: {
      showCapsule: 0, //是否显示左上角图标   1表示显示    0表示不显示
      title: '让故事发生', //导航栏 中间的标题
    },
    // 此页面 页面内容距最顶部的距离
    height: app.globalData.height * 2 + 20,
    // tabbar
    tabbar: {},
  },

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

      <view bindtap='_navback' wx:if='{{!share}}'>
        <image src='/images/back.png' mode='aspectFill' class='back-pre'></image>
      </view>
// 这里把 share 取反去掉
      <view class='navbar-v-line' wx:if='{{share}}'></view>
// 这里把  share 取反去掉
      <view bindtap='_backhome'  wx:if='{{share}}'>
        <image src='/images/icon/icon_home.png' mode='aspectFill' class='back-home'></image>
      </view>

Эта статья закончена~, если она вам понравилась, пожалуйста, поставьте лайк.

Категории