前不久，小程序推出了云開發的功能，使開發者們無需搭建服務器，用云端能力直接邁入全棧開發。正巧用著網易云課堂充電，界面精致、細節到位，于是決定用云開發來仿一仿網易云課堂。

來，先看一波效果圖

購物車

直接購買

工具

在項目開發中選用好的工具使得工作事半功倍

微信開發者工具? ?（云開發）

vscode? vs中如emmet之類的各種插件能讓coding爽的不行，我是在vs中coding 在開發者工具里調試??。

easymock 快速的模擬出數據請求，（主頁的數據請求量較多且只是可讀，就直接用easymock了）

Mark man?讓你成為快樂切圖仔

項目結構

|-study163 項目名|-cloudfunctions 云函數|-getMyCourse 獲取我的課程 |-getCourseInfo 獲取課程信息|-getCart 獲取購物車|-miniprogram 項目模塊|-components 自定義組件|-box-module 盒子 |-myCourse-module 我的課程|-special-module 專題 |-utils 工具|-indexMock 獲取主頁數據|-viewContent 文本處理|-pages 頁面|-account 賬號|-cart 購物車|-confirm 確認訂單|-courseInfo 課程信息|-myStudy 我的學習|-index 首頁|-vant-weapp 有贊vant框架組件庫|-··· app.js 全局jsapp.json 全局json配置app.wxss 全局wxss 復制代碼

云開發

在新版的開發者工具中，具有了云開發的功能，且在啟動模板中添加了云開發快速啟動模板

云開發的三個核心

• 數據庫 文檔(JSON)數據庫 類似MongoDB
• 存儲管理 存儲空間，類似百度云盤
• 云函數 獨立的node項目

數據庫

課程的數據項是多出了我的預料的，這里我只定義了我所使用了的部分。每個頁面顯示不同的課程。這里要注意的一點是，數據滾動欄里的、課程盒子里的、課程信息里的圖片雖然看起來相似，但并不是同一張，所以儲存的鏈接不同。小tips：設計好數據庫后記得設置相對應的權限管理，否則可能出現讀取不到數據的情況。

_id是數據庫自動生成的屬性(唯一)，而我定義了一個id屬性，串聯個個數據表(collection),類似傳統sql數據庫中的主鍵。

course_info

course_cart

my_course

存儲管理

當文件儲存在此后，會生成一個下載地址，可以直接拿出來用。

當然也可以用相應的API直接進行上傳或下載

云函數

云函數就是部署在云端的獨立運行的node后端項目，根據自身的業務具體實現。在生成云函數后，首先記得安裝依賴，在終端中yarn。寫完后不光得保存還得記得上傳并部署。

云函數（小demo）的門檻不高，可以輕松助你實現全棧開發。

我的云函數業務其實很簡單，就是簡單的查詢

// 云函數入口文件 const cloud = require('wx-server-sdk') cloud.init()const db = cloud.database();const course_cart = db.collection('course_cart');// 云函數入口函數 exports.main = async (event, context) => { let info = course_cart.where({ id: event.id }).get(); return info }復制代碼

眾所周知js是個單線程語言，而數據交互是個異步過程。這一段沒有處理好的話，可能出現即使獲取到了數據也沒顯示出來的問題。所以啊，異步問題還是得交給promise處理！

const promiseArr = cart_coursesId.map(course => new Promise((resolve, reject) =>{ wx.cloud.callFunction({ name: 'getCart', data: { id: course} }).then(res =>{ resolve(res.result.data[0]); })}))Promise .all(promiseArr) .then(data => { console.log(data); wx.hideLoading() this.setData({ courses: data }) }) 復制代碼

部分頁面解析

首頁

關于主頁的課程盒子，我想用一個模板兼容所有的表現效果，所以這也是坑我最多的地方。

為了兼容大圖的展現，我給圖片加上了一個isBig屬性（bool）。

