音乐小程序我的页面代码 音乐小程序我的页面代码怎么设置

音乐小程序的“我的页面”是用户个人中心，用于展示用户的个人信息、收藏、播放历史等，以下是一份可能的“我的页面”代码示例，使用微信小程序的框架进行编写。

需要在小程序的app.json文件中注册页面路径：

{
  "pages": [
    // 其他页面路径...
    "pages/myPage/myPage"
  ],
  // 其他配置...
}

接下来，创建myPage页面的目录结构：

pages/
  ├── myPage/
  │   ├── myPage.wxml
  │   ├── myPage.wxss
  │   └── myPage.js

1、myPage.wxml - 页面结构：

<view class="container">
  <view class="user-info">
    <text class="username">{{userInfo.username}}</text>
    <text class="user-id">用户ID: {{userInfo.userId}}</text>
  </view>
  <view class="my-playlist">
    <text class="section-title">我的收藏</text>
    <block wx:for="{{favorites}}" wx:key="id">
      <view class="song-item" bindtap="playSong" data-id="{{item.id}}">
        <text>{{item.title}}</text>
      </view>
    </block>
  </view>
  <view class="my-history">
    <text class="section-title">播放历史</text>
    <block wx:for="{{playHistory}}" wx:key="id">
      <view class="song-item" bindtap="playSong" data-id="{{item.id}}">
        <text>{{item.title}}</text>
      </view>
    </block>
  </view>
</view>

2、myPage.wxss - 页面样式：

.container {
  padding: 20px;
}
.user-info {
  margin-bottom: 20px;
}
.user-id {
  font-size: 14px;
  color: #666;
}
.section-title {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}
.song-item {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.song-item text {
  font-size: 16px;
  color: #333;
}

3、myPage.js - 页面逻辑：

Page({
  data: {
    userInfo: {
      username: '用户昵称',
      userId: '用户ID'
    },
    favorites: [
      { id: 1, title: '歌曲1' },
      { id: 2, title: '歌曲2' }
      // 更多歌曲...
    ],
    playHistory: [
      { id: 3, title: '历史歌曲1' },
      { id: 4, title: '历史歌曲2' }
      // 更多历史歌曲...
    ]
  },
  onLoad: function() {
    // 页面加载时的逻辑
  },
  playSong: function(e) {
    const songId = e.currentTarget.dataset.id;
    // 这里可以调用音乐播放API，传入songId参数
    console.log('Play song:', songId);
  }
});

这段代码提供了一个基本的“我的页面”示例，包括用户的基本信息展示、收藏歌曲列表和播放历史列表，在实际开发中，你可能需要根据具体需求对页面进行调整和优化，例如添加用户登录状态的判断、与后端API的交互等。