本篇主要介紹serverless在小程序云開發(fā)的實踐
小程序傳統(tǒng)開發(fā)模式
前后臺聯(lián)調(diào)時間有時候更多谱邪，等項目上線需要考慮更多運維的問題，買域名買服務器等
云開發(fā)正在改變小程序的開發(fā)模式
云開發(fā)是什么
讓開發(fā)者更專注于業(yè)務的開發(fā)咆课，在云開發(fā)云函數(shù)中，我們可以很方便獲取小程序用戶openId书蚪、unionId一些鑒權(quán)信息殊校，減輕后臺開發(fā)量
云開發(fā)是一套綜合類服務的技術產(chǎn)品，通常開發(fā)一個完整的應用（小程序也好呕屎，Web敬察、移動應用也好）都需要數(shù)據(jù)庫、存儲蹂安、CDN锐帜、后端函數(shù)、靜態(tài)托管缠黍、用戶登錄等等药蜻，但是云開發(fā)將這些服務都集成到了一起替饿，而且以一種全新的開發(fā)方式，讓開發(fā)一個應用更加快速踱卵、方便惋砂、便宜且強大绳锅，引領未來技術開發(fā)的新趨勢。
簡單的說眷柔，就是云開發(fā)是一套綜合類服務的技術產(chǎn)品，通常開發(fā)一個完整的應用（小程序也好驯嘱，Web、移動應用也好）都需要數(shù)據(jù)庫茂蚓、存儲剃幌、CDN、后端函數(shù)牛郑、靜態(tài)托管淹朋、用戶登錄等等钉答，但是云開發(fā)將這些服務都集成到了一起，而且以一種全新的開發(fā)方式仑性，讓開發(fā)一個應用更加快速右蹦、方便、便宜且強大晨汹，引領未來技術開發(fā)的新趨勢贷盲。
我們不需要區(qū)分那部分是前端那部分是后端巩剖，我們只需要調(diào)用函數(shù)一樣去哪里這個流程就可以，云函數(shù)也可以在本地調(diào)式曙聂，調(diào)式云函數(shù)就像調(diào)式我們的代碼一樣的
云開發(fā)優(yōu)勢
- 快速上線
- 更加專注我們的業(yè)務
- 獨立開發(fā)一個完整的小程序吃引，云開發(fā)提供非常豐富的接口刽锤，我們通過這些接口很方便文件上傳等操作
- 不需要考慮運維等問題并思，云開發(fā)是彈性擴容的
- 數(shù)據(jù)更安全
小程序云開發(fā)提供哪些基礎能力
小程序云函數(shù)計費
產(chǎn)品定價
支持地域
免費額度
每個月的免費額度宋彼，會在每月開始時刻重置输涕，不會進行累積
配額限制說明
小程序云開發(fā)項目的創(chuàng)建與配置
云開發(fā)項目初始化
找到云開發(fā)的環(huán)境ID莱坎，點擊云開發(fā)控制臺窗口里的設置圖標寸士，在環(huán)境變量的標簽頁找到環(huán)境名稱和環(huán)境ID。
用戶在開通云開發(fā)之后就創(chuàng)建了一個云開發(fā)環(huán)境乃正，微信小程序可擁有最多兩個環(huán)境婶博，每個環(huán)境都對應一整套獨立的云開發(fā)資源，包括數(shù)據(jù)庫名党、云存儲划栓、云函數(shù)、靜態(tài)托管等，各個環(huán)境是相互獨立的帅掘。每個環(huán)境都有一個唯一的環(huán)境ID（環(huán)境名稱不唯一）。
指定開發(fā)者工具的云開發(fā)環(huán)境
當云開發(fā)服務開通后碧绞，我們可以在小程序源代碼cloudfunctions文件夾名看到你的環(huán)境名稱讥邻。如果在cloudfunctions文件夾名顯示的不是環(huán)境名稱，而是“未指定環(huán)境”兴使，可以鼠標右鍵該文件夾，可以看到彈窗的第一項為“當前環(huán)境”盹牧，有個小三角励幼，在這里可以選擇或切換已經(jīng)建好的云開發(fā)環(huán)境。如果環(huán)境為空白有滑，重啟開發(fā)者工具嵌削，再來選擇。
指定小程序的云開發(fā)環(huán)境
在開發(fā)者工具中打開源代碼文件夾miniprogram里的app.js文件睛榄，找到如下代碼：
wx.cloud.init({
// env 參數(shù)說明：
// env 參數(shù)決定接下來小程序發(fā)起的云開發(fā)調(diào)用（wx.cloud.xxx）會默認請求到哪個云環(huán)境的資源
// 此處請?zhí)钊氕h(huán)境 ID, 環(huán)境 ID 可打開云控制臺查看
// 如不填則使用默認環(huán)境（第一個創(chuàng)建的環(huán)境）
// env: 'my-env-id',
traceUser: true,
})
在 env: ‘my-env-id’處改成你的環(huán)境ID场靴，注意需要填入的是你的環(huán)境ID而不是環(huán)境名稱哦旨剥，結(jié)果如下：
// 因為云開發(fā)可以創(chuàng)建多個環(huán)境浅缸，比如微信小程序就可以創(chuàng)建兩個免費的云開發(fā)環(huán)境，一個用于測試蚌父，一個用于正式發(fā)布毛萌。如果你沒有在小程序端指定環(huán)境羹饰，會默認選擇為你創(chuàng)建的第一個云開發(fā)環(huán)境闷旧。我們可以通過修改env的參數(shù)來切換小程序端用來調(diào)用的云開發(fā)環(huán)境。
wx.cloud.init({
env: 'cloud1-2g12nyjfdh7f4caed9',
// 云開發(fā)能力全局只需要初始化一次即可窘哈，這里的traceUser屬性設置為true滚婉，會將用戶訪問記錄到用戶管理中吨拗，在云開發(fā)控制臺的運營分析—用戶訪問里可以看到訪問記錄。
traceUser: true,
})
小程序云開發(fā)資源的管理
小程序云開發(fā)控制臺
騰訊云云開發(fā)網(wǎng)頁控制臺
我們還可以使用騰訊云云開發(fā)網(wǎng)頁控制臺來管理云開發(fā)資源哨鸭，需要注意兩點娇妓，一個是登錄方式需要選擇其他登錄方式里的微信公眾號，點擊然后使用手機微信掃碼只估，在微信上選擇你要登錄的小程序着绷；二是要進入騰訊云后臺之后切換選擇云開發(fā)Cloudbase。
其他工具與方式
云開發(fā)資源還支持其他方式來調(diào)用
- CloudBase CLI：我們可以使用云開發(fā)提供的命令行工具 CloudBase CLI 對云開發(fā)環(huán)境里面的資源進行批量管理，比如云函數(shù)批量下載更新彬向；云存儲里面的文件夾批量下載和上傳等等；
-
Tencent CloudBase Toolkit：Tencent CloudBase Toolkit是一款Visual Studio Code的云開發(fā)插件遍希，使用這個插件可以更好地在本地進行云開發(fā)項目開發(fā)和代碼調(diào)試里烦，并且輕松將項目部署到云端；
部署并上傳云函數(shù)
云函數(shù)的根目錄與云函數(shù)目錄
cloudfuntions文件夾圖標里有朵小云篙程，表示這就是云函數(shù)根目錄别厘。展開cloudfunctions触趴，我們可以看到里面有l(wèi)ogin、openapi冗懦、callback、echo等文件夾颈畸，這些就是云函數(shù)目錄没讲。而miniprogram文件夾則放置的是小程序的頁面文件
cloudfunctions里放的是云函數(shù)，miniprogram放的是小程序的頁面徙缴，這并不是一成不變的嘁信，也就是說你也可以修改這些文件夾的名稱，這取決于項目配置文件project.config.json里的如下配置項：
"miniprogramRoot": "miniprogram/",
"cloudfunctionRoot": "cloudfunctions/",
但是你最好是讓放小程序頁面的文件夾以及放云函數(shù)的文件夾處于平級關系且都在項目的根目錄下穿剖，便于管理卦溢。
云函數(shù)部署與上傳
- 右鍵云函數(shù)目錄，選擇在終端中打開啄刹，輸入
npm install命令下載依賴文件凄贩； - 然后再右鍵云函數(shù)目錄，點擊“創(chuàng)建并部署：所有文件”
- 在云開發(fā)控制臺–云函數(shù)–云函數(shù)列表查看云函數(shù)是否部署成功昵时。
小程序云函數(shù)場景
小程序云開發(fā)對比不同方式獲取用戶信息的應用場景
小程序碼
圖片上傳
云函數(shù)路由優(yōu)化tcb-router
npm i tcb-router
云函數(shù)超時時間
訂閱消息
- 消息推送位置：服務通知
- 消息下發(fā)條件：用戶自主訂閱
- 消息卡片：查看詳情可以跳轉(zhuǎn)到小程序頁面
使用步驟
1、在微信公眾平臺上獲取消息模板的ID
2句柠、獲取下發(fā)的權(quán)限：
wx.requestSubscribeMessage({
tmplIds: ['模板ID'],
success(res) {
console.log(res)
}
})
subscribeNew: 獲取下發(fā)消息的權(quán)限，由用戶自主選擇訂閱
subscribeNew:function(){
wx.requestSubscribeMessage({
tmplIds: ['模板ID'],
success(res) {
console.log(res)
}
})
}
3、調(diào)用接口下發(fā)訂閱消息：subscribeMessage.send
這里是云調(diào)用訂閱消息谜酒，首先要創(chuàng)建一個云函數(shù)
需要在config.json中配置subscribeMessage.send權(quán)限
config.json:
"permissions": {
"openapi": [
"openapi.subscribeMessage.send"
]
}
云函數(shù)編寫
// 云函數(shù)入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
console.log(event,'sendMessage')
// 訂閱消息推送
const res = await cloud.openapi.subscribeMessage.send({
touser: wxContext.OPENID,
page: `/pages/index/index`,
lang: 'zh_CN',
data: {
name1: {
value: event.user_name
},
thing7: {
value: event.name
},
phone_number5: {
value: event.phone
},
thing6: {
value: event.xueli
}
},
templateId: 'yXgBDeiRvjIZ98zOA1212CJeCXw8fj09Ir0sNT3ZXI7H0sw', // 模板id
})
return res
}
當用戶訂閱消息之后僻族，就可以給用戶下發(fā)消息了。
<view bindtap="sendNew">發(fā)送消息</view>
sendNew:function(){
wx.cloud.callFunction({
// 要調(diào)用的云函數(shù)名稱
name: 'sendNew',
// 傳遞給云函數(shù)的參數(shù)
data: {
openid: '',
theme:"團建",
address:"xx"
},
success: res => {
console.log(res)
// output: res.result === 3
},
fail: err => {
console.log(err)
// handle error
},
})
}
最后將云函數(shù)上傳部署蝌数，使用手機測試，成功后籽前，在微信的服務通知就會收到了訂閱的消息
定時觸發(fā)器
每天指定時間執(zhí)行云函數(shù)
云數(shù)據(jù)庫
1. 云數(shù)據(jù)庫獲取100條數(shù)據(jù)突破
2. 分頁查詢數(shù)據(jù)庫
3. 模糊查詢
4. 數(shù)據(jù)權(quán)限管理
5. 云數(shù)據(jù)庫中1對N關系的三種設計方式
小程序云函數(shù)調(diào)試
控制臺調(diào)試
vscode本地調(diào)試
選擇“云端函數(shù)”列表右側(cè)的 阻荒，向云端函數(shù)發(fā)送觸發(fā)事件。
我是程序員小月蓖租，更多干貨在公號「前端進階之旅」分享
