39課全棧小程序

1、全棧小程序開(kāi)發(fā)1. 課前準(zhǔn)備1. 云開(kāi) 檔2. 課堂目標(biāo)1. 開(kāi)發(fā) 的云函數(shù)2. 開(kāi)發(fā) 的全棧小程序3. 知識(shí)點(diǎn)云函數(shù)引入增加/ 除project.config.json文件外所有文件全部放到 frontend中/project.config.jsonminiprogramRoot: mini-fe/, cloudfunctionRoot: mini-back/,/backend/sum/index.js/ 云函數(shù) 文件const cloud = require(wx-server-sdk)cloud.init()/ 云函數(shù) 函數(shù)exports.main = (event, context)

2、= console.log(cosole.log,event) console.log(context)return sum: event.a + event.b開(kāi)課吧web全棧架構(gòu)師/ app.jsonLaunch: function () console.log(onLaunch.)/ 這里添加wx.cloud.init(),wx.cloud.callFunction(/ 云函數(shù)名稱name: add,/ 傳給云函數(shù)的參數(shù)data: a: 1,b: 2,success(res) console.log(res.result.sum) / 3,fail: console.error)wx.c

3、loud.callFunction(/ 云函數(shù)名稱name: add,/ 傳給云函數(shù)的參數(shù)data: a: 1,b: 2,).then(res = console.log(res.result) / 3).catch(console.error)獲取用戶信息getUserInfo必須要用button來(lái)獲取，得到用戶 后，可以通過(guò)wx.getUserInfo獲取， 有彈窗提示開(kāi)課吧web全棧架構(gòu)師/ pages/logs/logs.wxmluserInfo. Name登錄/ pages/logs/logs.js Page(data: userInfo:,onGetUserInfo(e) cons

4、ole.log(coGetUserInfo,e) if ( e.detail.userInfo) this.setData(avatarUrl: e.detail.userInfo.avatarUrl, userInfo: e.detail.userInfo)獲取openid用戶的openid，是當(dāng)前用戶在小 的唯一標(biāo)識(shí)，使用云開(kāi)發(fā)，可以很方便的實(shí)現(xiàn)獲取openid 也就是登錄的功能，借助wx-server-sdk新建云函數(shù)/server-end/login/login.jsconst cloud = require(wx-server-sdk) cloud.init()exports.mai

5、n = (event, context) = const wxContext = cloud.getWXContext() return event,openid: wxContext.OPENID,使用開(kāi)課吧web全棧架構(gòu)師/ pages/logs/logs.js onGetUserInfo(e)/ ./ 添加wx.cloud.callFunction( name: login,data: , success: res = console.log(res)console.log(云函數(shù) login user openid: , res.result.openid),fail: err = c

6、onsole.error(云函數(shù) login 調(diào)用失敗, err) wx.navigateTo(url: ./deployFunctions/deployFunctions,)/ .持久化 openidwx.cloud.callFunction( name:login,data:, success:(res)=let userInfo = e.detail.userInfo userInfo.openid = res.result.openid this.setData(userInfo)wx.setStorageSync(userInfo,userInfo) console.log(登錄 ,

7、res)查看用戶開(kāi)課吧web全棧架構(gòu)師用戶狀態(tài)onLoad: function()const userInfo = wx.getStorageSync(userInfo) console.log(userInfo,userInfo)if(userInfo & userInfo.openid) this.setData(userInfo),添加云數(shù)據(jù)庫(kù)一個(gè)類似mongodb的數(shù)據(jù)庫(kù) 和傳統(tǒng)的mysql關(guān)系型數(shù)據(jù)庫(kù)的區(qū)別開(kāi)課吧web全棧架構(gòu)師添加集合添加商品集合 goods 云開(kāi)發(fā) 操作新增數(shù)據(jù)文檔開(kāi)課吧web全棧架構(gòu)師const db = wx.cloud.database() db.colle

8、ction(goods).add(data: name:web全棧, count: 1,success: res = / 在返回結(jié)果中會(huì)包含新創(chuàng)建的 的 _id console.log(res)wx.showToast(title: 新增 ,)console.log(數(shù)據(jù)庫(kù) 新增 ， _id: , res._id),fail: err = wx.showToast(icon: none, title: 新增 失敗)console.error(數(shù)據(jù)庫(kù) 新增 失敗：, err)上傳文件使用云開(kāi)發(fā)的云 能力wx.chooseImage 選擇圖片wx.cloud.uploadFile上傳文件上傳頭圖d

9、oUpload() / 選擇圖片wx.chooseImage( count: 1,sizeType: compressed, sourceType: album, camera, success: res = wx.showLoading( title: 上傳中,)const filePath = res.tempFilePaths0/ 上傳圖片const cloudPath = my-image123 + filePath.match(/.+?$/)0 wx.cloud.uploadFile(cloudPath, filePath,success: res = console.log(上傳文

10、件 ：, res) this.setData(uploadUrl:res.fileID),complete: () = wx.hideLoading(),),數(shù)據(jù)在 和集合上都有提供 get 方法用于獲取單個(gè) 或集合中多個(gè) 的數(shù)據(jù)。開(kāi)課吧web全棧架構(gòu)師)db.collection(todos).where(_id: id).get(success(res) / res.data 是包含以上定義的兩條 的數(shù)組console.log(res.data)更新數(shù)據(jù)使用update來(lái)更新數(shù)據(jù)，更新方式多樣化，可以直接修改新的值，也支持遞增這些函數(shù)操作列表頁(yè)開(kāi)課吧web全棧架構(gòu)師/ frontend/p

11、ages/list/list.js Page(/* 頁(yè)面的初始數(shù)據(jù)*/ data: goods: ,onLoad(options) this.getList(),getList() const db = wx.cloud.database(); db.collection(goods).get(success: res = console.log(res, res); this.setData( goods: res.data ););)index:比如每次 ，count+1const _ = mand db.collection(goods).doc(goodid).update(data: /新的值name:xx,/ 表示指示數(shù)據(jù)庫(kù)將字段自增 10 count: mand.inc(1),success(res) console.log(res.data)下拉刷新開(kāi)課吧web全棧架構(gòu)師g.html#%E9%A1%B5%E9%9D%A2%E9%85%8D%E7%BD%AE需要配置 enablePullDownRefresh 配合on