微信小程序开发day02

今天主要学习了在项目中插入视频、轮播图片的功能。

1.插入视频

在movies.js中编写以下代码，movies.wxml是展示主页面样式和文件，相当于html页面。

<!-- 播放视频 -->
<view>
  <video src="http://www.w3school.com.cn//i/movie.mp4" binderror="videoErrorCallback">
  </video>
</view>

2.轮播图片

在movies.wxml中编写以下代码，view是盒子模型容器，class挂的名字叫view的样式.

<view class="view">
  <!-- swiper:轮播图  -->
  <!-- autoplay:设置图片是否自动轮播 -->
  <!-- interval:轮播的间隔时间 -->
  <swiper autoplay="true" interval="{{1000}}" indicator-dots="true">
    <!-- wx:for:循环图片 -->
    <!-- block用来加载循环的，因为for不能单独存在 -->
    <!-- {{}}:插值表达式，属于语法糖。-->
    <block wx:for="{{imgUrls}}">
      <!-- swiper-item:每一行加载一张图片 -->
      <swiper-item>
        <image src="{{item}}" />
      </swiper-item>
    </block>
  </swiper>
</view>

movies.js是页面生命周期，一般用来请求、获取数据。在movies.js中的Page页面的初始数据里设置需要轮播的图片。

  data: {
      imgUrls:[
        '/assets/img/dm001.jpg',
        '/assets/img/dm002.jpg',
        '/assets/img/dm003.jpg'
      ]
  },

在movies.wxss中设置轮播的背景和最小高度，注意样式必须以**.**开头，后面跟着名字

.view
{
  background-color: #F6CEE3;
  min-height: 100%;
}

以上操作就完成啦！