提前了解： 小程序官方文档https://developers.weixin.qq.com/miniprogram/dev/framework/ vue官方文档https://cn.vuejs.o
.
提前了解：
小程序官方文档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">1</view>
<image class="img" src="http://p1.music.126.net/q2ag5aifgDZqAOm6GLkc_g==/109951165165020942.jpg?imageView&quality=89"></image>
<view class="text">
<view class="name">歌曲1</view>
<view class="singer">歌手1</view>
</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中给图片按钮绑定点击事件
<image bindtap="playBtnClick" class="playBtn" src="../../public/playBtn.png"></image>
这样点击图片按钮就会跳转页面
本文分享自微信公众号 - 两耳的速食汤包（gh_84c0fe6a460d）。
如有侵权，请联系 [email protected] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
