微信小程序开发中遇到的问题及解决办法:微信小程序ad自适应布局(二)
场景:微信小程序中添加广告,可以是微信广告和自定义广告的自适应布局;
问题:微信广告在小屏(比如:320)手机上或是设置ad组件父组件宽度小于300px,内容会超出布局范围;
截图效果:
说明:可以从截图中看出,微信广告组件ad都自动添加了行内样式,而且其样式的权重都是最高的!imporant;
解决办法:
1) 百度的解决办法是添加样式:
ad { zoom: 0.8; }
百度方法效果截图:
说明:从截图的效果可以看出,现在广告未超出父元素,但是没有100%在父元素中撑开;这种方法我用过,个人总结是:当是使用场景宽度小于300px的时候,可以使用这种方法。
附:在微信开发者工具中审查元素,元素好像错位了,不过展示效果正常,这个就忽略吧,微信开发者工具还应该和我一样,继续努力啊~
2) 我的解决办法:在微信广告组件父元素上添加弹性盒子布局;
样式如下
.ad-block { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
效果截图:
说明:从截图中可以看出,广告正常展示。
使用ad(微信广告)需要注意的问题:
1、问题:添加微信广告的小程序在正式上线后微信广告不会正常展示,在开发版本和体验版本微信却展示正常;
微信社区解释是:开发者首次提交广告组件审核,线上版本的告功能将暂时关闭,我们会在一个工作日完成广告组件合规性审核。
2、问题:添加微信广告的小程序在正式上线并且通过审查后,如果有除了纯展示的其他需求,比如:需要点击观看广告6秒才能领取奖励。如果是微信广告,一天点击几次后,微信广告不会正常展示;
解释:当前用户没有展示广告可能是由于该用户当前不适合浏览广告;
解决办法:通过在ad的广告发生错误的回调binderror可以做对应的处理。我所接的需求是:当微信广告展示不出来的时候,就展示自定义广告,通过binderror这个回调函数就可以实现这个需求。
注意:广告加载成功的回调bindload,页面每次重新渲染并且广告加载成功的话都会执行这个回调。
附:社区中的官方解释我暂时没有找到,后期如果我找到了,再附上链接地址。
*随记:今天是4月7号,清明就剩一天咯。已踏青,已出游,该静一下咯。*