uniapp给全端小程序添加激励广告详细教程

  • 文章介绍
  • 评价建议
  • 夜间模式

    uniapp是一款使用 Vue.js 开发跨平台应用的前端框架,可以全端兼容小程序平台和APP端,不管网上评论如何,但是本人表示利用uniapp开发小程序还是挺不错的,而大多小程序都是通过流量主获取收益,而收益效果最好的无疑就是激励视频广告,这里给大家写一个关于uniapp给全端小程序添加激励视频广告的详细教程。

    前提说明

    在教程之前先给大家说一个比较实用的小技巧,由于小程序最开始起源于微信小程序,所以很多平台都是借鉴了微信小程序的框架,为了汇集用户,甚至还可以兼容微信小程序的代码,所以在字节跳动小程序,QQ小程序中都可以wx.api类似的API,而支付宝小程序又没有激励广告,百度小程序我接触的也少。也就是说如果直接采用微信小程序的广告代码,可以同时兼容多个平台的广告

    定义videoAd

    如果知道了前提中的技巧,那么uniapp给小程序添加激励视频广告几乎就是非常简单的事情了。第一步还是先定义videoAd,如果不知道放在哪,可以直接写在<script>下方,如下图位置

    uniapp给全端小程序添加激励广告详细教程

     

     

    加载激励广告

    在定义完videoAd后,我们在定义一个激励广告加载函数,其实可以直接写在onload函数中,但是由于onload可能还需要加载一些其他的函数,如果直接写在里面的话不利于后期维护,代码看着也不美观,所以直接定义一个广告加载函数,通过this直接调用,这样方便。代码如下:

    1. adLoad: function() {
    2. if (wx.createRewardedVideoAd) {
    3. videoAd = wx.createRewardedVideoAd({
    4. adUnitId: “xxxxxxxxxxx” //你的广告key
    5. })
    6. videoAd.onError(err => {})
    7. videoAd.onClose((status) => {
    8. if (status && status.isEnded || status === undefined) {
    9. //这里写广告播放完成后的事件
    10. } else {}
    11. })
    12. }
    13. },

    然后在onload中调用广告加载函数,代码如下:

    1. onLoad(){
    2. // #ifdef MP
    3. this.adLoad()
    4. // #endif
    5. }

    注:这里// #ifdef MP和 // #endif 采用的是uniapp的条件编译,因为在开发工具中是以H5的状态展示的,不支持加载激励视频广告,所以通过条件编译,使得只有在小程序端才调用广告加载函数。

    定义调用激励广告事件

    这里就没什么特别需要注意的地方了,直接定义事件就行了。代码如下:

    1. openVideoAd: function() {
    2. if (videoAd) {
    3. videoAd.show().catch(err => {
    4. // 失败重试
    5. // console.log(“广告拉去失败”)
    6. videoAd.load().then(() => videoAd.show())
    7. })
    8. }
    9. },

    给按钮点击事件添加激励广告

    这里就是最后一步了,直接写在view中就可以了,代码如下:

    <button @click=”openVideoAd“>观看广告解锁全部内容</button>

     

     

    到这里我们的激励广告就添加成功了,是不是也挺简单的,和其他小程序添加方法和代码都是一样的。

     

    发表评论

    免责声明 本文由蜜桃源码网整理自网络,如有侵权请联系本站删除! 如需转载请注明出处:https://www.mitaobo.com ====================================================================================== 本站声明:
    1、本站所有资源均来源于互联网,不保证100%完整、不提供任何技术支持;

    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途;否则由此产生的法律后果,本站概不负责!

    3、本站默认解压密码 @www.mitaobo.com
    开通VIP 享更多特权,建议使用 QQ 登录