微信小程序
微信小程序是否支持,在主微信小程序打开半屏小程序后(用户会在半屏小程序内有进入其它页面路径的操作),获取半屏小程序的信息(如,页面路径)
【相关推荐】
先上成果图:
视图层:使用了微信自带的swiper组件(轮播图组件),设置了自动轮播,间隔时间3000ms。样式设置了宽高和圆角,更美观一点。轮播图的src地址是通过for循环swiper数组来获取每一项的图片地址数据,然后渲染到页面显示出来。
WXML代码:
<!-- 首页轮播图 -->
<swiper class="lunbotu" indicator-dots indicator-active-color="white" autoplay interval="3000">
<swiper-item wx:for="{{swiper}}" wx:key="index">
<image src="{{item.img}}"></image>
</swiper-item>
</swiper>
WXSS代码:
/* 轮播图样式 */
swiper{
height: 350rpx;
margin: 20rpx;
border-radius: 20rpx;
}
.lunbotu image{
width: 100%;
height: 100%;
border-radius: 20rpx;
}
逻辑层:使用wx.cloud.database()方法获取了云数据库的轮播图照片,然后通过setData函数赋值给定义的swiper数组。
JS代码:
//获取轮播图数据
getSwiper(){
wx.cloud.database().collection('swiper_photo')
.get()
.then(res => {
this.setData({
swiper:res.data
})
console.log('获取的轮播图数据',this.data.swiper);
})
},
wx.cloud.database()是云开发获取云数据库中数据的语法,大家可以学一学,非常方便
postMessage 可以试试这个通信。