微信小程序雲開發入門


官方

第一部分:雲開發介紹

快速了解微信雲開發

雲開發

  采用全新的serverless開發模式,涵蓋雲函數、數據庫、CDN、存儲和雲調用能力,提供完整的一站式后端雲服務。

  就是騰訊雲把后端服務都搭好了,雲函數就就相當於后端的接口,前端頁面調用雲函數操作數據庫,存儲的文件直接進cdn。

變化

  對前端工程師來說不光要寫頁面,對接口還要寫接口。對前端工程師來說工作量變大了。

  對老板來說,整個項目周期縮短了,成員變少了,成本降低了。

疑問

  雲開發只能用騰訊雲一家廠商,項目做大之后又遇上騰訊雲提價,項目遷移起來就很難了,如果想遷移到常規服務器就要考慮很多雲開發可以直接忽略的問題(微信鑒權),雲開發的數據庫(JSON格式),cdn存儲都不好遷移。

雲開發是什么

什么是雲開發

  雲開發是微信團隊聯合騰訊雲提供的原生Serverless雲服務,致力於幫助更多開發者快速實現小程序業務的開發,快速迭代。

雲開發與傳統模式的對比

  傳統模式:

 

 

   雲開發:

 

 

   對比:

 

雲開發能力介紹

存儲:在小程序端直接上傳/下載雲端文件,可視化管理

雲函數:在雲端運行的代碼,微信私有天然鑒權,開發者只需編寫自身業務邏輯代碼

雲數據庫:一個既可在小程序前端操作,也能在雲函數中讀寫的JSON數據庫

音視頻服務:提供互通高品質實時音頻通話服務,支持互動白板,美顏濾鏡,高清視頻通話,基於雲開發快速接入

智能圖像服務:集成智能鑒黃、人臉識別、人臉核身等AI視覺能力,基於雲開發快速接入

雲開發對小程序的變革

一天一交付,一天多交付成為可能:雲開發的模式可以幫助開發者快速迭代產品,一天多次產品交付成為可能。

小團隊也可以做大事情:雲開發的模式簡單易懂,小團隊也可以借助雲計算的能力,做一些更大的事情。

彈性成本幾乎為0:所有資源都由服務方來管理,團隊只需要關注業務邏輯

雲開發基本功能演示

雲開發的數據存儲能力

雲開發為小程序開發者提供了數據存儲能力,幫助開發者快速完成應用的開發。

傳統的數據存儲模式

 

 

雲開發的數據存儲模式 

 

 

 一行代碼創建數據

  db.collection('表名').add({
    data: {
      字段1:'數據1',
      字段2:'數據2'
    },
    success(res){
      console.log(res)
    }
  })

一行代碼查詢數據

  db.collection('表名').doc('記錄ID').get({
    success(res){
      console.log(res.data)
    }
  })

雲開發的計算能力

雲開發為小程序開發者提供了開箱即用的計算平台,開發者只需關注自己的核心邏輯,就可以完成復雜邏輯的編寫

傳統模式下的計算能力的實現

 

 

 

雲開發模式下的計算能力的實現

雲開發的文件存儲能力

雲開發為小程序開發者提供了配置好常用環境的海量非結構化數據存儲,幫助開發者解決數據存儲的問題。

 

 

 演示:第一個雲開發小程序

 

 

 

 可在雲開發控制台查看調用雲函數日志

雲開發控制面板介紹

如何進入雲開發控制台

雲開發控制台的幾個功能

概覽:數據統計

運營分析:資源使用、用戶訪問、監控圖表:數據統計

數據庫:

 

 存儲

 

 雲函數

雲開發 API 簡介

env: 'xxx'  或者
env:{
  database:'xxx',
  storage:'xxx',
  functions:'xxx'
}

第二部分:雲開發快速入門體驗

 雲開發快速入門

https://developers.weixin.qq.com/community/business/doc/000e26815e8de0db1ecae5a035b00d

