swiper vue 上一页_新维第四课小程序上

提前了解：

小程序官方文档https://developers.weixin.qq.com/miniprogram/dev/framework/

vue官方文档https://cn.vuejs.org/v2/guide/

小程序是基于vue的语法的，vue是javascript的一个框架(相当于别人造好轮子给你用)

新建一个小程序项目

app id 到网页端查看

新建项目后界面如图(我改了编辑器布局)

首先看这几个文件

index目录里就是我们现在看到的右边的主页

wxml其实就是html的微信特色版，wxss就是css，js就是javascript，json就是存储数据的一种格式，所以小程序开发完全就是网页开发的知识

观察wxml的源码，我们发现并没有helloworld这句话，反而js里却出现了

这是vue的语法之一，在js里面定义变量A，在html里面用{{A}}就可以引用A的内容

就好像c语言 int x=1 ，然后printf里面用%d以十进制输出x一样

现在我们将wxml，wxss，js里的东西都删掉

我们在首页制作一个滚动图片的效果

wxml

我们定义一个class为swiper的swiper组件，并给定它的部分属性

关于swiper组件：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

 <view>  <swiper class="swiper" indicator-dots="true" autoplay="true">        <swiper-item>            <image src="{{swiper[0]}}">image>        swiper-item>        <swiper-item>            <image src="{{swiper[1]}}">image>        swiper-item>    swiper>view>

wxss

.swiper表示 在swiper这个类的标签里面的所有image标签，都会具备以下的属性

 .swiper image{  width: 100%;  height: 100%;}

js

定义一个名为swiper的数组，内容分别为两张图片的地址

如何获得网易云歌曲图片的地址

随便在网易云网站上打开一首歌

按下F12进入浏览器的开发者模式，点红框按钮再点蓝框中的图片，然后黑框中的地址就是图片的地址(蓝色的链接，不包括img标签)

随便找两个然后把链接填充到数组中

 const app = getApp()Page({  data: {    "swiper": [      "http://p1.music.126.net/q2ag5aifgDZqAOm6GLkc_g==/109951165165020942.jpg?imageView&quality=89",      "http://p1.music.126.net/XQziGhiSXy3CHgUqzJst8g==/109951165163926069.jpg?imageView&quality=89"    ]  },  onLoad: function () {  },})

现在我们就拥有一个会自动播放的滚动图了

然后我们右键pages，新建一个songlist的文件夹，用来存放音乐播放列表

然后在songlist文件夹里新建songlist的page(页面)

然后我们就会在app.json中发现多了一行，这一行表示将songlist这个页面加载进来

但是我们现在没有切换到songlist页面的按钮，我们添加一个

在app.json中添加

 "tabBar": {    "color": "#000",    "selectedColor": "#a82222",    "backgroundColor": "#fff",    "list": [      {        "text": "首页",        "pagePath": "pages/index/index"      },      {        "text": "列表",        "pagePath": "pages/songlist/songlist"      }    ]  }

注意接着写的话在上一行末尾加一个逗号，最后不用加逗号

可以看到下面出现两个按钮，点击可以切换界面

但是现在只有文字，我们给它添加图片

新建一个public文件夹用来存放图片资源，把需要用到的图片都放进去

 "list": [{        "text": "首页",        "pagePath": "pages/index/index",        "iconPath": "public/index.png",        "selectedIconPath": "public/index_active.png"      },      {        "text": "列表",        "pagePath": "pages/songlist/songlist",        "iconPath": "public/music.png",        "selectedIconPath": "public/music_active.png"      }    ]

这时候就会显示图标了(不显示的话重启一下编辑器)

还可以修改标题栏的文字，颜色等

然后在最开始加上一句，用来规定我们的入口界面是index界面

下面制作歌曲列表

songlist.wxml

 <view>    <view class="songList">        <view class="no">1view>        <image class="img" src="http://p1.music.126.net/q2ag5aifgDZqAOm6GLkc_g==/109951165165020942.jpg?imageView&quality=89">image>        <view class="text">            <view class="name">歌曲1view>            <view class="singer">歌手1view>        view>    view>view>

songlist.wxss

 .songList{  margin-top: 30px;  display: flex;  position: relative;}.songList .img{  margin-left: 20px;  width: 60px;  height: 60px;}.songList .no{  margin-left: 15px;  margin-top: 20px;}.songList .text{  margin-left: 15px;}.songList .text .name{  margin-top: 4px;  font-size: 14px;}.songList .text .singer{  margin-top:16px;  font-size: 12px;  color: #8d8d8d;}

这样会出现一个歌曲的信息

然后在添加一个播放按钮

songlist.wxml

 <view>  <image class="playBtn" src="../../public/playBtn.png">image>view>

songlist.wxss

 .playBtn{  position: absolute;  height: 40px;  width: 40px;  right: 12px;  top: 50%;  margin-top: -20px;}

然后制作一个音乐播放界面

像新建列表界面一样，新建一个播放界面

然后我们给列表界面的播放按钮增加点击跳转事件

现在songlist.js中写点击事件

这几句的意思是调用这个函数时就导航到url所指向的页面

 playBtnClick:function(e){    wx.navigateTo({      url: '/pages/songplay/songplay',    })  },

在songlist.wxml中给图片按钮绑定点击事件

这样点击图片按钮就会跳转页面