微信小程序开发 - WMusicPlayer小程序端设计

个人项目文档写的比较烂,可以直接去GitHub看源码 WMusicPlayer

主要页面

1. index Page
  • 页面描述:乐库,展示音乐和歌单

  • 组成部分:

    • 推荐歌单
    • 新歌首发
    • 热门歌曲
2. user Page
  • 页面描述:用户中心,显示用户的登录信息以及用户歌单,并提供歌单管理

  • 组成部分:

    • 用户信息
    • 歌单
    • 收藏
3. song Page
  • 页面描述:音乐播放的详情页面,展示歌曲的详细信息,歌曲评论,以及发表评论

  • 组成部分:

    • 歌曲封面图片
    • 歌词(备选)
    • 播放进度条(备选)
    • 发表评论
    • 歌曲的评论
4. sheetlist Page
  • 页面描述:歌单组成的列表
  • 组成部分:
    • 歌单列表
    • 歌单列表内的每一项包含,歌单封面、歌单名称、歌单的前三首歌曲(歌曲名 - 歌手)
5. sheet Page
  • 页面描述:歌单的详情界面
  • 组成部分:
    • 歌单封面
    • 最后更新日期
    • 播放所有,播放模式选择
    • 歌曲列表:每一项包含,歌曲名,歌手,播放按钮,更多选项(添加到我的歌单、移除歌曲(如果是我的歌单)、收藏)

模块划分

1. 登录注册模块
  • 自动登录
Created with Raphaël 2.2.0 开始运行小程序 app.js中onLaunch()函数执行 wx.login() 获取code wx.request() url:/login 返回值为userinfo userid != -1 ? 将获得的用户信息 保存为全局变量GlobalData 登录流程结束 跳转到用户中心请求授权 wx.showModal:[failed] yes no yes no yes no

以上流程即可实现自动登录,用户首次使用时授权一次即可

  • 用户授权注册
Created with Raphaël 2.2.0 用户中心 用户点击登录,弹出授权窗口 授权成功 wx.login() 获取code wx.request() url:/register 用户注册成功 授权注册流程结束 wx.showModal:[failed] yes no yes no yes no

无法自动注册的原因:微信由于修改 wx.getUserInfo() 接口的缘故,获取用户的授权等操作只能通过用户主动点击button来实现,解决方法

2. 音乐播放模块
3. 歌单管理模块
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值