使用微信小程序开发制作一个简易的音乐电台应用

以下是一个简易的音乐电台小程序的代码案例。代码逻辑包括用户登录、获取音乐列表、播放音乐、控制音乐的播放和暂停等。

1. 首先，在小程序的 app.json 文件中配置页面路由和权限：

{
  "pages": [
    "pages/index/index",
    "pages/login/login",
    "pages/musicList/musicList",
    "pages/player/player"
  ],
  "permission": {
    "scope.userLocation": {
      "desc": "您的位置信息将用于获取附近的音乐电台"
    }
  }
}

1. 创建小程序的首页，index.js：

// index.js

// 获取应用实例
const app = getApp();

Page({
  data: {
    userInfo: null
  },

  onLoad() {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo
      });
    } else {
      app.userInfoReadyCallback = userInfo => {
        this.setData({
          userInfo
        });
      };
    }
  },

  onLogin() {
    wx.navigateTo({
      url: '/pages/login/login'
    });
  }
});

1. 创建登录页面，login.js：

// login.js

// 获取应用实例
const app = getApp();

Page({
  onGetUserInfo(e) {
    app.globalData.userInfo = e.detail.userInfo;
    if (app.userInfoReadyCallback) {
      app.userInfoReadyCallback(e.detail.userInfo);
    }
    wx.navigateBack();
  }
});

1. 创建音乐列表页面，musicList.js：

// musicList.js

Page({
  data: {
    musicList: []
  },

  onLoad() {
    // 调用 API 获取音乐列表
    wx.request({
      url: 'https://api.example.com/music',
      success: res => {
        this.setData({
          musicList: res.data
        });
      }
    });
  },

  onPlay(e) {
    const musicId = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: `/pages/player/player?id=${musicId}`
    });
  }
});

1. 创建音乐播放页面，player.js：

// player.js

Page({
  data: {
    musicId: null,
    musicUrl: null,
    musicName: null,
    isPlaying: false
  },

  onLoad(options) {
    this.setData({
      musicId: options.id
    });
    // 调用 API 获取音乐详情
    wx.request({
      url: `https://api.example.com/music/${options.id}`,
      success: res => {
        this.setData({
          musicUrl: res.data.url,
          musicName: res.data.name
        });
      }
    });
  },

  onPlay() {
    const backgroundAudioManager = wx.getBackgroundAudioManager();
    if (!this.data.isPlaying) {
      backgroundAudioManager.src = this.data.musicUrl;
      backgroundAudioManager.title = this.data.musicName;
      backgroundAudioManager.play();
      this.setData({
        isPlaying: true
      });
    } else {
      backgroundAudioManager.pause();
      this.setData({
        isPlaying: false
      });
    }
  }
});

1. 在 app.js 中配置全局数据和回调函数：

// app.js

App({
  globalData: {
    userInfo: null
  },
  userInfoReadyCallback: null
});

以上就是一个简易的音乐电台小程序的代码案例。在实际开发中，你还可以加入更多的功能，如搜索音乐、收藏音乐等。代码中使用了微信小程序的 API，你可以根据自己的需求进行修改和扩展。