微信小程序在web-view页面增加一个按钮

需求:

在微信小程序中通过WEB-view打开H5页面,需要小程序端在页面中增加一个可以请求接口的按钮

实现方法

通过在web-view中嵌套cover-view标签来实现(注意: cover-view只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button,但是本人在里面使用button标签时,对button添加样式无效,最终采用cover-view充当按钮)
cover-view的官方描述: 点这里

开发中遇到的问题

该方法在微信开发者工具中不显示效果,只能在真机上才能看到,一定要在真机上看效果

具体代码

wxml中写法

                          下一步               

wxss中写法

.footer {  position: fixed;  bottom: 100px;  left: 50%;    z-index: 999999999;  transfORM: translateX(-50%);}.button_box {  height: 30px;  line-height: 30px;  width: 200px;  text-align: center;  border-radius: 8px;  color: #ffffff;    background-color: #FF2E2E;  opacity: 0.6;  margin: 10px 0;}

总结

方法不难,重点就是要使用cover-view标签,一定要给 position: fixed;样式,层级越高越好,再一个就是需要在真机查看效果,调整样式有点麻烦.

来源地址：https://blog.csdn.net/weixin_45496202/article/details/130265224