小知识，大挑战！本文正在参与“[程序员必备小知识](https://juejin.cn/post/7008476801634680869 "https://juejin.cn/post/7008476801634680869")”创作活动。 # 引言流量主接入简单，仅需复制广告插件嵌入代码，广告展示位置灵活控制 >小程序上线而且累计独立访客（UV）不低于 1000->开通流量主->获得广告id->添加广告代码并调试 >![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/95a2241bb8cf41cb89594d6596b9465b~tplv-k3u1fbpfcp-zoom-1.image) | 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 | | :------ | :----- | :----- | :--- | :----------------------------------------------------------- | :----------------------------------------------------------- | | unit-id | string | | 是 | 广告单元id，可在[小程序管理后台](https://mp.weixin.qq.com/)的流量主模块新建 | [1.9.94](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | 案例：`#小程序://逆向/文章搜索/VpIywukvWp8v6EA` # I、流量主简介 ## 1.1 开通条件开通条件：累计独立访客（UV）不低于 1000 > >![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/627190bd6e80460790cee41767e507ad~tplv-k3u1fbpfcp-zoom-1.image) > >小程序流量主的访客是只要进入小程序就算，如果添加到我的小程序会另外累计 ## 1.2 广告位id获取小程序后台 ->推广->流量主->广告管理 >新建广告位即可获取对应广告位id >![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1f74bfcddc774e8abe1ec70f1ebad174~tplv-k3u1fbpfcp-zoom-1.image) # II、嵌入代码片段嵌入代码片段至希望展示广告的位置，并在发布前通过测试预览广告位展示情况，审核期间推荐关闭激励视频广告。如果是修改其他人的代码，可搜索`unitId`字符串进行替换 ## 2.1 广告显示广告使用view包裹，然后等页面渲染完成再去显示广告。showad默认为0，等页面渲染完成之后设置为1。 wxml： ```xml

``` js： ```js onShow:function(option){ this.setData({showad:1,}); } ``` wxss ```css .ad-container.data-v-400080d0 { padding-left: 8px; padding-right: 8px; margin-top: 30px; width: 100%; } ``` ## 2.2 原生模板广告 wxss ```css .ad-container.data-v-19ecd09c { padding-left: 8px; padding-right: 8px; margin-top: 40px; width: 100%; } ``` js ```javascript ``` ## 2.3 插屏广告 ```javascript let interstitialAd = null Page({ onLoad() { if(wx.createInterstitialAd){ //创建 interstitialAd = wx.createInterstitialAd({ adUnitId: 'xxxx' }) interstitialAd.onLoad(() => { console.log('onLoad event emit') //显示 interstitialAd.show().catch((err) => { console.error(err) }) }) interstitialAd.onError((err) => { console.log('onError event emit', err) }) interstitialAd.onClose((res) => { console.log('onClose event emit', res) }) } } }) ``` ## 2.4 激励视频广告（阅读文章/下载资源/保存图片信息）激励视频广告组件是由客户端原生的图片、文本、视频控件组成的，层级最高，会覆盖在上屏 Canvas 上。一天首次阅读文章需要激励视频，默认不开启激励视频。 >感谢您的阅读，但该文章需要您先阅读激励视频广告。实现逻辑： 1. 看完广告后标记：storage_key + 文章id 2. 再次加载文章时判断是否存在标记，如果没有则弹窗激励视频阅读，如果有缓存标记则对比storage_key。 > 标记数据存储生命周期跟小程序本身一致。开关可在源码中的 pages/data/data.js文件中以下代码修改 ```php if (that.about_center[0].wx_jili_video != '' && that.detailData.fr_videp_if != '0')// //fr_videp_if 为0默认关闭为1默认开启 ``` 激励视频广告 ```javascript //激励视频广告组件默认是隐藏的，因此可以提前创建，以提前初始化组件。 //调用 wx.createRewardedVideoAd 创建激励视频广告组件。该方法返回的是一个全局单例。 //激励视频广告组件默认是隐藏的，需要调用 RewardedVideoAd.show() 进行显示。 onLoad: function(a) { this.windowHeight = getApp().globalData.windowHeight, getApp().globalData.userAvatarFilePath && (this.avatarImage = getApp().globalData.userAvatarFilePath), this.rewardedVideoAdShowAll = getApp().globalData.rewardedVideoAdShowAll, this.$uma.trackEvent("rewarded-VideoAd-showAll", { showAll: this.rewardedVideoAdShowAll }); var t = this; wx.createRewardedVideoAd && ((n = wx.createRewardedVideoAd({ adUnitId: "adunit-xxx" })).onLoad(function() { t.rewardedVideoAdLoaded = !0; }), n.onError(function(e) { t.rewardedVideoAdLoaded = !1; }), n.onClose(function(a) { a && a.isEnded || void 0 === a ? (t.rewardedVideoAdAlreadyShow = !0, t.saveCans(), t.$uma.trackEvent("rewarded-VideoAd-show")) : (t.rewardedVideoAdAlreadyShow = !1, e.showToast({ title: "请完整观看哦" }), t.$uma.trackEvent("rewarded-VideoAd-show-break")); })); }, ``` # see also 更多内容请关注`#小程序：iOS逆向`,只为你呈现有价值的信息，专注于移动端技术研究领域。