微信小程序开发中遇到的问题及解决办法：微信小程序ad自适应布局（二）

tanglijun 发布于2019-08-23 16:46 / 2580人阅读

摘要：问题添加微信广告的小程序在正式上线并且通过审查后，如果有除了纯展示的其他需求，比如需要点击观看广告秒才能领取奖励。

场景：微信小程序中添加广告，可以是微信广告和自定义广告的自适应布局；
问题：微信广告在小屏（比如：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号，清明就剩一天咯。已踏青，已出游，该静一下咯。*

云服务器 GPU云服务器微信小程序开发程序微信小程序开发微信小程序的开发微信小程序开发语言

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103273.html

微信小程序开发中遇到的问题及解决办法：微信小程序ad自适应布局（二）

摘要：问题添加微信广告的小程序在正式上线并且通过审查后，如果有除了纯展示的其他需求，比如需要点击观看广告秒才能领取奖励。场景：微信小程序中添加广告，可以是微信广告和自定义广告的自适应布局；问题：微信广告在小屏（比如：320）手机上或是设置ad组件父组件宽度小于300px，内容会超出布局范围；截图效果：showImg(https://segmentfault.com/img/bVbq...

Freeman 2019-08-02 16:11 评论0 收藏0
微信小程序开发中遇到的问题及解决办法（三）

摘要：资料整理关于配置微信小程序页面附关于微信搜索小程序内页面的功能，只能在线上环境有用，而且没有提供测试的渠道。二微信小程序激励视频广告接入微信视频广告指引截图具体使用注意激励视频广告组件是一个原生组件，层级比普通组件高。大纲：根据近期我在小程序开发中接到的需求，总结一下下面四个开发需求所遇到的问题： 1、关于微信现已开放小程序内搜索（sitemap 配置）；2、微信小程序的激励视频广告...

Lowky 2019-08-30 11:07 评论0 收藏0
微信小程序开发中遇到的问题及解决办法（三）

摘要：资料整理关于配置微信小程序页面附关于微信搜索小程序内页面的功能，只能在线上环境有用，而且没有提供测试的渠道。二微信小程序激励视频广告接入微信视频广告指引截图具体使用注意激励视频广告组件是一个原生组件，层级比普通组件高。大纲：根据近期我在小程序开发中接到的需求，总结一下下面四个开发需求所遇到的问题： 1、关于微信现已开放小程序内搜索（sitemap 配置）；2、微信小程序的激励视频广告...

elina 2019-08-02 15:15 评论0 收藏0
微信小程序开发中遇到的问题及解决办法（三）

摘要：资料整理关于配置微信小程序页面附关于微信搜索小程序内页面的功能，只能在线上环境有用，而且没有提供测试的渠道。二微信小程序激励视频广告接入微信视频广告指引截图具体使用注意激励视频广告组件是一个原生组件，层级比普通组件高。大纲：根据近期我在小程序开发中接到的需求，总结一下下面四个开发需求所遇到的问题： 1、关于微信现已开放小程序内搜索（sitemap 配置）；2、微信小程序的激励视频广告...

voyagelab 2019-08-23 18:02 评论0 收藏0
wxParse version0.2-更好的微信小程序富文本HTML及Markdown解析

摘要：信息版本号历史版本号具体代码请查看仓库分支地址解决问题微信小程序富文本解析组件详述因为微信小程序没有提供等解析，原展示类文本没有办法图文并茂的原生展示，主要目的就是弥补富文本解析空缺的组件，欢迎使用反馈开发信息微信小程序开发论坛垂直微信小程 wxParse信息版本号0.1 历史版本号0.2 具体代码请查看仓库分支V1 github地址: https://github.com/ici...

cucumber 2019-08-29 11:32 评论0 收藏0