撩课小程序(教育类)实战存档(小程序 + 云开发)

云开发

本项目使用了云开发,云开发的三大基础能力:

  • 数据库:一个既可在小程序前端操作,也能在云函数中读写的 JSON 文档型数据库
  • 文件存储:在小程序前端直接上传/下载云端文件,在云开发控制台可视化管理
  • 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写业务逻辑代码

撩课小程序

教育类小程序:包含课程首页,讨论区,我的等功能

  • github地址:https://github.com/HuaiAnGG/itlike
  • 先上效果

您的浏览器不支持播放该视频~!

浏览器不支持播放该视频,可以直接访问视频地址

首页模块

撩课小程序(教育类)实战存档(小程序 + 云开发)_第1张图片

全栈直播班

  • 点击课程图片可转跳到相应的课程界面(腾讯课堂小程序)
  • 课程介绍数据从云数据库中读取

最新公开课

  • 课程列表采用轮播图的方式呈现
  • 热门评论是直接爬取 课程用户评论API:https://m.ke.qq.com/cgi-bin/comment_new/course_comment_list
  • 采用云开发提供的数据库进行开发

学习路线

  • 使用自定义组件 卡片式组件:stage-card、加载更多组件:load-more

  • 对数据进行分页请求(云函数)

exports.main = async (event, context) => {
  let pageNum = event.pageNum || 1
  let pageSize = event.pageSize || 2

  let db = cloud.database()
  let sc = db.collection("stage_classes")

  let result = sc.orderBy('ccNum', 'asc').skip((pageNum - 1) * pageSize).limit(pageSize).get().then(res => {
    return res
  })

  return result
}
  • 分页请求的数据进行追加
// 请求的数据,如果有数据,则进行追加
if (res.result.data.length > 0) {
    currentPage++
}
this.setData({
    isLoading: false,
    stageData: this.data.stageData.concat(res.result.data)
})

关于撩课

  • 使用video组件,视频文件:视频资源
  • vedio 使用文档,请移步:官方文档

客服

撩课小程序(教育类)实战存档(小程序 + 云开发)_第2张图片

  • 使用小程序的开发功能

讨论区模块

撩课小程序(教育类)实战存档(小程序 + 云开发)_第3张图片

发布

撩课小程序(教育类)实战存档(小程序 + 云开发)_第4张图片

评论

撩课小程序(教育类)实战存档(小程序 + 云开发)_第5张图片

我的模块

撩课小程序(教育类)实战存档(小程序 + 云开发)_第6张图片

  • 我的提问

撩课小程序(教育类)实战存档(小程序 + 云开发)_第7张图片

  • 我的回答

撩课小程序(教育类)实战存档(小程序 + 云开发)_第8张图片

参考文档

  • 云开发文档

你可能感兴趣的:(小程序,云开发,前端)