筆記:

1、

指定小程序的雲開發環境

在開發者工具中打開源代碼文件夾 miniprogram 里的 app.js,找到如下代碼:

wx.cloud.init({
      // 此處請填入環境 ID, 環境 ID 可打開雲控制台查看 env: 'my-env-id', traceUser: true, }) 

在 env: 'my-env-id'處改成你的環境 ID,如 env: 'xly-snoop'

2、

cloudfunctions里放的是雲函數,miniprogram放的是小程序的頁面,這並不是一成不變的,也就是說你也可以修改這些文件夾的名稱,這取決於項目配置文件project.config.json里的如下配置項:

    "miniprogramRoot": "miniprogram/", "cloudfunctionRoot": "cloudfunctions/", 

但是你最好是讓放小程序頁面的文件夾以及放雲函數的文件夾處於平級關系且都在項目的根目錄下,便於管理。

3、

getWXContext()

getWXContext()API 是雲開發服務端的工具類 API,會返回小程序用戶的 openid、小程序 appid、小程序用戶的 unionid 等。說這么多不如直接打印,在下面添加一行打印信息:

const wxContext = cloud.getWXContext()
console.log('getWXContext返回的結果',wxContext)

 4、

組件支持

我們可以把下載地址作為圖床來使用的,也就是你可以把圖片的下載地址放到其他網頁圖片是可以顯示的。雲存儲的圖片還有一個 FileID(既雲文件 ID,以 cloud://開頭)則只能用於小程序的特定場景,也只有部分組件的部分屬性支持,把鏈接粘貼到瀏覽器也是打不開的。

5、

基礎庫與 wx.cloud

在小程序端初始化雲開發能力的代碼里,涉及到 wx.cloud 以及基礎庫版本的知識。關於 wx.cloud,我們可以和之前在控制台了解 wx 對象一樣,直接在開發者工具的控制台里輸入:

wx.cloud

來了解對象有哪些屬性與方法。我們可以看到有如下方法:

CloudID: ƒ () //用於雲調用獲取開放數據 callFunction: ƒ () //調用雲函數 database: ƒ () //獲取數據庫的引用 deleteFile: ƒ () //從雲存儲空間刪除文件 downloadFile: ƒ () //從雲存儲空間下載文件 getTempFileURL: ƒ () //用雲文件 ID 換取真實鏈接 init: ƒ () //初始化雲開發能力 uploadFile: ƒ () //上傳文件至雲存儲空間 

而關於基礎庫,有三個地方需要注意它的存在,平時開發的時候需要留意開發者工具的project.config.json里有這樣一個屬性libVersion,這個也可以在開發者工具工具欄右上角的詳情里的本地設置里的調試基礎庫,建議切換到最新,切換后libVersion的值也會修改到切換的版本;

官方文檔基礎庫的更新日志,小程序更新非常頻繁,而更新的核心就是基礎庫:所以基礎庫更新日志要經常留意每個API,技術文檔都會標明它的基礎庫支持的最低版本,而小程序·雲開發 SDK是2.2.3以上的基礎庫才開始支持的。

筆記:
1、

雲函數中的 API 調用的環境也可以使用初始化來設置。

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV,
})

cloud.DYNAMIC_CURRENT_ENV 設置 API 默認環境等於當前所在環境。建議所有的雲函數都使用以上方式來初始化,也就是配置 env 的值為 cloud.DYNAMIC_CURRENT_ENV 或使用你的環境 ID,不要為空。

 2、

async 與 await

在 wx-server-sdk 中不再兼容 success、fail、complete 回調,只會返回 Promise。在雲函數中也經常會需要處理一些異步操作,在異步操作完成后再返回結果給到調用方,我們可以通過在雲函數中返回一個 Promise 的方法來實現。Promise 表示異步操作返回的結果。在新建的雲函數里會看到下面這樣的一個語句(有 async):

exports.main = async (event, context) => {
}

async 表示函數里有異步操作,async 函數的返回值是一個 Promise 對象。在后面還會遇到 await,表示緊跟在它后面的表達式需要等待結果;以及 promise 對象的 then()方法(有點類似於 success 回調函數),和 catch()方法(有點類似於 fail 回調函數),這些我們以后會經常遇到,先理解不了也沒有關系,大家在書寫時推薦雲函數使用上面的寫法就對了。

雲函數的注意事項

在雲函數部署並上傳到雲端之后,更新里面的文件比如index.js、config.json,建議右鍵點擊更新好的文件(不是雲函數目錄)選擇雲函數增量上傳:更新文件,不建議通過上傳並部署所有文件的方式,否則在幾分鍾內會出現雲函數調用失敗的情況;

刪除一個雲函數之后,不建議再新建一個同名的雲函數並上傳部署,否則在十多分鍾內會出現雲函數調用失敗的情況,建議換一個雲函數名,比如login換成user,在小程序端使用 wx.cloud.callFunction({name: ''})調用雲函數時把name的值換成user就可以了

調用雲函數時,我們還可以在開發者工具調試面板的NetWork標簽查看調用雲函數的情況。

3、

獲取用戶高清頭像

我們發現獲取到的頭像不是很清晰,這是因為默認的頭像大小為 132132(UserInfo 用戶頭像說明),如果把 avatarUrl 鏈接后面的 132 修改為 0 就能獲取到 640640 大小的頭像了:

  getUserInfomation: function (event) { let { avatarUrl, city, nickName}= event.detail.userInfo avatarUrl = avatarUrl.split("/") avatarUrl[avatarUrl.length - 1] = 0; avatarUrl = avatarUrl.join('/'); this.setData({ avatarUrl,city, nickName }) }, 

 4、

頁面加載時就顯示用戶信息

在獲得了用戶授權和用戶信息的情況下,刷新頁面或進行頁面跳轉,用戶的個人信息還是不會顯示,這是因為 getUserInfomation 事件處理函數點擊組件時才觸發,我們需要在頁面加載時也能觸發獲取用戶信息才行。

我們可以在 login.js 的 onLoad 生命周期函數里輸入以下代碼,當用戶授權之后來調用 wx.getUserInfo() API:

wx.getSetting({
  success: res => {
    if (res.authSetting['scope.userInfo']) { wx.getUserInfo({ success: res => { let { avatarUrl, city, nickName } =res.userInfo this.setData({ avatarUrl, city, nickName }) } }) } } }); 

這樣當我們加載頁面時,用戶的信息就能顯示出來了,不過這里的頭像是從 API 里重新取的,也會不清晰。我們當然可以像之前一樣把頭像的鏈接替換一下,但是如果每個頁面都這么寫就會很麻煩,解決的方法有 2 種,一種是把高清頭像存儲到緩存里,還有一種是把代碼封裝成一個組件(大家可以自己研究如何自定義組件了)。

5、

雲存儲的二級目錄

在存儲里我們都是把所有的圖片放在根目錄下,沒有二級目錄,那我們能不能建一個二級目錄呢?當然是可以的,我們可以在 cloudPath 的前面加一個文件路徑就可以了,比如:

const cloudPath = `cloudbase/${Date.now()}-${Math.floor(Math.random(0, 1) * 1000)}` + filePath.match(/\.[^.]+?$/)[0]
6、

雲函數調用數據庫

使用雲函數也可以調用數據庫,使用開發者工具右鍵點擊雲函數根目錄也就是 cloudfunctions 文件夾,選擇新建 Node.js 雲函數,雲函數的名稱命名為 zhihu_daily,然后打開 index.js,輸入以下代碼:

const cloud = require('wx-server-sdk') cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) const db = cloud.database() exports.main = async (event, context) => { return await db.collection('zhihu_daily') .get() }

