微信小程序第二天

微信小程序第二天

前端框架 React、Vue、Angular这三个框架。

mvvm的模式（模型视图视图模型），mvc模式（模型视图控制器）

数据交互

数据交互：简单说就是前后台交互，展示在前端页面的时候的视频、图像等都是后端发送给而来。前端的文本变成了变量，跟着后台走。

名字可以随便起，现在不是变量，想换成变量，加上两个大括号
此时跳转到user.js里面

里面就是一些page的参数，此时要将值传入，即在data中修改属性，data里面数据改变，前端显示会改变，这就叫做数据绑定。page相当于一个对象，后面有属性和方法。如下图，text参数传入：

js文件里还有其他的一些函数，当进行跳转的时候，加到栈的时候，才进行初次渲染和显示，挪出去的时候卸载，对应生命周期函数那些。

通过for循环制作轮播图：列表渲染

同样的道理，图片也是一样，可以利用变量

<image src="{{srcC}}"></image>

data中设置一个图片地址，狗狗图片就输出了。这样可以利用此原理制作一个狗狗轮播图

第一天学习的轮播图的基础上，在js的data中定义一个数组srcArr[ ],加上图片地址，用for循环来遍历

<swiper autoplay="{{Aplay}}">
  <swiper-item wx:for="{{srcArr}}" wx:key="index">
    <image src="{{item}}"></image>
  </swiper-item>
</swiper>

再加上一个Aplay属性，值为false，设置一个开关（触发器）控制滑块是否自动切换

图中标记的Aplaychange即为触发器函数，Aplay默认设置为false，开关关闭，无法移动，点击开关之后，Aplaychange函数生效：令Aplay值发生转变即可达到控制开关的效果。

但是改变Aplay不能直接等于
得通过this.setData({Applay:true})这种方式来转变。
此时得到的只是开了就变成true，但是关闭不能变回false，如下方式实现true 和 false 的转变

  //开关控制滑块自动切换
  Aplaychange:function(){
    console.log(this.data.Aplay)
    this.setData(
      {Aplay:!this.data.Aplay
    })

至此，开关控制的轮播图实现。

渐变轮播图：绝对定位

三张狗狗图，做成一个渐变的自动循环轮播图
利用子代选择器，加上绝对定位，在wxss中设置

给上绝对定位，三张图都堆叠到一起，不加条件显示为最后
一张图片。加上z-index，可以改变顺序，z-index:1 时，显示在最上层，为0不显示，如下图，狗狗图变化


因此index由1、0、0变为0、1、0，就可以实现图片的转换，出现lbtfn函数未发现，加上this引用属性。

只遍历到最后一张图片出现如下错误

此时要解决第三张图切回第一张图，来写个循环实现

//轮播图函数，自动切换图片 user.js
  lbtfn:function(){
    //改变lbtimage数组中每个元素num的值
    var arr = this.data.lbtimage;
    for(let i = 0; i < arr.length; i++)
    {
      if (arr[i].num == 1)  {
            arr[i].num = 0;
            if(i==arr.length-1){
              arr[0].num=1;
            }else{
              arr[i+1].num =1;
            }
        break;
      } 
    }
    this.setData({
      lbtimage:arr
    })
  },

设置wxml页面的for循环lbtimage为一个数组，传递参数item.num,如上为循环函数
lbtimage图片数组如下

渐变效果 all 2s linear；

因为在初次渲染onReady中，设置的lbtfn是2000ms显示另一张图，所以设置2s的渐变效果。

至此，渐变轮播图实现。

音乐组件的编写

<text>这个是一个音频组件</text>
<audio src="../music/bgm.mp3" controls="{{true}}" poster="../music/11.jpg" author="薛之谦" name="丑八怪"></audio>

歌曲清单列表

bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view class="main">
  <!-- 歌曲清单列表 -->                        
  <view class="songlist">
        <view class="showSongName" bindtap="showListChange">   <!--初始显示，bindtap查找绑定的处理函数 -->
             <text>{{showSongName}}</text>
        </view>
            <view class="list" wx:if="{{showList}}">
                  <view bindtap="showSongNameChange" wx:for="{{songNameList}}" wx:key="index" data-index="{{index}}">
                        <text>{{ item }}</text>
                  </view>
            </view>
  </view>
</view>

同样是利用数据绑定和参数的传递，控制下拉歌曲菜单的改变效果

  data: {
    showList:false,   //控制下拉列表是否显示
    showSongName:"薛之 - 丑八怪",    //正在显示的歌曲名字
    songNameList:[            //將所有歌名放入数组中
      "薛之谦 - 丑八怪",
      "赵雷 - 鼓楼",
      "毛不易 - 别再闹了"
    ]
  },

  //定义函数 点击歌名列表，切换显示的歌名 歌名列表隐藏
  showSongNameChange:function(Event){
    //console.log(Event.currentTarget.dataset.index);    //  找到index数值的变化，设置num
    var num = Event.currentTarget.dataset.index;
    //歌名列表隐藏
    this.setData({
      showList:false,
      showSongName:this.data.songNameList[num]
    })
  },

 //定义函数 点击歌名，显示歌名的列表
  showListChange:function(){
    this.setData({
      showList:true
    })
  },

实现效果及第二天成果如下（其实都为动态的，懒得录了，睡了）：