Coder Social home page Coder Social logo

mp-podcast-mpvue's Introduction

MpPodcast

A Podcast miniprogram project, 一款播课类小程序

简介

这是一个类播客类的小程序,功能包括内容推荐、音频播放、内容评论、收藏,主播详情、节目详情等内容。 功能上主要是以下几项:

精选,内容精选页(首页),Slide 滑动切换效果,类微信读书首页 柚道,内容为卡片流式列表,包含的内容为柚道类别下的:读书、读文内容,音频内容可直接点播放 柚答,育儿问题音频解答内容 教师(主播)详情页 柚道内容详情页,音频列表、评论列表,音频列表支持连续播放 柚道内容评论页 柚道内容收藏 交互上需要播放器与导航整合,可滑动切换,播放器默认停留的内容为精选页内容第一条 一期的需求,大致以上几条,还有我的里面会有各种内容收藏的详情页

特点

  • mpvue 基于 mpvue 快速构建
  • vux 音频及内容数据管理
  • scss 样式组件

WePY 版本

https://github.com/baisheng/mp-podcast-wepy

Podcast 服务端

https://github.com/baisheng/podcast-server

系统部分截图

Landing 页

精选页

详情页及播放器

音频播放列表

特色评论页,可以选择喜欢的色彩

小程序码(案例)

安装部署

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

mp-podcast-mpvue's People

Contributors

baisheng avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.