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

体验码

已经完成整个项目，并开源，可以扫码体验
小程序体验码

体验码

Tips

如果没有及时授权体验，可以先扫体验二维码提交申请，然后再加作者的微信，备注：itlike体验 or itlike小程序体验，
如果没有及时授权体验，可以先扫体验二维码提交申请，然后再加作者的微信，备注：itlike体验 or itlike小程序体验，
如果没有及时授权体验，可以先扫体验二维码提交申请，然后再加作者的微信，备注：itlike体验 or itlike小程序体验，

作者微信

云开发

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

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

撩课小程序

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

<video src="https://bucketblog.oss-cn-shenzhen.aliyuncs.com/blog/pic2020/07/%E5%B0%8F%E7%A8%8B%E5%BA%8F.mp4" controls="controls" width="500" height="300">您的浏览器不支持播放该视频！ </video>

首页模块

效果图

全栈直播班

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

学习路线

使用自定义组件卡片式组件: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)
})