自定义微信小程序tabBar，兼容iPhone异形全面屏

需求

开发微信商城会员中心，tabBar有首页及用户中心，当用户没有登录时点击页面任意位置均弹出登录窗口。但是自带的微信tabBar无法被弹出的遮罩层覆盖，从而可以在两个tab之间切换。

解决

自己手动写一个类型tabBar组件 下载地址

功能说明

1、高度还原原生微信小程序tabBar同等功能；
2、通过组件生命周期attached函数调用wx.getSystemInfo()成功回调参数中的model用于判断当前设备是否为iPhone，进而获取设备的宽高，计算宽高比，当宽高比大于1.78则判断设备为异形全面屏，从而增加tabBar组件的高度，解决iPhone设备底部的兼容问题。

使用文档

1、引入

需要使用的页面.json

"usingComponents": {
    "tab-bar":"../../component/tab-bar/tab-bar"
 },

2、使用

需要使用的页面.wxml

<!-- 底部tab按钮 所有其他标签都应该放在该标签之上 -->
<tab-bar tabBarArr="{{tabBarArr}}" tabBarActive="{{tabBarActive}}" bind:click="nextPage"/>

注意：所有的其他标签都应当放置在tab-bar标签之上，如果放在tab-bar标签后面，极有可能不能正常在页面显示

3、数据及触发函数

需要使用的页面.js

data:{
	tabBarArr:[
		{
			title:'首页',//显示的名称
			src:'../../images/home.png',//未被选中的图片
			activeSrc:'../../images/homeActive.png',//已选中状态图片
			url:'../index/index',//跳转的链接
		},
		{
			title:'我的',
			src:'../../images/user.png',
			activeSrc:'../../images/userActive.png',
			url:'../userCenter/userCenter'
		},
	],
    tabBarActive: 0, //当前被选中的tabBar
},

// tabBar跳转
  nextPage: function (e) {
   let url = e.detail.url;//跳转的路径
   let id= e.detail.id;//当前点击的tabBarArr的索引值
     wx.navigateTo({
       url
     })
  },