一、组件
（1）View组件,相当于div盒子
<view class="container">
123
</view>
（2）text组件,相当于span标签
<text> hello</text>
（3）swiper组件是滑块视图容器。其中只可放swiper-item组件，否则会导致未定义行为。核心业务适合滑块
<swiper class="swiper" autoplay >
<swiper-item>
<image class="img" src=""></image>
</swiper-item>
<swiper-item>
<image class="img" src=""></image>
</swiper-item>
</swiper>
swiper组件常用属性：
circular是衔接滑动
autoplay是自动切换
interval自动切换时间间隔
indicator-dots是否显示面板指示点
indicator-color指示点颜色
indicator-active-color当前选中的指示点颜色
（4）image组件是图像组件，
①注意：最好全部采用网络图片，因为小程序总提交不允许超过2MB，企业最多可10MB
<image class="img" src="https://music.163.com/song?id=1886371885"></image>
②图片自适应宽度，100vw
Calc()函数，是css中计算尺寸的函数
给swiper盒子设置后，可以消除与下面盒子缝隙
.swiper{
width: 100vw;
height:calc(100vw/1080*420) ;
}
.box image{
width: 100vw;
height:calc(100vw/1080*420) ;
}
二、App.json框架全局配置
当全局页面样式和页面配置冲突时，页面配置优先级更高
pages页面路径列表。里面存放着所有页面,可以在这里新建页面
"pages":[
"pages/index/index"
],
Window 全局的默认窗口表现
"window":{
①导航栏背景颜色设置
"navigationBarBackgroundColor": "#e6d2d5",
②导航栏的标题颜色，只支持black和white
"navigationBarTextStyle":"white"
③导航栏的文本内容
"navigationBarTitleText": "网易云音乐",
④下拉loading的样式仅支持dark/light
"backgroundTextStyle":"light"
},
style v2 样式是2.0规则
"style": "v2",
配置文件
"sitemapLocation": "sitemap.json"
三、列表渲染
（1）插值表达式 {{}}，这里面可以直接使用js里面定义的数据
<text>歌曲分类：{{name}}</text>
<text>歌曲热度：{{hot}}</text>
（2）wx:for指令，用于循环列表，循环出来的每一项通过item返回，每一项对应的索引，通过index返回
wx:for指令，用于循环列表，循环出来的每一项通过item返回，
每一项对应的索引，通过index返回。
循环列表时，添加wx:key的好处时，将来列表发生变化时重新渲染列表的损耗为更低
<view wx:for="{{songs}}" wx:key="index" class="item">
<text> {{index}}-{{item.id}}--{{item.name}}</text>
<view class="btn">删除</view>
</view>
四、触屏事件
（1）bindtip是触屏事件，相当于网页中的点击事件
<view class="btn" bindtap="delsong">删除</view>
五、条件渲染
（1）wx:if用于条件渲染：条件为真生成里面的内容，条件为假不会生成里面的内容。（每次重新生成内容）
<view class="songs" wx:if="{{typeId==1}}"></view>
（2）hidden用于条件渲染：条件为真隐藏里面的内容，条件为假显示里面的内容。（每次切换样式）
<view class="song1" hidden="{{typeId==1}}"></view>
六、tab切换&高亮&按下标删除
在小程序中，传递数据是通过data-属性名=属性值，通过点击事件中e接收数据
<view class="song">
<view class="item {{typeId==1?'active':''}}" data-typeid="1" data-hot="100" data-name="热门歌曲" bindtap="activeIndex">
热门歌曲
</view>
<view class="item {{typeId==2?'active':''}}" data-typeid="2" data-name="网络歌曲" data-hot="90" bindtap="activeIndex">
网络歌曲
</view>
</view>
<view class="types">
<view class="left">
歌曲分类：{{name}}
</view>
<view class="right">
歌曲热度：{{hot}}
</view>
</view>
使用hidden显示隐藏
<view class="song1" hidden="{{typeId==1}}">
在小程序中遍历数组只需要写一个数组名
<view class="item {{index%2===0? 'active':''}}" wx:for="{{song1}}" wx:key="index">
<view> {{index}}--{{item.typeId}}--{{item.song}}</view>
<view class="btn" bindtap="delSong" data-index="{{index}}">删除</view>
</view>
</view>
使用wx:if显示隐藏
<view class="song2" wx:if="{{typeId==2}}">
使用三元表达式是现实隔行换色
<view class="item {{index%2===0? 'active':''}}" wx:for="{{song2}}" wx:key="index">
<view> {{index}}--{{item.typeId}}--{{item.song}}</view>
绑定点击事件，并传递点击的下标
<view class="btn" bindtap="delSong2" data-index="{{index}}">删除</view>
</view>
</view>
Page()函数，返回页面对象，该函数需要传一个配置参数，这个配置参数，是一个对象
Page({
在这个配置对象中，定义当前页面的所有内容
data选项，定义页面的数据
data: {
typeId:1,
name:'热门歌曲',
hot:100,
song1: [{ id: 1001,song: '千里之外'}, {id: 1002,song: '成都'}] ,
song2:[ { id:2001,song:'好日子' }, { id:2002, song:'千年等一回'} ],
点击高亮事件，通过e接收，并结构出里面需要的数据
activeIndex(e){
let {currentTarget:{dataset:{typeid,name,hot}}}=e
点击后把传过来的数据通过setData()方法，设置重新更新页面中数据
this.setData({
typeId:typeid,
name,
hot
})
},
点击删除后，通过e传递下标过来
delSong(e){
结构出点击的下标
let {currentTarget:{dataset:{index}}}=e
当前data数组使用splice进行切割
this.data.song1.splice(index,1)
再讲切割后的数据赋给数组
this.setData({
song1:this.data.song1
})
},
delSong2(e){
let {currentTarget:{dataset:{index}}}=e
this.data.song2.splice(index,1)
this.setData({
song2:this.data.song2
})
},
})
