撩課小程序(教育類)實戰存檔（小程序 + 雲開發）

雲開發

本項目使用了雲開發，雲開發的三大基礎能力：

• 數據庫：一個既可在小程序前端操做，也能在雲函數中讀寫的 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>

瀏覽器不支持播放該視頻，能夠直接訪問視頻地址

首頁模塊

全棧直播班

• 點擊課程圖片可轉跳到相應的課程界面(騰訊課堂小程序)
• 課程介紹數據從雲數據庫中讀取

最新公開課

• 課程列表採用輪播圖的方式呈現
• 熱門評論是直接爬取 課程用戶評論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 使用文檔，請移步：官方文檔

客服

• 使用小程序的開發功能 <button open-type="contact"/>,同時須要在微信公衆平臺綁定客服人員的微信號

討論區模塊

發佈

評論

個人模塊

• 個人提問

• 個人回答

參考文檔

• 雲開發文檔