Кнопка «Возврат» программы WeChat Mini Capsule | Детали пользовательской панели навигации домашней страницы

Апплет WeChat
Кнопка «Возврат» программы WeChat Mini Capsule | Детали пользовательской панели навигации домашней страницы
Я впервые изучаю апплет, надеюсь, вы вовремя укажете на какие-либо проблемы, спасибо

Код товара: https: //github.com/shay0921/header-navbar.git

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

Когда вы переходите с другой страницы на страницу продукта, появляется кнопка «Назад» и «Домой»;

При входе со страницы обмена на страницу продукта, поскольку есть только один стек страниц, есть только кнопка «Домой»;

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

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

вся идея

при использованииnavigationStyle:customПосле того, как до верхней строки заголовка будет удалена, кнопка Capsules справа будет исправлена ​​в правом верхнем углу. Затем добавьте текущую страницу 3 представления (строка состояния, строка заголовка, основное содержимое), вы можете увидеть макет из трех, я пишу непосредственно к высоте смерти: строка состояния 20px, строка 44px. Это ключевые определения из панели навигации, вам нужно рассчитать высоту этих двух, а также возврат | домашняя кнопка капсулы. Библиотеки фундамента 2.1.0 могут быть использованыwx.getMenuButtonBoundingClientRect()получитьИнформация о расположении правой кнопки капсулы, и с помощью этой информации мы можем относительно вычислить положение кнопки капсулы, которую мы хотим добавить слева. пройти черезstatusBarHeight в wx.getSystemInfoSync() находит высоту строки состояния.

Структура каталогов

├── components                  组件
│  ├── headerNavbar             顶部自定义导航栏
│  │  └── headerNavbar.js
│  │  └── headerNavbar.json
│  │  └── headerNavbar.wxml
│  │  └── headerNavbar.wxss
├── pages                       页面
│  ├── index                    首页
│  │  └── index.js
│  │  └── index.json
│  │  └── index.wxml
│  │  └── index.wxss
│  ├── navigationStyle          引入自定义导航栏的页面(单独配置了navigationStyle)
│  │  └── navigationStyle.js
│  │  └── navigationStyle.json
│  │  └── navigationStyle.wxml
│  │  └── navigationStyle.wxss
│  │  └── testPage.js           路由测试页面(后面用来测试跳转显示不同胶囊按钮)
│  │  └── testPage.json
│  │  └── testPage.wxml
│  │  └── testPage.wxss

глобальная переменная

app.js

В app.js сначала получите информацию о высоте строки состояния и положении правой капсулы.

App({
    onLaunch: function (options) {
      // 这里省略掉了登录和获取用户信息等函数
      // 因为我在别的页面也需要使用此信息，所以没有单独获得 statusBarHeight
      wx.getSystemInfo({ // 获取设备信息
        success: (res) => {
          this.globalData.systeminfo = res
        },
      })
      // 获得胶囊按钮位置信息
      this.globalData.headerBtnPosi = wx.getMenuButtonBoundingClientRect()
    },
    globalData: {
        systeminfo: {}, // 系统信息
        headerBtnPosi: {} // 胶囊按钮位置信息
    }
})

Здесь следует отметить, что wx.getMenuButtonBoundingClientRect() не имеет функции обратного вызова успеха, такой как wx.getSystmInfo, а объект, подобныйwx.getMenuButtonBoundingClientRect().heightиспользовать.

код компонента

headerNavbar.wxml

<!-- 自定义导航栏 -->
<view class='navbar-wrap' 
  style='height:{{navbarHeight}}px;padding-top:{{statusBarHeight}}px;'>  
  <view class="navbar-text"
    style='line-height:{{navbarBtn.height + navbarBtn.top}}px;'>
    {{navbarData.title ? navbarData.title : "默认标题"}}{{navbarHeight}}
  </view>
  <view class="navbar-icon"
    wx:if='{{navbarData.showCapsule ? navbarData.showCapsule : true}}'
    style="top:{{navbarBtn.top + statusBarHeight}}px;left:{{navbarBtn.right}}px;height:{{navbarBtn.height}}px;"> 
      <image wx:if='{{haveBack}}' bindtap="_goBack" class="floatL" src="/img/navbar_back_white.png"></image>      
      <view wx:if='{{haveBack}}' class="floatL"></view>
      <image bindtap="_goHome" src="/img/navbar_home_white.png"></image>
  </view>
