微信小程序项目实录三——web-view上添加自定义内容

web-view: 承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。

在项目中用它加载h5页面，因为他会占满整个页面，所以开始考虑使用cover-view来在容器之上覆盖一个图标按钮

<web-view src="{{url}}">
	<cover-view class="btns">
		<cover-image class="btn" src="/resources/view/btn.png" bindtap="handleTo"></cover-image>
	</cover-view>
</web-view>

.btns {
  position: fixed;
  bottom: 80rpx;
  right: 30rpx;
  z-index: 99998;
}
.btns .btn {
  width: 80rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin-bottom: 20rpx;
  border-radius: 100%;
}

真机测试，ios可以，安卓。。。哎，受网络影响，可以看到按钮是显示了，然后又被加载的h5覆盖了，猜测是渲染顺序的问题，因此，使用了定时器，让按钮最后加载。

改造代码，使用wx:if控制显示

<web-view src="{{url}}">
	<cover-view class="btns" wx:if="{{isShow}}">
		<cover-image class="btn" src="/resources/view/btn.png" bindtap="handleTo"></cover-image>
	</cover-view>
</web-view>

data: {
   url: '',
   isShow: false,
 },
 //从后台获取到url
this.setData({
	url: payload
})
setTimeout(function () {
  this.setData({
    isShow: true
  })
}, 300)