微信小程序5-真机测试

微信小程序1-小程序基础,开发工具安装使用
微信小程序2-WXSS,WXS
微信小程序3-小程序生命周期和组件
微信小程序4-小程序的api

1.打开小程序开发工具

    1).点击真机调试

    2).用微信扫描二维码之后显示真机调试窗口

    3).轮播图代码

//wxml
<swiper indicator-active-color='#fff' indicator-dots="true" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}"
  interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgs}}" wx:for-index="index" wx:key="swiperItem" wx:for-item="item">
    <swiper-item class="swiper-items">
      <image class="swiper-image" src="{{item}}"></image>
    </swiper-item>
  </block>
</swiper>

//ts
 data: {
      imgs: [
       "https://img.pconline.com.cn/images/photoblog/5/3/1/0/5310413/20103/23/1269348904383_mthumb.jpg",
        "http://ah.anhuinews.com/hs/hsyxhz/202110/W020211012337742177742.jpg",
        "http://www.cnr.cn/ah/jhfc/20210806/W020210806566411029142.png",
      ],

      duration: 2000, // 滑动动画时长
      indicatorDots: true, // 是否显示指示点
      autoplay: true, // 是否自动切换
      interval: 3000, // 自动切换时间间隔
    }

//wxss
swiper {
  position: absolute;
  height: 30%;
  width: 100%;
}
 
.swiper-image {
  height: 100%;
  width: 100%;
  opacity:0.9;
}