當isBig為false時，圖片寬度為48.7%,margin-right為 2.6%;，并通過父類的ntd-child(even)將偶數子類（處于右邊）的margin-right改為0%，形成 （48.7%+2.6%）+48.7%的結構分割。但當isBig為true，第一行就只有一張大圖，所以從第二行開始偶數子元素出現在左邊，結構變成48.7%+（48.7%+2.6%）本來在中間的間隙到了右邊，兩張圖片貼在了一起，很不美觀。所以我在每處理到一張大圖的同時，再生成一個display為none的小盒子。這樣第一行依然只顯示一張大圖，但有了兩個子元素。所以下面的行列，依然是奇數子類在左邊，偶數子類在右邊。

效果實現了，但是當我想把它封裝成組件時，天坑出現了 component不支持ntd-child選擇器，并且組件的slot也并不只是直白的整段插入。不過日后還是會重新封裝~

<view class="courses"> <block wx:for="{{mainPage.sellWell.content}}" wx:key="index" > <block wx:if="{{item.isBig}}"> <view class="course_big" > <navigator url="../courseInfo/courseInfo?id={{item.id}}" > <image class="course-image_big " src="{{item.image}}" /> <text class="course-title">{{item.title}}</text> <text class="course-price" wx:if="{{item.price > 0}}">￥{{item.price}}</text> </navigator> </view> <view style="display:none"></view> </block><block wx:else> <view class="course" > <navigator url="../courseInfo/courseInfo?id={{item.id}}" > <image class="course-image " src="{{item.image}}" /> <text class="course-title">{{item.title}}</text> <text class="course-price" wx:if="{{item.price > 0}}">￥{{item.price}}</text> </navigator> </view> </block></block> </view>復制代碼

我的學習

雖然簡單，但這是典型的數據驅動界面效果，數據綁定，也就是MVVM。頁面通過對數據status的判斷來決定顯示對應的部分。

<ul class="status"><li><text class="{{status == '1' ? 'active':''}}" bindtap="showStatus" data-status="1">我的課程</text></li><li><text class="{{status == '2' ? 'active':''}}" bindtap="showStatus" data-status="2">我的微專業</text></li></ul><block wx:if="{{status == '1'}}"> </block> <block wx:else> </block>復制代碼

給相應的標簽設置對應的data-status，再將修改的函數綁定到bindtap上，一個最簡單的MVVM例子就實現了。

showStatus: function(e){let status = e.currentTarget.dataset.status;this.setData({status:status})}復制代碼

關于課程的獲取就是云函數的用武之地了

onShow:function(){ wx.cloud.callFunction({ name: 'getMyCourse', }).then(res=>{ this.setData({ my_courses: res.result.data }) }) }復制代碼

在你需要使用云函數的地方調用wx.cloud.callFunction()，把要調用的云函數的函數名作為參數傳入，如此處{name: 'getMyCourse'}。接著在wxml內通過一個wx:for把數據輸出即可。此處myCourse-module為封裝好了的自定義組件。

<view wx:for="{{my_courses}}" wx:key="index"> <myCourse-module image="{{item.image}}" title="{{item.title}}" cid="{{item.id}}"></myCourse-module> </view>復制代碼

購物車

相關數據項有

totalPrice:0, selectedId:[], selectAllStatus: false復制代碼

通過對列表中數據的isSelected屬性判斷，來計算總價

getTotalPrice: function(){ let courses = this.data.courses; let total = 0; let selectedId = []; for(let i=0;i<courses.length;i++){ if(courses[i].isSelected){ total += courses[i].price; selectedId.push(courses[i].id) } }this.setData({ totalPrice:total, selectedId }) console.log('[total]',total); console.log('[selected]',selectedId); return total; }復制代碼

選中課程，還是MVVM數據綁定，且選中后重新計算總價

selectedList:function(e){ const index = e.currentTarget.dataset.index; const courses = this.data.courses; courses[index].isSelected = !courses[index].isSelected; this.setData({ courses }) this.getTotalPrice(); }復制代碼

全選，每次進行selectAll操作，先將selectAllStatus改為！selectAllStatus，（全選=>全不選 || 全不選=>全選 ），之后將所有數據的isSelected屬性統一為selectAllStatus的當前狀態。