</view>
<!-- 手写loading -->
<view class="navbar-loading" style='height:{{navbarHeight}}px;line-height:{{navbarHeight}}px;'>
  <text>...</text>
</view>

Чтобы адаптироваться к различным экранам мобильных телефонов,И высота, и положение кнопки капсулы должны быть назначены в html, далее будет подробно объяснено, как рассчитывается высота. В пользовательской панели навигации компонент разделен на две части,Одна из них — это панель навигации вверху, а другая загружается, написанная мной.

Поскольку настраиваемая панель навигации закреплена вверху,Чтобы основной контент ниже не был заблокирован, нам нужно добавить высоту, равную панели навигации, между панелью навигации и основным контентом., класс называется box first. Это гарантирует, что панель навигации не блокирует основной контент. Но будет другая проблема, если эта страница поддерживает обновление по запросу,Тогда панель навигации заблокирует родной стиль загрузки апплета, и перед основным содержимым появится пустое поле.Хотя это не повлияет на использование, но будет очень странно для пользователя.Необъяснимым образом появится лишняя штука.коробка только в загрузке.поднимусь после окончания. Итак, здесь вам нужно написать анимацию загрузки самостоятельно и разместить ее внизу компонента на той же высоте, что и панель навигации.

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

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

headerNavbar.js

Высота строки состояния = app.globalData.systeminfo.statusBarHeight

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

/*** iphone6 的胶囊位置信息
* wx.getMenuButtonBoundingClientRect() 坐标信息以屏幕左上角为原点
* 胶囊宽度： 87
* 胶囊高度： 32
* 胶囊左边界坐标： 278
* 胶囊上边界坐标： 26
* 胶囊右边界坐标： 365
* 胶囊下边界坐标： 58
* 状态栏高度：20*/

Margin = Координаты тока на капсулы пограничных капсул - высота строки состояния
Правое поле капсулы = ширина экрана - координаты правой границы капсулы
Нижнее поле капсулы = координата нижней границы капсулы - высота капсулы - высота строки состояния
Высота панели навигации = координата нижней границы капсулы + текущая нижняя граница капсулы

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

const app = getApp();
Component({
  properties: {
    navbarData: { // 由父页面传递的数据
      type: Object,
      value: {},
      observer: function (newVal, oldVal) { }
    }
  },
  data: {
    haveBack: true, // 是否有返回按钮，true 有 false 没有 若从分享页进入则为 false
    statusBarHeight: 0, // 状态栏高度
    navbarHeight: 0, // 顶部导航栏高度
    navbarBtn: { // 胶囊位置信息
      height: 0,
      width: 0,
      top: 0,
      bottom: 0,
      right: 0
    }
  },
  // 微信7.0.0支持wx.getMenuButtonBoundingClientRect()获得胶囊按钮高度
  attached: function () {
    let statusBarHeight = app.globalData.systeminfo.statusBarHeight // 状态栏高度
    let headerPosi = app.globalData.headerBtnPosi // 胶囊位置信息
    /**
     * wx.getMenuButtonBoundingClientRect() 坐标信息以屏幕左上角为原点
     * 菜单按键宽度： 87
     * 菜单按键高度： 32
     * 菜单按键左边界坐标： 278
     * 菜单按键上边界坐标： 26
     * 菜单按键右边界坐标： 365
     * 菜单按键下边界坐标： 58
     */
    let btnPosi = { // 胶囊实际位置，坐标信息不是左上角原点
      height: headerPosi.height,
      width: headerPosi.width,
      // 胶囊top - 状态栏高度
      top: headerPosi.top - statusBarHeight,
      // 胶囊bottom - 胶囊height - 状态栏height （现胶囊bottom 为距离导航栏底部的长度）
      bottom: headerPosi.bottom - headerPosi.height - statusBarHeight,
      // 屏幕宽度 - 胶囊right
      right: app.globalData.systeminfo.screenWidth - headerPosi.right
    }
    let haveBack;
    if (getCurrentPages().length === 1) { // 当只有一个页面时
      haveBack = false;
    } else {
      haveBack = true;
    }
    this.setData({
      haveBack: haveBack, // 获取是否是通过分享进入的小程序
      statusBarHeight: statusBarHeight,
      navbarHeight: headerPosi.bottom + btnPosi.bottom, // 原胶囊bottom + 现胶囊bottom
      navbarBtn: btnPosi
    })
  },
  methods: {
    _goBack: function () {
      wx.navigateBack({
        delta: 1
      });
    },
    _goHome: function () {
      wx.switchTab({
        url: '/pages/index/index',
      });
    }
  }
})

