Uniapp encapsulated incentive advertisement, screen insert advertisement and banner advertisement

uniapp Simple package of incentive ads and plug-in ads

Today, I will write a uniapp Simple package of incentive advertising and screen advertising tutorial , The main problem to be solved is that if a small program has many pages and needs to call more advertisements , This can lead to a lot of duplicate code , And make the page js The file looks cumbersome , If it can be encapsulated , Then you only need to use one line of code to implement the call .

First, create a new one js file , It is named here for the convenience of demonstration Utils.js, It is better to create a new folder in the root directory and put it in , Convenient call after .

Because there are no other events to call in the screen advertisement , Quite able to run independently , So it's easy to write , So here js Writing in the file is actually similar to page calling , But we will advertise id Pass it in as a parameter , After that, you can directly call , The code is as follows ：

var interstitialAd = null;
let interstitial = {
    
  load(id) {
    
    if (uni.createInterstitialAd) {
    
      interstitialAd = uni.createInterstitialAd({
    
        adUnitId: id
      })
      interstitialAd.onLoad(() => {
    
        console.log(' The screen insert advertisement is loading ')
      })
      interstitialAd.onError((err) => {
    
        console.log(' Load error ', err)
      })
      interstitialAd.onClose((res) => {
    
        console.log(' The plug-in advertisement is turned off ', res)
      })
    }
  },
  show() {
    
    if (interstitialAd) {
    
      interstitialAd.show().catch((err) => {
    
        console.error(err)
      })
    }
  }
}

You can see here interstitial Object has two functions , One is the loading function , One is the display function , Then we can export them , Because we also need to encapsulate incentive advertising , Then we will export it together later .

Incentive advertising here we need to pass two parameters , One is advertising id, One is the reward event after the completion of incentive advertising , The code is as follows ：

let videoAd = null;
let rewarded = {
    
  load(id, e) {
    
    if (uni.createRewardedVideoAd) {
    
      videoAd = uni.createRewardedVideoAd({
    
        adUnitId: id
      })
      videoAd.onError(err => {
    })
      videoAd.onClose((status) => {
    
        if (status && status.isEnded || status === undefined) {
    
          e()
        } else {
    }
      })
    }
  },
  show() {
    
    if (videoAd) {
    
      videoAd.show().catch(() => {
    
        //  Failure to retry 
        videoAd.load()
          .then(() => videoAd.show())
          .catch(err => {
    
            console.log(' Incentive video   Advertisement display failed ')
          })
      })
    }
  }
​
}

among e It is the incoming reward event , How to use it will be explained later , Finally, we can export the two encapsulated objects , The code is as follows ：

module.exports = {
interstitial,
rewarded
};

Note that the relative path of the file is not misspelled , But you made a mistake ide Will also give you the wrong report .

Cut in ads

stay onLoad There are screen advertisements loaded , Display a plug-in advertisement , The code is as follows ： The code is as follows ：

Utils.interstitial.load(' Your advertisement id')
Utils.interstitial.show()

Encourage advertising
stay onLoad It is loaded with incentive advertisements , The code is as follows ：

Utils.rewarded.load('adunit-85e98527c651f48f', () => {
    
      // Write down any reward event you want here 
});
Utils.rewarded.show();

Video or banner advertisement 、 You can write it directly on the page or use the template method to import

<ad unit-id="" ad-type="video" ad-theme="white"></ad>
<ad unit-id="" ad-type="banner" ad-theme="white"></ad>

Video patch advertising 、 You can write it directly on the page or use the template method to import

<video unit-id=""></video>

Native template advertising 、 You can write it directly on the page or use the template method to import

<ad-custom unit-id=""></ad-custom>

That's all for this chapter , For more quality content, please pay attention to the official account ：Java Programmer Inn .