提前了解:

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

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

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

新建一个小程序项目

app id 到网页端查看

https://mp.weixin.qq.com/

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

首先看这几个文件

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>

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

Last modification:November 6th, 2020 at 09:16 pm