共计 936 个字符,预计需要花费 3 分钟才能阅读完成。
场景:微信小程序中添加广告,可以是微信广告和自定义广告的自适应布局;问题:微信广告在小屏(比如: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 号,清明就剩一天咯。已踏青,已出游,该静一下咯。*