selectAll:function(e){ let courses = this.data.courses; let selectAllStatus = this.data.selectAllStatus; selectAllStatus = !selectAllStatus;courses.forEach((item, index) => { item.isSelected = selectAllStatus })this.setData({ courses, selectAllStatus })this.getTotalPrice(); }復制代碼

數據傳遞到下一個界面? 將選中的數組selectedId作為對象通過navigator傳入下一個頁面。

<block wx:if="{{totalPrice > 0}}"> <navigator url="../confirm/confirm?ids={{selectedId}}"> <view class="pay-btn active" bindtap="confirm">去結算</view> </navigator> </block>復制代碼

訂單

先獲取購物車傳遞的數據

let orderIds = options.ids.split(","); console.log(orderIds) this.setData({ userInfo : app.globalData.userInfo, orderIds: orderIds }) 復制代碼

完成訂單后，將購買的課程存入數據庫內

wx.cloud.init() const db = wx.cloud.database(); const my_courses = db.collection('my_courses');復制代碼

addMyCourse(){ const orders = this.data.orders;for(let order of orders){let myCourse = { title:order.title, image:order.image, id:order.id } console.log(myCourse); my_courses.add({data:myCourse}) } }復制代碼

提交訂單之后 my_courses更新，相應的，打開被購買的課程頁面也會更新，查詢當前課程是否在購買的課程中，在則將isPaid改為true。

wx.cloud.callFunction({ name: 'getMyCourse', }).then(res=>{ for(const my_course of res.result.data){ if(options.id === my_course.id){ let isPaid = true; this.setData({ isPaid }) return ; } } })復制代碼

<block wx:if="{{isPaid}}"> <view class="foot">打開網易云課堂APP學習 支持倍速播放<view class="arrow"></view></view> </block><block wx:else> </block>復制代碼

兩個小工具

• indexMock? ? 在進行數據請求時，不要將請求寫在頁面的js里，將其封裝出去，在需要用的頁面import即可。
  

let indexMock = function(url){ return new Promise((resolve,reject)=>{ wx.request({ url:url, success(res){ resolve(res.data) }, fail(err){ reject(err) } }) }) }module.exports = { indexMock: indexMock}復制代碼import { indexMock } from '../../utils/indexMock.js'; //先引入indexMock Page({ data: {mainPage:{}, url:"https://www.easy-mock.com/mock/5bda9d1a58caf84108172bab/study163/mainPage", },onLoad() { const url = this.data.url; indexMock(url) //indexMock返回的是一個Promise 后面用then()處理就 .then(res => { console.log(res) this.setData({ mainPage:res }) }) .then(res=>{ console.log("mainpage",this.data.mainPage) }) } //其他函數.... }); 復制代碼

• viewContent? ? 在顯示課程介紹時，遇到了一個頭疼的問題，原來介紹是html格式的，有各種<span><p><br>之類的標簽，而小程序內是wxml文件。最初我想到的是用wxparse來解析。但此處我只需要解析輕量的文章，有點殺雞焉用牛刀的感覺。其實呢，wxparse的實現就是通過生成node數組來轉換。所以我干脆直接用正則寫一個轉換的數組工具。

const viewContent = (data) => { if(data && (typeof data === "string")){ return data.replace(/<\/?span>/g, "").replace(/<\/?p>/g, "").replace(/&nbsp;/g, " ").split("<br>"); }else{ return } } module.exports = { viewContent: viewContent}復制代碼

數據庫中存的是html文檔

這里要注意的一點是要給txt-item設置一個高度，實現空行的效果。

結語

寫項目時總是，思考不全總是遇到各種各樣的坑坑坑，算是意識到結構健壯、邏輯一致的重要性。wxml是結構，首先得保證結構的穩定性，至于樣式就是體力活了，至于數據那就是MVVM大顯身手的地方了。路漫漫其修遠兮，吾將上下而求索。

感謝閱讀，文中有錯誤的地方或者有建議歡迎提出！

項目地址：https://github.com/MarchYuanx/study163

歡迎 ☆☆☆star☆☆☆!

總結

以上是生活随笔為你收集整理的小程序 网易云课堂云开发初体验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。