第三部分:數據庫基礎能力介紹

數據庫權限管理

 

 

 

 

 

 

 

 

 

 

 

 雲開發控制台內修改數據庫權限

 

 

正則表達式

 

 

 

 

 

 

地理位置查詢

 

 

 

 

數組查詢

 

 

 

 

 

 

字段類型查詢

 

 

 

 沒有該字段的記錄會只顯示ID

 

 第四部分:存儲基礎能力介紹

1 雲開發基礎能力展示·文件存儲

 

 

 

 2 雲開發基礎能力展示·生成臨時鏈接

 

 

 

第五部分:雲函數基礎能力介紹

在雲函數中查詢數據

 

 

 

 

雲開發基礎能力展示 - 雲函數定時器的使用

 

 

 

 

 

 

 

 

 演示

1、新建雲函數

2、index.js中隨便打印點什么,右鍵新建的雲函數目錄點擊 上傳並部署:雲端安裝依賴(......)

 

 

 3、config.json配置觸發器參數,右鍵config.json 上傳觸發器

 

 

 4、查看日志,會發現隔幾秒就會產生一個日志(記錄日志會消耗時間)

 

 

 第六部分:雲開發進階學習

雲開發雲函數定時觸發器講解

https://developers.weixin.qq.com/community/business/doc/000002fecc0200bd1cca5ac575b40d

