需求:
在微信小程序中通过web-view打开H5页面,需要小程序端在页面中增加一个可以请求接口的按钮
实现方法
通过在web-view中嵌套cover-view标签来实现(注意: cover-view只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button,但是本人在里面使用button标签时,对button添加样式无效,最终采用cover-view充当按钮)
cover-view的官方描述: 点这里
开发中遇到的问题
该方法在微信开发者工具中不显示效果,只能在真机上才能看到,一定要在真机上看效果文章来源：https://www.toymoban.com/news/detail-731743.html
具体代码
wxml中写法
<web-view class="" src="{{outUrl}}">
<cover-view class="footer">
<cover-view class="button_box" bindtap="nextStep1">
下一步
</cover-view>
</cover-view>
</web-view>
wxss中写法
.footer {
position: fixed;
bottom: 100px;
left: 50%;
/* color: red; */
z-index: 999999999;
transform: translateX(-50%);
}
.button_box {
height: 30px;
line-height: 30px;
width: 200px;
text-align: center;
border-radius: 8px;
color: #ffffff;
/* background: linear-gradient(90deg, #FF2E2E 0%, #FA6E4D 100%); */
background-color: #FF2E2E;
opacity: 0.6;
margin: 10px 0;
}
总结
方法不难,重点就是要使用cover-view标签,一定要给 position: fixed;样式,层级越高越好,再一个就是需要在真机查看效果,调整样式有点麻烦.文章来源地址https://www.toymoban.com/news/detail-731743.html
到了这里，关于微信小程序在web-view页面增加一个按钮的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
