分类 默认分类 下的文章

首先,在需要插入广告的页面定义一下
let rewardedVideoAd = null

然后,我们再加上激励广告设置的所有逻辑
ad_set:function(){
var that =this;
if(wx.createRewardedVideoAd) {

rewardedVideoAd = wx.createRewardedVideoAd({ adUnitId: 'adunit-aff945372da8bd6a'})
rewardedVideoAd.onLoad(() => {

console.log('拉取激励广告成功')

})
rewardedVideoAd.onError((err) => {

console.log('拉取激励广告失败')

})
rewardedVideoAd.onClose((res) => {

if (res && res.isEnded) {

   console.log('激励广告加载完成')
  } else {

console.log('激励广告被强制关闭')

 }

})
}
},

以上部分是默认的广告逻辑,我们在页面渲染时就默认加载,所以在onload中调用一下
onLoad: function (e) {

  this.ad_set();

},

然后接下来,就是控制广告的展示了
ad_show:function(){
if (rewardedVideoAd){

 rewardedVideoAd.show(()=> {
  wx.showToast({

title: '看完视频就刷新哟',
icon: 'loading',
duration: 2000

  })
 });

}
},

最后在view视图层需要调用的地方添加冒泡事件即可
bindtap="ad_show"

请求的数据是一个对象
onShow: function () {

that.getInfo()

},
getInfo() {

  wx.request ({
    url:  app.config.apiUrl + 'get/index' , // 拼接接口地址(前面为公共部分)
    method: 'post',
    header: {
        'content-type' : 'application/json'
    },
    success (res) {
        if (res) { 
            console.log(res.data)  // 打印查看是否请求到接口数据
            // 开始获取数据 eg: textBox(获取文字内容)
            textBox : res.data.data.list.basic.brand_story  // 根据network查看请求到的接口的结构获取相对应的数据
        }    else {
            console.log('没有数据')
        }
    }) 

},

console.log(res.data)结果如下
请输入图片描述

uni-app v-for循环遍历数据控制次数,当我们在遍历某个数据的时候接口给了10个数据,但是我们缺只需要前面4个,或者只需要中间的4-8个指定的数据,这是时候我们应该如何去渲染呢。看到丸子的小程序和插件后,枫瑞也是想去使用该插件去开发一个uni-app版本的,毕竟可以发布多端,一端维护即可。该问题也是在制作轮播图的时候碰到的
请输入图片描述
uni-app v-for循环遍历数据控制次数

1.写一个轮播图咯

发起一个随机文章的网络请求

// 轮播图

uni.request({
    url: API +'/wp-json/mp/v1/posts/rand',
    success: (res) => {
    this.fenlei = res.data;
    console.log(this.fenlei)
}

});

控制台也是妥妥的打印了10条数据

uni-app v-for循环遍历数据控制次数
请输入图片描述
2.截取数据

如果我们只要3个数据 只要后面添加.slice(0, 3),起初枫瑞在渲染数据的是添加

<swiper class="swiper-box" @change="change" :autoplay="autoplay" :interval="interval" :duration="duration">
    <swiper-item v-for="(item, index) in fenlei.slice(0, 3)" :key="index" @tap="leid(item.id)">
        <view :class="item.colorClass" class="swiper-item" >
            <image :src="item.meta.thumbnail" mode="aspectFill" />
        </view>
    </swiper-item>
</swiper>

在hbuilder x自带的浏览器中确实是可以的,但是在小程序中轮播图是空的,虽然有数据存在
请输入图片描述
这可能也是一套代码在适应多端的时候兼容性问题,也就意意味着我们得换种写法,直接写在请求数据中就好了

uni.request({

url: API +'/wp-json/mp/v1/posts/rand',
success: (res) => {
    this.fenlei = res.data.slice(0, 3);
    console.log(this.fenlei)
}

});

在测试下h5以及小程序端都是正常

文章来源:枫瑞博客网