Используйте getCurrentPages(), чтобы определить, введена ли текущая страница со страницы обмена,Потому что если в стеке страниц должна быть только одна часть данных из общей страницы, длина стека страниц будет увеличиваться при переходе на другие страницы., кнопки «Назад» и «Домой» будут отображаться на других страницах.

Примечание: WeChat 7.0.0 поддерживает wx.getMenuButtonBoundingClientRect(). Если вы хотите быть совместимым с более низкими версиями WeChat, вы можете только до смерти прописать высоту панели навигации. Высота, рассчитанная некоторыми боссами:

'iPhone': 64,
'iPhone X': 88,
'android': 68

Проверить:

https://developers.weixin.qq.com/community/develop/doc/0006c012dc8028f04b070dd0551004

если вы используетеwx.getMenuButtonBoundingClientRect() получает информацию с десятичными знаками,Следующим образом

{height: 24, width: 65.25, top: -0.5, bottom: -0.5, right: 101.25}

Затем вы, возможно, увеличили масштаб изображения в инструменте разработки, и нормально восстановить его до 100%.

headerNavbar.wxss

.navbar-wrap {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 9999999;
	background-color: #3281FF;
	box-sizing: border-box;
}

.navbar-text {
	text-align: center;
	font-size: 36rpx;
	color: #fff;
	font-weight: 600;
}

.navbar-icon {
	position: fixed;
	display: flex;
	border-radius: 64rpx;
	border: 0.5px solid rgba(255,255,255, 0.3);
	box-sizing: border-box;
}

.navbar-icon image {
	height: 20px;
	width: 20px;
	padding: 5px 10px 10px;
	display: inline-block;
	overflow: hidden;
}

.navbar-icon view {
	height: 18px;
	border-left: 0.5px solid rgba(255,255,255, 0.3);
	margin-top: 6px;
}

.navbar-loading {
	background: #fff;
	text-align: center;
}

Код страницы ссылочного компонента

navigationStyle.json

{
    "navigationStyle": "custom", 
    "enablePullDownRefresh": true, 
    "backgroundTextStyle": "light", 
    "usingComponents": {
        "headerNavbar": "/components/headerNavbar/headerNavbar"
    }
}

Сначала добавьте navigationStyle:custom на страницу json, которая должна использовать пользовательскую панель навигации.

включитьPullDownRefresh: true, чтобы включить обновление по запросу

backgroundTextStyle: свет, чтобы изменить стиль загрузки на белый, чтобы не отображались три точки загрузки

navigationStyle.wxml

<headernavbar navbar-data="{{nvabarData}}"></headernavbar> 
<view class="home-page"> 
   <text>
    上面是自定义导航栏↑↑↑
   </text> 
   <text>
    下面是主体内容↓↓↓
   </text> 
   <navigator url="./testPage">
    跳转到测试页
   </navigator> 
</view>

navigationStyle.js

Page({
    data: {
        // 组件所需的参数
        nvabarData: {
            showCapsule: 1,
            // 是否显示左上角胶囊按钮 1 显示 0 不显示
            title: '组件列表' // 导航栏 中间的标题
        }
    },

    onPullDownRefresh() {
        setTimeout(() = >{
            wx.stopPullDownRefresh(); // 停止下拉
        },
        2000);
    },

})

Примечание. Хотя в инструменте разработки апплета это кажется правильным, высота полученной панели навигации также составляет 64 пикселя, но после тестирования на реальной машине все еще есть отклонение, и высота составляет 60 пикселей на iphone 8 plus.

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

Код проекта: https://github.com/Shay0921/header-navbar.git

Категории