课堂学习：微信开发者工具初步认识
一、文件介绍：
pages目录 用于存放所有的页面
utils目录 用于存放工具类文件
app.js 是入口文件，程序在运行时，首先要执行该文件
app.json 是全局配置文件，用于配置小程序的信息（它里面配置的是全局信息）
app.wxss 是全局样式文件
project.config.json 是项目配置文件
sitemap.json 是SEO配置文件
二、每一个页面由四个文件组成：
xxx.wxml文件，就相当于一个html文件
xxx.wxss文件，就相当于一个css文件
xxx.js文件，是交互文件（核心文件）
xxx.json文件，是页面的配置文件（它里面配置的是当前页面信息）
三、在wxml文件中，不能写传统的html标签，只能写微信提供的组件：
view组件，就相当于div标签
text组件，就相当于span标签
四、在wxss文件中，最好不要写标签选择器和id选择器，统一写类选择器
五、为了让小程序里面的内容在各种设备上能够自适应显示，
微信推出了响应式单位：rpx，在iphone6中 2rpx=1px
六、index.js
Page()函数，返回页面对象，该函数需要传一个配置参数，这个配置参数，是一个对象。
data选项，定义页面的数据
七、swiper滑块视图容器
<view class="container">
<!-- swiper是滑块视图容器，它里面只能放swiper-item组件，
swiper组件的常用属性：
circular是衔接滑动
autoplay是自动切换
interval自动切换时间间隔
indicator-dots是否显示面板指示点
indicator-color指示点颜色
indicator-active-color当前选中的指示点颜色
image是图片组件，注意：最好全部采用网络图片，因为小程序总提交不允许超过2MB
-->
<swiper class="swiper" circular autoplay interval="5000" indicator-dots
indicator-color='#eeeeee' indicator-active-color="#336699">
<swiper-item> </swiper-item>
</swiper>
八、插值表达式 {{XXX}}
<!-- {{}} 是插值表达式，这里面可以直接使用js里面定义的数据 -->
<view class="type">
<text>歌曲分类：{{name}}</text>
<text>歌曲热度：{{hot}}</text>
</view>
九、wx:for指令 与 触屏事件 bindtap
<!-- wx:for指令，用于循环列表，循环出来的每一项通过item返回，
每一项对应的索引，通过index返回。
循环列表时，添加wx:key的好处时，将来列表发生变化时重新渲染列表的损耗为更低 -->
<view wx:for="{{songs}}" wx:key="index" class="item">
<text>{{index}}-{{item.id}}-{{item.name}}</text>
<!-- bindtap是触屏事件，其实就是相当于网页中的点击事件 -->
<view class="btn" data-i='{{index}}' data-j = '1' bindtap="delSong">删除</view>
</view>
