系列文章目錄
提示：云函式開發優勢，微信小程式父子組件傳值，獲取動態資料（云資料庫）,云函式路由
文章目錄
- 系列文章目錄
- 前言
- 一、云開發優勢
- 二、‘父子組件傳值’
- 1.組件關系
- 2.引入組件
- 3.使用組件
- 子給父傳值:
- 三.獲取動態資料
- data中創建資料
- 撰寫云函式
- 本地呼叫
- 四.云函式路由
- 五.云開發-增刪改查
- 初始化
前言
小程式·云開發是微信團隊聯合騰訊云推出的專業的小程式開發服務， 開發者可以使用云開發快速開發小程式、小游戲、公眾號網頁等，并且原生打通微信開放能力， 開發者無需搭建服務器，可免鑒權直接使用平臺提供的 API 進行業務開發，提示：
一、云開發優勢
- 無需搭建服務器
快速構建小程式、公眾號 - 免登錄、免鑒權呼叫微信開放服務
- 統一開發多端應用
- 不限開發語言和框架
- 按量計費，成本更低
小程式代碼構成：
- json 后綴的 JSON 組態檔
- wxml 后綴的 WXML 模板檔案
- wxss 后綴的 WXSS 樣式檔案
- .js 后綴的 JS 腳本邏輯檔案
二、‘父子組件傳值’
1.組件關系
components 目錄下新建檔案夾 playlist playlist 上右鍵新建組件 playlist(以后再新建組件時，省略具體步驟，只說新建組件 playlist) 此組件是我們的歌單組件，開發好后，要在 pages/music頁面中使用，所以他們之間是父子關系 歌單組件的資料應該來自參考此組件的頁面，這樣才能做到組件復用 所以首先在 pages/music頁面的 data 中加入如下資料，然后再傳遞給 components/playlist 組件 開發初期，先使用這些靜態資料，后期會呼叫云函式，從云資料庫中獲取2.引入組件
父組件引入：
3.使用組件
父組件中呼叫：
子給父傳值:
this.triggerEvent("updataSelect", this.data.index)
三.獲取動態資料
data中創建資料
- 前面案例中，歌單資料是在data中寫死的，其實應該來自后臺，也就是來自我們云資料庫當然，云資料庫中的資料也應該是通過管理系統或者其他方式動態維護的，但是為了簡單，后面可以使用云函式+觸發器定時從我搭建的 api 中獲取并匯入最新的推薦歌單資料
云控制臺中的資料庫中新建集合 playlist，playlist.json檔案匯入到云資料庫中
撰寫云函式
撰寫云函式，查詢資料庫并回傳資料
新建云函式 music，撰寫如下代碼
// 云函式入口檔案
const cloud = require('wx-server-sdk')
cloud.init({
// env 云函式id
env: 'test-5gngkp7l028ba32b',
traceUser: true,
})
// 云函式入口函式
exports.main = async (event, context) => {
let res = await cloud.database().collection('playlist')
.skip(event.start)
.limit(event.count)
.orderBy('createTime', 'desc')
.get()
return res
}
cloud.init 方法需要配置引數，特別需要指明 env
否則測驗時可能會一直提示 “database collection not exists”
本地呼叫
music.js 中將 playlist的值設定為空陣列
onLoad:async function (options) {
wx.showLoading({
title: '加載中',
})
let res= await wx.cloud.callFunction({
// name： 呼叫的云函式的名稱
name: 'music',
data: {
start: this.data.playlist.length,
count: this.data.pagesize,
}
})
// 賦值playlist陣列
this.setData({
playlist: this.data.playlist.concat(res.result.data)
})
wx.hideLoading()
},
四.云函式路由
tcb-router是基于Nodejs koa風格的云開發云函式輕量級的類路由庫，可以用于優化前端(小程式端）呼叫服務端的云函式時的處理邏輯，我們可以使用它在一個云函式里集成多個類似功能的云函式，比如針對某個集合的增刪改查;也可以把后端的一些零散功能集成到一個云函式里，便于集中管理等，
- 安裝
npm insttall -D tcb-router
- 云函式引入
playlist云函式中引入
const TcbRouter=require('tcb-router')
- 修改云函式代碼
// 云函式入口檔案
const cloud = require('wx-server-sdk')
const TcbRouter = require('tcb-router')
cloud.init({
env: 'test-5gngkp7l028ba32b',
traceUser: true,
})
// 云函式入口函式
exports.main = async (event, context) => {
const app = new TcbRouter({ event });
app.router('playlist', async (ctx, next) => {
let res = await cloud.database().collection('playlist')
.skip(event.start)
.limit(event.count)
.orderBy('createTime', 'desc')
.get()
ctx.body = res
// await next(); // 執行下一中間件
})
return app.serve();
}
- music 頁面中呼叫云函式是，需要指明 url
五.云開發-增刪改查
初始化
- 在開始使用資料庫 API 進行增刪改查操作之前，需要先獲取資料庫的參考，以下呼叫獲取默認環境的資料庫的參考：
const db = wx.cloud.database()
- 通過 env 欄位指定要使用的環境
const testDB = wx.cloud.database({
env: 'test'
})
- 要操作一個集合，需先獲取它的參考，在獲取了資料庫的參考后，就可以通過資料庫參考上的 collection 方法獲取一個集合的參考了，比如獲取待辦事項清單集合：
let res = await db.collection('todos')
- 獲取集合的參考并不會發起網路請求去拉取它的資料，我們可以通過此參考在該集合上進行增刪查改的操作，除此之外，還可以通過集合上的 doc 方法來獲取集合中一個指定 ID 的記錄的參考，同理，記錄的參考可以用于對特定記錄進行更新和洗掉操作，
假設我們有一個待辦事項的 ID 為 todo-identifiant-aleatoire，那么我們可以通過 doc 方法獲取它的參考：
const todo = db.collection('todos').doc('todo-identifiant-aleatoire')
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/281344.html
標籤：其他
上一篇：如何破解游戲包中的素材與3D模型
下一篇：奪冠生活圈小程式全知曉之頁面裝修