微信小程序自定义导航栏布局适配、判断全面屏

最新推荐文章于 2024-09-20 12:22:50 发布

刘家军

最新推荐文章于 2024-09-20 12:22:50 发布

阅读量2.4k

点赞数

分类专栏：微信小程序适配文章标签：微信小程序自定义导航栏全面屏适配

本文链接：https://blog.csdn.net/qq_42911663/article/details/103062536

版权

微信小程序适配专栏收录该内容

1 篇文章 0 订阅

订阅专栏

直接写在app.js,主要应用自定义导航栏位置问题以及自定义导航栏时常不显示问题，全面屏下底部导航栏或者底部操作按钮增加padding值优化用户体验

 App({
 	// 系统信息
    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.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
	} 
       
}),