项目场景:
最近接到需求,在小程序内部长按识别二维码添加个人微信。
初步效果:
问题描述:web-view官方文档
微信小程序目前image标签,仅支持长按识别小程序码,后面查看网上相关资料,发现微信小程序使用webview打开公众号文章就可以长按识别添加微信:
但是问题来了产品说能不能去除文章标题,底部的阅读全文
解决方案:请注意模拟器调试看不了效果,需要真机才可以
在webview内部使用cover-view,使用fixed定位设置z-index层级,可以让cover-view悬浮于webview上
xml:
<web-view src="https://mp.weixin.qq.com/s?__biz=MzIyNjc0MDk4OQ=#wechat_redirect">
<cover-view class="topView"></cover-view>
<cover-view class="bottomView"></cover-view>
</web-view>
wxss:
.topView{
position: fixed;
left: 0;
top: 0;
z-index: 99999;
width: 100%;
height: 200rpx;
background-color: #12bf83;
}
.bottomView{
position: fixed;
left: 0;
bottom: 0;
z-index: 99999;
width: 100%;
height: 150rpx;
background-color: #12bf83;
}
最后通过js设置webview滚动条位置,并屏蔽滚动即可,