筆記:

1、

雲函數目錄里的 config.json 文件可以用來配置權限和定時觸發器,如果你的雲函數目錄下面沒有這個配置文件,可以自己創建一個,創建的結構目錄如下:

test //雲函數目錄

├── config.json //權限和定時觸發器等的配置文件 ├── index.js //雲函數 ├── package.json //雲函數的依賴管理

2、

2、Cron 表達式語法

Cron 表達式有七個必填字段,按空格分隔,既不能多寫也不能少寫,每一個字段都有它的含義對應着不同的時間點,表達式的取值都為整數且為時間制的范圍(注意月在星期的前面):

第一位第二位第三位第四位第五位第六位第七位秒(0-59 )分鍾(0-59)小時(0-23)日(1-31)月(1-12或三個字母的英文縮寫)星期(0-6或三個字母的英文縮寫)年(1970~2099 )

下面是 cron 表達式的案例,以及我們需要了解一下 cron 表達式里的通配符以及直接寫數字的含義:

  • ,,表示並集,在時間的表述里是“”的意思,比如在“小時”字段中, 1,2,3表示 1 點、2 點和 3 點;
  • -,指定范圍的所有值,在時間的表述里是“”的意思,比如在“日”字段中,1-15包含指定月份的 1 號到 15 號;
  • *,表示所有值,在時間的表述里是“”的意思,比如在“小時”字段中,*表示每小時;
  • /,指定步長,在時間的表述里是“”的意思,比如在“秒”字段中,*/5表示每隔 5 秒;
  • 直接寫數字,在時間的表述里是“”(時間點)的意思,比如在“月”字段中,5表示每月的第 5 日;
//表示每隔5秒觸發一次,

*/5  *  * * * * * //表示在每月的1日的凌晨2點觸發 0 0 2 1 * * * //表示在周一到周五每天上午10:15觸發 0 15 10 * * MON-FRI * //表示在每天上午10點,下午2點,4點觸發 0 0 10,14,16 * * * * //表示在每天上午9點到下午5點內每半小時觸發 0 */30 9-17 * * * * //表示在每個星期三中午12點觸發 0 0 12 * * WED * 
定時觸發器的 Cron 語法 沒法實現 每隔 90 秒鍾或 90 分鍾發送一次這樣的效果,因為 90 秒超過了秒的時間制上限 60,而 cron 在跨位組合(比如 90 秒需要結合秒和分)上無法覆蓋所有的時間;除此之外,雲開發的觸發器暫時不支持多個定時觸發器的疊加;在 Cron 表達式中的“日”和“星期”字段同時指定值時,兩者為“或”的關系,即兩者的條件均生效;值得一提的是,盡管雲函數的時區為 UTC+0 時區,但是定時觸發器的時間還是北京時間。

