微信小程序——引导添加到我的小程序提示

由于我是需要多个小程序使用这个样式，索性就直接封装成组件，方便其它的小程序使用......

过程中遇到的一些问题，以及如何解决

1.遮罩层遮不住tabbar，首先自定义tabbar，然后遮罩层z-index设置成99999，基本就能搞定；

/*原生tabbar遮挡不住，custom改为true*/
"tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "list": [
      {
        "pagePath": "pages/test/test",
        "text": "test",
        "iconPath": "",
        "selectedIconPath": ""
      },
      {
        "pagePath": "pages/index/index",
        "text": "home",
        "iconPath": "",
        "selectedIconPath": ""
      }
    ]
  },

/* 遮罩层 */
.overlay {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	background: #00000070;
}

2.关于胶囊按钮位置获取，直接调用wx.getMenuButtonBoundingClientRect()就可以实现；

const res = wx.getMenuButtonBoundingClientRect()

3.关于检测是否添加到我的小程序中，调用 wx.checkIsAddedToMyMiniProgram，先用checkIsAddedToMyMiniProgram检测是否可用

if (wx.canIUse('checkIsAddedToMyMiniProgram')) {
    try {
            wx.checkIsAddedToMyMiniProgram({
			    success: (res) => {
					// 需要执行的代码
				},
				fail: () => {
					// 需要执行的代码
				},
			});
	} catch (error) {
		// 需要执行的代码
	}
} else {
	// 需要执行的代码
}

 4.最后就是如何使用了

<reminder showOverlay="{{showOverlay}}" capsule="{{capsule}}" width="{{pageWidth}}" height="{{pageHeight}}" />