微信小程序webview上添加按钮

一、实图如下

如果你的设计稿为下图需要添加两个按钮，实际引入h5页面却始终实现不了效果，那你有救了。

二、官方文档的webview官方api

1、铺满整个屏幕，不支持自定义导航。
2、不能设置宽高，直接铺满整个页面，一个页面只能有一个webview
3、层级极高，不能通过z-index改变元素属性来浮在上面。

三、解决办法 官方api只有真机才能实现效果，微信开发者工具不适用

html

<web-view src="https://720yun.com/t/a9cjvOsnOa3?scene_id=20949466">
		<cover-view class="share-button">
			<cover-view class="share-txt" >
				搭配详情
			</cover-view>
			<cover-view class="share-txt">
				商品列表
			</cover-view>
		</cover-view>
	</web-view>
	

css

.share-button {
  z-index: 999999;
  position: fixed;
  color: white;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  bottom:30rpx;
  width:60%;
  height: 72rpx;
  display: flex;
  left: 20%;
  justify-content: center;
}

.share-txt{
  width:200rpx;
height:72rpx;
box-shadow:0rpx 4rpx 6rpx 0rpx rgba(18,46,102,0.5);
border-radius:36rpx;
line-height: 72rpx;
text-align: center;
font-size: 28rpx;

}

.share-txt{
  margin-right: 40rpx;
}