雲開發基礎Node.js

1、

Nodejs 的內置模塊

在前面我們已經接觸過 Nodejs 的 fs 模塊、path 模塊,這些我們稱之為 Nodejs 的內置模塊,內置模塊不需要我們使用 npm install 下載,就可以直接使用 require 引入:

const fs = require('fs') const path = require('path') 

Nodejs 的常用內置模塊以及功能如下所示,這些模塊都是可以在雲函數里直接使用的:

  • fs 模塊:文件目錄的創建、刪除、查詢以及文件的讀取和寫入,下面的 createReadStream 方法類似於讀取文件,
  • path 模塊:提供了一些用於處理文件路徑的 API
  • url 模塊:用於處理與解析 URL
  • http 模塊:用於創建一個能夠處理和響應 http 響應的服務
  • querystring 模塊:解析查詢字符串
  • until 模塊 :提供用於解析和格式化 URL 查詢字符串的實用工具;
  • net 模塊:用於創建基於流的 TCP 或 IPC 的服務器
  • crypto 模塊:提供加密功能,包括對 OpenSSL 的哈希、HMAC、加密、解密、簽名、以及驗證功能的一整套封裝
在雲函數中使用 HTTP 請求訪問第三方服務可以不受域名限制,即不需要像小程序端一樣,要將域名添加到 request 合法域名里;也不受 http 和 https 的限制,沒有域名只有 IP 都是可以的,所以雲函數可以應用的場景非常多,即能方便的調用第三方服務,也能夠充當一個功能復雜的完整應用的后端。不過需要注意的是,雲函數是部署在雲端,有些局域網等終端通信的業務只能在小程序里進行。

 

2、

常用變量

module、exports、require

Lodash 實用工具庫

moment 時間處理

獲取公網 IP

Buffer 文件流

圖像處理 sharp

連接數據庫 MySQL

二維碼 qrcode

郵件處理

Excel 文檔處理

HTTP 處理

加解密 Crypto 

發短信

雲開發雲存儲入門講解

https://developers.weixin.qq.com/community/business/doc/0004aef3190980fd15ca80b6d51c0d

雲開發實時數據推送講解

https://developers.weixin.qq.com/community/business/doc/000860c44d0a881d17ca2d02c5100d

2、實時數據推送注意事項

01實時數據推送只支持小程序端(Web 端)

實時數據推送的 watch 請求只支持在小程序端(Web 端)等前端調用,不支持雲函數端。

雲開發安全規則講解

https://developers.weixin.qq.com/community/business/doc/000eaa8ba2c9482d16ca7dab456c0d

1、查詢寫入都需明確指定 openid

2、doc 操作需轉為 where 操作

3、嵌套數組對象里的 openid

在使用簡易權限配置時,用戶在小程序端往數據庫里寫入數據時,都會給記錄 doc 里添加一個_openid 的字段來記錄用戶的 openid,使用安全規則之后同樣也是如此。在創建記錄時,可以把{openid}變量賦值給非_openid 的字段或者寫入到嵌套數組里,后台寫入記錄時發現該字符串時會自動替換為小程序用戶的 openid:

db.collection("posts").add({
  data: {
    books: [
      {
        title: "雲開發快速入門", author: "{openid}", }, { title: "數據庫入門與實戰", author: "{openid}", }, ], }, }); 

以往要進行 openid 的寫入操作時需要先通過雲函數返回用戶 openid,使用安全規則之后,直接使用{openid}變量即可,不過該方法僅支持 add 添加一條記錄時,不支持 update 的方式。

 

 

 

 

 

 

 

 

 

 

 
 
 
 
 
 
 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM