小程序自定义单页面、全局导航栏

摘要: 小程序开发技巧。

Fundebug经授权转载,版权归原作者所有。

需求

产品说小程序返回到首页不太方便,想添加返回首页按钮,UI说导航栏能不能设置背景图片,因为那样设计挺好看的。

需求分析并制定方案

这产品和UI都提需求了,咱也不能反驳哈,所以开始调研,分析可行性方案;1、可以添加悬浮按钮。2、自定义导航栏。
添加悬浮按钮,是看起来是比较简单哈,但是感觉不太优雅,会占据页面的空间,体验也不太好。所以想了下第二种方案,自定义导航栏既可以实现产品的需求还可以满足UI的设计美感,在顶部空白处加上返回首页的按钮,这样和返回按钮还对称(最终如图所示,顶部导航栏是个背景图片,分两块组合起来)。

实现方案

一、实现的前提

1、首先查看文档,看文档里关于自定义导航栏是怎么规定的,有哪些限制;还有小程序自定义导航栏全局配置和单页面配置的微信版本和调试库的最低支持版本。

2、在app.json window 增加 navigationStyle:custom ,顶部导航栏就会消失,只保留右上角胶囊状的按钮,如何修改胶囊的颜色呢;胶囊体目前只支持黑色和白色两种颜色 在app.josn window 加上 "navigationBarTextStyle":"white/black"

3、还要考虑加返回按钮和返回首页的按钮,适配不同的机型

先说下两种配置方法:

①全局配置navigationStyle:

  • 调试基础库>=1.9.0
  • 微信客户端>=6.6.0

app.json

{
  "usingComponents": {
    "navigationBar": "/components/navigationBar/navigationBar"
  },
  "window": {
    "navigationStyle": "custom"
  }
}

②单页面配置navigationStyle

  • 调试基础库>=2.4.3
  • 微信客户端版本>=7.0.0

自定义的页面.json

{
  "window": {
    "navigationStyle": "default"
  }
}
{
  "navigationStyle": "custom",
  "usingComponents": {
    "navigationBar": "/components/navigationBar/navigationBar"
  }
}

两者的区别就是,全局配置放在app.json文件里,单页面配置放在自定义页面配置文件里。

二、实现的步骤

以下说下几个要点:

1、自定义导航栏文本,是否显示返回,是否显示返回首页,导航栏高度

2、statusBarHeight,用来获取手机状态栏的高度,这个需要在全局app.js中的onLaunch,调用wx.getSystemInfo获取,navigationBarHeight+默认的高度,这个是设定整个导航栏的高度,

3、还有注意的,在写样式距离和大小时建议都用px,因小程序右边的胶囊也是用的px,不是rpx。

4、因为自定义导航栏每个页面都要写,所以把导航栏封装了公共组件,这样只需要在每个页面引入即可。

如下是封装的导航栏组件:

wxml

<view class="navbar" style="{{'height: ' + navigationBarHeight}}">
  <view style="{{'height: ' + statusBarHeight}}"></view>
  <view class='title-container'>
    <view class='capsule' wx:if="{{ back || home }}">
      <view bindtap='back' wx:if="{{back}}">
        <image src='/images/back.png'></image>
      </view>
      <view bindtap='backHome' wx:if="{{home}}">
        <image src='/images/home.png'></image>
      </view>
    </view>
    <view class='title'>{{text}}</view>
  </view>
</view>
<view style="{{'height: ' + navigationBarHeight}};background: white;"></view>

这里有个需注意的问题,就是一般会出现自定义导航栏,下拉页面,导航栏也随着会下拉,这种问题是因为设置fixed后页面元素整体上移了navigationBarHeight,所以在此组件里设置一个空白view元素占用最上面的navigationBarHeight这块高度

wxss

.navbar {
  width: 100%;
  background-color: #1797eb;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.title-container {
  height: 40px;
  display: flex;
  align-items: center;
  position: relative;
}
.capsule {
  margin-left: 10px;
  height: 30px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid #fff;
  border-radius: 16px;
  display: flex;
  align-items: center;
}
.capsule > view {
  width: 45px;
  height: 60%;
  position: relative;
.capsule > view:nth-child(2) {
  border-left: 1px solid #fff;
}
.capsule image {
  width: 50%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.title {
  color: white;
  position: absolute;
  top: 6px;
  left: 104px;
  right: 104px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

js

const app = getApp()

Component({

  properties: {
    text: {
      type: String,
      value: 'Wechat'
    },
    back: {
      type: Boolean,
      value: false
    },
    home: {
      type: Boolean,
      value: false
    }
  },
  data: {
    statusBarHeight: app.globalData.statusBarHeight + 'px',
    navigationBarHeight: (app.globalData.statusBarHeight + 44) + 'px'
  },

  methods: {
    backHome: function () {
      let pages = getCurrentPages()
      wx.navigateBack({
        delta: pages.length
      })
    },
    back: function () {
      wx.navigateBack({
        delta: 1
      })
    }
  }
})

json

{
  "component": true,
  "usingComponents": {}
}

最终还需要考虑下版本兼容的问题,毕竟还有一些用户,微信版本并没有更新到最新版本。

首先可以在app.js里面获取下当前用户的微信版本,做下版本比较,如果小于这个版本,设置个全局变量,也可以在组件写个方法,在不同的页面打开显示不同的顶部导航栏,或者可以控制是否显示导航栏,这里就不详细说了。

亲自试了下,在低于7.0版本的微信中,如果采用单页面自定义导航栏,会出现两个导航栏,这时候通过判断版本号不要再渲染自定义的导航栏组件了,在页面的配置文件里写上title名,还有相应的背景色,这样就会显示自带的导航栏了。

总结

小程序开发是有些坑的地方,从不支持自定义导航栏,到支持全局自定义导航栏,再到现在的支持单页面配置,可以看出在慢慢完善。还有底部tabbar,可自己选择配置的太少了,虽然也支持自定义,但是发现自定义写的底部导航组件体验并不好,每次打开页面都会重新渲染底部的按钮,如果全部写成在一个页面里的tab切换,虽然按钮每次不用重新加载了,但是业务多肯定不行,写到一个单页面里东西也太多了。 希望微信能够多添加或放开一些功能,让开发者更好的服务于产品,给用户更好的体验。

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了10亿+错误事件,付费客户有阳光保险、核桃编程、荔枝FM、掌门1对1、微脉、青团社等众多品牌企业。欢迎大家免费试用

原文地址:https://www.cnblogs.com/fundebug/p/customize-wechat-miniprogram-navigation.html

时间: 2024-10-20 14:20:24

小程序自定义单页面、全局导航栏的相关文章

再谈小程序自定义底部导航

小程序自定义tabBar再探索 前言 最近有很多微信开发者朋友在QQ上加我好友,忽然意识到大家对微信自定义底部导航栏需求还是挺大的,故而再次整理下底部导航栏组件开发思路.和之前的文章还是有些区别,并且底部导航栏组件增加新的特性以及一些优化开发体验的骚操作. 技术选型 与之前不同,现在我们有两种方法实现自定义底部导航栏,因为小程序在2.5.0开始支持自定义底部导航栏了戳此处看文档,所以我们现在的可选方案为: 通过HideTabBar接口hack底部导航栏 通过小程序支持配置实现底部导航栏 下面根据

微信小程序自定义导航栏(wx_custom_navigation_bar) 自定义返回键、首页键,动态设置标题,响应式组件

微信小程序自定义导航栏 navigation bar 返回键 首页 github: https://github.com/chen-yt/wx_custom_navigation_bar https://github.com/Superman2113/wx_custom_navigation_bar 代码 navbar组件 navbar.wxml <view class="navbar" style="{{'height: ' + navigationBarHeight

微信小程序-自定义底部导航

代码地址如下:http://www.demodashi.com/demo/14258.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1.基本需求. 实现用户自定义底部导航 2.案例目录结构 二.程序实现具体步骤 1.自定义nav.wxml代码 <template name="nav"> <view class=&quo

小程序项目别的页面初始化拿到的值为两种状态(已解决)

小程序项目别的页面初始化拿到的值为两种状态,其他页面拿不到app.js全局globalData下全局的cookie app.js文件 onLaunch: function () { console.log('app-onLaunch') this.getUserInfo(); }, onShow:function(){ console.log('app-onShow') }, // 获取用户信息,登录 getUserInfo: function (callBack) { let that = t

值得记录的(五)- 微信小程序自定义 tabbar

一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tabbar的情况下自制 tabbar 的方法.并说说这几种方法各自的特色. 类 navigator 跳转方式 类 navigator 跳转方式是我自己起的名称,因为它的实现思路就是这个样子的.期初参考 微信小程序自定义tabBar组件开发 这篇博文的思路.进行了这种方式的尝试,并为后续提供了解决思路.在

小程序“自定义关键词”功能的常见问答

我们知道小程序可以通过线下扫码.公众号.好友分享.长按小程序码.搜索小程序名称来找到,现在又多了一个新方式——小程序后台新增自定义关键词功能:已发布小程序的开发者,可提交最多10个与小程序业务相关的关键词,帮助你的小程序更好地被发现. (登陆小程序后台——点击左侧“推广”添加关键词) 自定义关键词搜索策略将于6月9日生效.届时,用户可以通过搜索关键词,找到相关的小程序.小程序的关键词每个月可以修改三次. 开发者还可在后台看到关键词推广效果. 我们希望通过“自定义关键词”功能,帮助用户在微信内更便

navigate 如何突破小程序的五层页面限制?

微信小程序中的页面导航 API 有三个,两个跳转新页面的 API 分别为 wx.navigateTo 和 wx.redirectTo,还有一个 API ,名为 wx.navigateBack,它用于返回页面.wx.navigateBack 在小程序的初始版本中只能回到上一个页面,在最新版本(0.10.102800)的更新中给 navigateBack 添加了一个参数 delta,用于决定需要返回几层页面.navigator 组件的默认跳转方式与 wx.navigateTo 相同,而如果添加 re

微信小程序自定义弹窗wcPop插件|仿微信弹窗样式

微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的是自定义组件化开发,就是把弹出框封装成一个组件,然后多处调用. 解决了小程序开发自定义弹窗出现后,遮罩层下的页面仍可以滚动的方法: 给遮罩层的最外层view中加入catchtouchmove="preventTouchMove" 即可解决该遮罩层点透问题. 根据需要还可以自定义多个按钮及事

微信小程序把玩(三)tabBar底部导航

原文:微信小程序把玩(三)tabBar底部导航 tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项 主要属性: 对于tabBar整体属性设置: 对于tabBar中每个Item属性设置: 下面是官网一张图对tabBar描述: app.json的配置相对就简单了: