微信小程序自定义导航栏(模板化)

心已赠人 2023-06-13 06:05 35阅读 0赞

前段时间写过一篇关于微信小程序自定义导航栏的自定义组件，但是对于分享页有一定的bug  
这次用模板化又搞了一遍 优化了下Android与IOS 显示更接近微信原生的导航栏，以及修复分享页面不显示返回首页按钮  
如果大家不习惯模板化的话可以 针对自己的需求拿以前封装的组件化做一些修改  
[微信小程序自定义导航栏(组件化)][Link 1]

CustomNavBar.wxml

<template name="CustomNavBar">
    	<block wx:if="{ { showNavBar }}">
    
    		
    		<block wx:if="{ { needFixed }}">
    			<view style="position: relative; width: 100%; height: { { navHeight }}px;"></view>
    		</block>
    
    		<view class="custom-navbar-con relative { { iOS ? ' ios ' : ' android ' }}" style="height: { { navHeight }}px; { { needFixed ? 'position: fixed; top: 0;' : '' }}">
    			<view class="custom-navbar-statusbar-con relative" style="height: { { statusBarHeight }}px;"></view>
    			<view class="custom-navbar-content relative" style="height: { { navHeight - statusBarHeight }}px;">
    
    				
    				<block wx:if="{ { navTitle && navTitle.length > 0 }}">
    					<view class="custom-navbar-title ios">{
       { navTitle }}</view>
    				</block>
    
    				<block wx:if="{ { showLeftMenu }}">
    					<view class="custom-navbar-left-menu-con clearfix" style="top: { { navRightMenuRect.top - statusBarHeight - 1 }}px; left: { { winWidth - navRightMenuRect.right }}px; height: { { navRightMenuRect.height + 2 }}px;">
    						<block wx:if="{ { showBackBtn }}">
    							<view class="custom-navbar-icon-btn pull-left back" style="height: { { navRightMenuRect.height }}px" bindtap="customNavBarBack">
    								<image class="icon" src="../../image/icon-nav-back.png" mode="aspectFit" style="width: { { navRightMenuRect.height }}px;" />
    								<text class="text"></text>
    							</view>
    						</block>
    
    						<block wx:if="{ { showHomeBtn }}">
    							<view class="custom-navbar-icon-btn pull-left home" style="height: { { navRightMenuRect.height }}px" bindtap="customNavBarBackToHome">
    								<image class="icon" src="../../image/icon-nav-home.png" mode="aspectFit" style="width: { { navRightMenuRect.height }}px;" />
    								<text class="text"></text>
    							</view>
    						</block>
    
    						
    						<block wx:if="{ { navTitle && navTitle.length > 0 }}">
    							<view class="custom-navbar-title android pull-left" style="line-height: { { navRightMenuRect.height - 2 }}px;">{
       { navTitle }}</view>
    						</block>
    					</view>
    				</block>
    			</view>
    		</view>
    	</block>
    </template>

CustomNavBar.wxss

.custom-navbar-con {  position: relative; width: 100%; background-color: white; z-index: 9999; }
    .custom-navbar-con .custom-navbar-statusbar-con {  width: 100%; }
    .custom-navbar-con .custom-navbar-content {  width: 100%; }
    .custom-navbar-con .custom-navbar-left-menu-con {  position: absolute; }
    .custom-navbar-con .custom-navbar-left-menu-con .custom-navbar-icon-btn {  height: 100%; border-radius: 200px; border: 1px solid rgba(220, 220, 220, 0.6); }
    .custom-navbar-con .custom-navbar-left-menu-con .custom-navbar-icon-btn .icon {  height: 90%; margin-top: 2.5%; }
    .custom-navbar-con .custom-navbar-left-menu-con .custom-navbar-icon-btn .text {  font-size: 27rpx; }
    .custom-navbar-con .custom-navbar-left-menu-con .custom-navbar-icon-btn.back {  border: none; }
    .custom-navbar-con .custom-navbar-left-menu-con .custom-navbar-icon-btn.back~.custom-navbar-icon-btn.home {  margin-left: 10rpx; }
    .custom-navbar-con .custom-navbar-left-menu-con .custom-navbar-icon-btn.switch-shop {  padding-left: 5px; padding-right: 25rpx; }
    
    
    .custom-navbar-con.ios .custom-navbar-title.android {  display: none; }
    .custom-navbar-con.android .custom-navbar-title.ios {  display: none; }
    .custom-navbar-con .custom-navbar-title.ios {  font-weight: bold; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
    .custom-navbar-con .custom-navbar-title.android {  padding-left: 30rpx; }``` CustomNavBar.js ```javascript module.exports = function(PageInstance) { 
    	let App = getApp() let _tplData = { 
    		_CustomNavBar_: { 
    			navRightMenuRect: App.NavRightMenuRect,
    			navRightMenuCenterY: App.NavRightMenuCenterY,
    			statusBarHeight: App.StatusBarHeight,
    			winWidth: App.WinWidth,
    			winHeight: App.WinHeight,
    			iOS: App.iOS,
    
    			navTitle: '', // 当前只合适短标题，如需长标题，建议隐藏自定义导航栏，自定义展示
    			navHeight: App.CustomNavHeight,
    
    			needFixed: false,
    
    			showNavBar: !App.NavRightMenuRect ? false : true,
    			showLeftMenu: true,
    			showBackBtn: true,
    			showHomeBtn: false
    		}
    	}
    
    	let _tplMethods = { 
    		customNavBarBack() { 
    			wx.navigateBack()
    		}, customNavBarBackToHome() { 
    			let url = '/pages/index/index' wx.reLaunch({ 
    				url: url
    			})
    		}
    	}
    	let isIndexPage = !!(PageInstance.route == 'pages/index/index') let pages = getCurrentPages() if (pages.length == 1) { 
    		_tplData._CustomNavBar_.showBackBtn = false
    		_tplData._CustomNavBar_.showHomeBtn = !isIndexPage
    	}
    
    	// 每个页面 可单独配置自定义导航栏 if (PageInstance.data.CustomNavBarConfig) { 
    		Object.assign(_tplData._CustomNavBar_, PageInstance.data.CustomNavBarConfig)
    	}
    
    	// !!!! 最后执行 // 当无法获取到右上角按钮胶囊的布局位置时，强制设置自定义导航栏为隐藏状态 if (!App.NavRightMenuRect) { 
    		_tplData._CustomNavBar_.showNavBar = false
    	}
    
    	Object.assign(PageInstance, _tplMethods)
    	PageInstance.setData(_tplData)
    	return this
    }

app.js的配置

// 自定义导航栏
    import CustomNavBar from './template/CustomNavBar/CustomNavBar';
    
     App({ 
     	//自定义 模板式 组件
    	CustomNavBar,
     
     	// 系统信息
        WinWidth: 0,
        WinHeight: 0,
        StatusBarHeight: 0,
        PixelRatio: 1,
        SystemFullName: '',
        SystemVersion: '',
        SystemSDKVersion: '',
    
        //自定义导航栏相关
        NavRightMenuRect: null,
        NavRightMenuCenterY: 0,
        CustomNavHeight: 0,
        
    	onLaunch: function (options) { 
    		let self = this
    		let systemInfo = wx.getSystemInfoSync()
    		self.iOS = systemInfo.platform === 'ios'
    		self.isDebug = systemInfo.platform === 'devtools'
    		if (self.isDebug) { 
    			// 单纯为了在开发工具下调试 自定义导航栏
    			// 开发工具下不存在App版本号的区分
    			systemInfo.version = '7.0.0'
    		}
    		self.WinWidth = systemInfo.windowWidth
    		self.WinHeight = systemInfo.windowHeight
    		self.StatusBarHeight = systemInfo.statusBarHeight
    		// 部分小程序库版本没有返回状态栏高度
    		if (!self.StatusBarHeight) { 
    			self.StatusBarHeight = 20
    		}
    		self.PixelRatio = Math.max(systemInfo.pixelRatio, 2)
    		self.SystemFullName = systemInfo.system
    		self.SystemVersion = systemInfo.version
    		self.SystemSDKVersion = systemInfo.SDKVersion
    
    		// app.json全局配置的自定义导航栏的话，客户端需求版本为6.6.0
    		// 每个页面 单独配置的自定义导航栏的话，客户端需求版本为7.0.0
    		// wx.getMenuButtonBoundingClientRect方法，要求基础库版本为2.1.0
    		if (self.compareVersion(self.SystemVersion, '6.6.0') >= 0) { 
    			// 官方的6.6.0版本以上客户端，最低基础库版本为1.9.4
    			// 6.6.0以上且[1.9.4 - 2.1.0]范围内的机型无法使用wx.getMenuButtonBoundingClientRect
    			// 所以手动写死非全面屏手机的适配胶囊布局位置
    			self.NavRightMenuRect = { 
    				top: 26,
    				bottom: 58,
    				right: self.WinWidth - 10,
    				width: 87,
    				height: 32
    			}
    			// 如果系统信息返回的状态栏高度大于20，认为是全面屏手机
    			if (self.StatusBarHeight > 20) { 
    				self.NavRightMenuRect.top = 50
    				self.NavRightMenuRect.bottom = 82
    			}
    
    			// 2019年08月21日22:09:22
    			// 微信小程序库出现bug，导致部分机型wx.getMenuButtonBoundingClientRect无返回值
    			// 所以在这之前先默认写死一个NavRightMenuRect，防止全局的自定义导航栏已经隐藏了但是无法显示自定义导航栏
    			// 详见https://developers.weixin.qq.com/community/develop/doc/00062238d78e880aedd88b72351c00
    			if (wx.getMenuButtonBoundingClientRect) { 
    				let NavRightMenuRect = wx.getMenuButtonBoundingClientRect()
    				self.NavRightMenuRect = { 
    					top: NavRightMenuRect.top,
    					bottom: NavRightMenuRect.bottom,
    					right: NavRightMenuRect.right,
    					width: NavRightMenuRect.width,
    					height: NavRightMenuRect.height
    				}
    			}
    
    			self.NavRightMenuCenterY = self.NavRightMenuRect.top + self.NavRightMenuRect.height / 2
    			self.CustomNavHeight = self.NavRightMenuRect.bottom + (self.NavRightMenuRect.top - self.StatusBarHeight)
    		} else { 
    			self.NavRightMenuRect = null
    			self.CustomNavHeight = 0
    		}
    	},
    	
        // 比较两个版本号
    	compareVersion (v1, v2) => { 
    	    v1 = v1.split('.')
    	    v2 = v2.split('.')
    	    const len = Math.max(v1.length, v2.length)
    	
    	    while (v1.length < len) { 
    	        v1.push('0')
    	    }
    	    while (v2.length < len) { 
    	        v2.push('0')
    	    }
    	
    	    for (let i = 0; i < len; i++) { 
    	        const num1 = parseInt(v1[i])
    	        const num2 = parseInt(v2[i])
    	
    	        if (num1 > num2) { 
    	            return 1
    	        } else if (num1 < num2) { 
    	            return -1
    	        }
    	    }
    	    return 0
    	} 
           
    }),

假如在index 页面引用  
index.wxml

<import src="../../template/CustomNavBar/CustomNavBar.wxml" />
    	<template is="CustomNavBar" data="{ { ..._CustomNavBar_ }}"></template>

index.js

onLoad: function(options) { 
    		new App.CustomNavBar(this)
    	}

[Link 1]: https://blog.csdn.net/qq_42911663/article/details/89422534