學(xué)習(xí)視頻：

• 八分鐘讀懂云開(kāi)發(fā)_嗶哩嗶哩_bilibili
• 小姐姐帶你30分鐘創(chuàng)建并上線小程序項(xiàng)目【云開(kāi)發(fā)實(shí)戰(zhàn)】_嗶哩嗶哩_bilibili

參考資料：

• 微信開(kāi)放文檔 (qq.com)
• 云開(kāi)發(fā)_百度百科 (baidu.com)

推薦閱讀：

• 云原生推動(dòng)全云開(kāi)發(fā)與實(shí)踐 - 知乎 (zhihu.com)
• 云開(kāi)發(fā) - 騰訊云 (tencent.com)

項(xiàng)目源碼：關(guān)注公眾號(hào)BaretH后臺(tái)回復(fù) 云開(kāi)發(fā) 獲取

當(dāng)今時(shí)代，千行百業(yè)都在擁抱云計(jì)算和云原生，進(jìn)行數(shù)字化創(chuàng)新和升級(jí)。我們也在前一篇文章中了解到底什么是云原生以及其一系列的技術(shù)棧與方法論，還不太了解的同學(xué)可以看看 硬核科普：到底啥是云原生？隨著云和軟件即服務(wù)的宏觀趨勢(shì)的結(jié)合及技術(shù)的進(jìn)步，云原生給全生命周期帶來(lái)了一個(gè)全新開(kāi)發(fā)標(biāo)準(zhǔn)解決方案—云開(kāi)發(fā)。本節(jié)內(nèi)容我們就來(lái)聊聊云開(kāi)發(fā)，并用云開(kāi)發(fā)開(kāi)發(fā)一個(gè)簡(jiǎn)單的微信小程序～本教程將圍繞著騰訊云及其一系列服務(wù)展開(kāi)。

1. 什么是云開(kāi)發(fā)

百度百科：云開(kāi)發(fā)（CloudBase）是云端一體化的后端云服務(wù) ，采用 serverless 架構(gòu)，免去了移動(dòng)應(yīng)用構(gòu)建中繁瑣的服務(wù)器搭建和運(yùn)維。同時(shí)云開(kāi)發(fā)提供的靜態(tài)托管、命令行工具（CLI）、Flutter SDK 等能力降低了應(yīng)用開(kāi)發(fā)的門檻。使用云開(kāi)發(fā)可以構(gòu)建完整的小程序/小游戲、H5、Web、移動(dòng) App 等應(yīng)用。

我們來(lái)理解一下官方定義中的最重要的兩個(gè)概念：

• 云端一體化的后端云服務(wù)：說(shuō)白了就是云開(kāi)發(fā)為開(kāi)發(fā)者提供完整原生云后端服務(wù)支持，也就是我們開(kāi)發(fā)已經(jīng)在全部部署好的后端環(huán)境中進(jìn)行，只需要由前端程序員專注于業(yè)務(wù)邏輯的編寫(xiě)，弱化了后端和運(yùn)維的概念。
• 一站式 Serverless 服務(wù)：serverless 即無(wú)服務(wù)，意思就是開(kāi)發(fā)者無(wú)需購(gòu)買數(shù)據(jù)庫(kù)、存儲(chǔ)等基礎(chǔ)設(shè)施服務(wù)，無(wú)需搭建服務(wù)器即可使用，云開(kāi)發(fā)已為上述服務(wù)提供了完整的云端支持，能輕松實(shí)現(xiàn)快速上線與迭代。

那么為什么要使用云開(kāi)發(fā)呢？

• 因?yàn)樵崎_(kāi)發(fā)只關(guān)注業(yè)務(wù)邏輯，效率更高，開(kāi)發(fā)成本也更低，直接以函數(shù)的形式調(diào)用云端服務(wù)。

云開(kāi)發(fā)有哪些應(yīng)用場(chǎng)景呢？

• 微信小程序

  云開(kāi)發(fā)為小程序開(kāi)發(fā)者提供完整的原生云端支持和微信服務(wù)支持。

• 微信公眾號(hào)/H5 應(yīng)用/PC Web 應(yīng)用

  云開(kāi)發(fā)為 H5 類應(yīng)用提供豐富 SDK 能力，可作為公眾號(hào)后臺(tái)，普通 H5 應(yīng)用，H5 活動(dòng)頁(yè)，同時(shí)也支持作為 PC Web 后臺(tái)應(yīng)用，例如 Web 管理系統(tǒng)，Web 網(wǎng)站等。

• 移動(dòng)應(yīng)用

  云開(kāi)發(fā)推出了 Flutter SDK，在 iOS、Android 等移動(dòng)應(yīng)用平臺(tái)中集成，可以方便使用云函數(shù)、云存儲(chǔ)等能力

2. 對(duì)比傳統(tǒng)開(kāi)發(fā)模式

我們來(lái)對(duì)比一下云開(kāi)發(fā)的模式與傳統(tǒng)的開(kāi)發(fā)模式：

傳統(tǒng)開(kāi)發(fā)有5個(gè)步驟：首先產(chǎn)品經(jīng)理對(duì)產(chǎn)品進(jìn)行需求設(shè)計(jì)，然后由后端開(kāi)發(fā)工程師針對(duì)需求進(jìn)行API開(kāi)發(fā)，再進(jìn)行后端的部署上線，再由前端工程師完成前端頁(yè)面設(shè)計(jì)與數(shù)據(jù)請(qǐng)求，最后才是正式發(fā)布。而云開(kāi)發(fā)的只需要3個(gè)步驟：首先也是產(chǎn)品經(jīng)理對(duì)產(chǎn)品進(jìn)行需求設(shè)計(jì)，然后交給前端工程師進(jìn)行開(kāi)發(fā)，開(kāi)發(fā)完成后即可正式發(fā)布。

可以看到，傳統(tǒng)開(kāi)發(fā)模式對(duì)于產(chǎn)品開(kāi)發(fā)周期是相對(duì)比較長(zhǎng)的，而使用云開(kāi)發(fā)大大減少了開(kāi)發(fā)步驟與開(kāi)發(fā)難度， 而是更注重于業(yè)務(wù)邏輯，使一個(gè)人實(shí)現(xiàn)全棧開(kāi)發(fā)變得可能。而這一切的原因正是因?yàn)樵崎_(kāi)發(fā)提供完整的后端云服務(wù)，提供數(shù)據(jù)庫(kù)、存儲(chǔ)、函數(shù)、靜態(tài)托管等基礎(chǔ)能力，以及擴(kuò)展能力；無(wú)需管理基礎(chǔ)架構(gòu)。相比較傳統(tǒng)的開(kāi)發(fā)模式，云開(kāi)發(fā)至少可節(jié)省50%的人力成本、交付效率提升70%。

云開(kāi)發(fā)與傳統(tǒng)的前后端開(kāi)發(fā)模式天然互補(bǔ)。基于云開(kāi)發(fā)構(gòu)建應(yīng)用層/服務(wù)中臺(tái)，能夠彌補(bǔ)傳統(tǒng)開(kāi)發(fā)模式的“效率低、耗時(shí)多、依賴后臺(tái)、不夠靈活”等問(wèn)題，更快響應(yīng)業(yè)務(wù)需求。

3. 云開(kāi)發(fā)的三個(gè)重要部分

1. 云存儲(chǔ)：高擴(kuò)展性、低成本、可靠和安全的文件存儲(chǔ)服務(wù)，可快速的實(shí)現(xiàn)文件上傳下載、文件管理功能。

2. 云函數(shù)：在騰訊云基礎(chǔ)設(shè)施上彈性、安全地運(yùn)行云端代碼，提供的云函數(shù)能力無(wú)需購(gòu)買、搭建服務(wù)器即可快速運(yùn)行開(kāi)發(fā)者自定義函數(shù)。

   函數(shù)通俗來(lái)說(shuō)就是能重復(fù)使用的，實(shí)現(xiàn)了某個(gè)功能的代碼塊，也就是為了實(shí)現(xiàn)某個(gè)功能而提前將代碼封裝好。而云函數(shù)就是將函數(shù)放在了云端。

3. 云數(shù)據(jù)庫(kù)：高性能的數(shù)據(jù)庫(kù)讀寫(xiě)服務(wù)，可以直接在客戶端對(duì)數(shù)據(jù)進(jìn)行讀寫(xiě)，無(wú)需關(guān)心數(shù)據(jù)庫(kù)實(shí)例和環(huán)境

4. 云開(kāi)發(fā)服務(wù)介紹

隨著云開(kāi)發(fā)的快速接入，開(kāi)發(fā)者可以直接以函數(shù)的形式調(diào)用并使用已經(jīng)集成好的服務(wù)，比如音視頻服務(wù)（提供高品質(zhì)、實(shí)時(shí)音視頻通話服務(wù)）、智能圖像服務(wù)（集成智能鑒別、人臉識(shí)別等AI能力），當(dāng)然不僅如此，還有很多其他的技術(shù)集成服務(wù)，通過(guò)云開(kāi)發(fā)我們可以直接騰訊的技術(shù)團(tuán)隊(duì)過(guò)去數(shù)十年在人工智能、圖像處理、音視頻服務(wù)等領(lǐng)域積累下來(lái)的技術(shù)積累，這樣可以大大在傳統(tǒng)模式下對(duì)先進(jìn)技術(shù)摸索的時(shí)間。

因此使用云開(kāi)發(fā)，就是站在騰訊技術(shù)團(tuán)隊(duì)這個(gè)巨人的肩膀上去利用技術(shù)解決產(chǎn)品的需求。

5. 使用云開(kāi)發(fā)的開(kāi)發(fā)流程

使用云開(kāi)發(fā)進(jìn)行小程序、小游戲開(kāi)發(fā)的基礎(chǔ)步驟十分簡(jiǎn)單，如下圖所示：

接下來(lái)我們以一個(gè)簡(jiǎn)單的微信小程序?yàn)槔?，帶大家體驗(yàn)一下云開(kāi)發(fā)的魅力！

6. 云開(kāi)發(fā)實(shí)例—小程序?qū)崙?zhàn)

1. 項(xiàng)目介紹

該項(xiàng)目分為三個(gè)頁(yè)面：首頁(yè)、日志頁(yè)面、我的頁(yè)面。我的頁(yè)面點(diǎn)擊登錄會(huì)展示用戶頭像和用戶昵稱，在首頁(yè)點(diǎn)擊+1或者-1的按鈕，在日志頁(yè)面會(huì)同步顯示我們點(diǎn)擊的日志。

2. 創(chuàng)建項(xiàng)目、云開(kāi)發(fā)初始化、頁(yè)面初始化

云開(kāi)發(fā)小程序可以理解為微信官方為我們提供了一個(gè)免費(fèi)的服務(wù)器并幫我們部署好了小程序環(huán)境，它將服務(wù)器的一些功能比如增刪改查操作都封裝成了接口供我們直接操作，對(duì)于小程序的上線訪問(wèn)，我們也不需要自己的域名和服務(wù)器，一件部署即可讓別人通過(guò)微信搜索到并訪問(wèn)。

創(chuàng)建云開(kāi)發(fā)項(xiàng)目首先需要 注冊(cè)一個(gè)小程序賬號(hào) 并且下載 微信開(kāi)發(fā)者工具

首先我們來(lái)創(chuàng)建一個(gè)小程序項(xiàng)目，首先起一個(gè)項(xiàng)目名稱，然后填入AppID，也就是小程序ID，注意后端服務(wù)這里選擇不使用云服務(wù), 因?yàn)槿绻x擇微信云開(kāi)發(fā)的話，系統(tǒng)會(huì)為我們創(chuàng)建許多使用不到的模版，刪除比較麻煩，所以我們選擇不使用云服務(wù)，自己去配置云開(kāi)發(fā)的環(huán)境。模版選擇的話選擇不使用模版。

創(chuàng)建完成后如下圖所示，然后我們點(diǎn)擊云開(kāi)發(fā)按鈕開(kāi)通云開(kāi)發(fā)的功能服務(wù)。

然后我們新建一個(gè)環(huán)境，這里設(shè)置為test，然后會(huì)對(duì)應(yīng)一個(gè)唯一環(huán)境ID，這樣云開(kāi)發(fā)的后臺(tái)就創(chuàng)建完成。

接下來(lái)來(lái)進(jìn)行云開(kāi)發(fā)的初始化，我們?cè)陧?xiàng)目根目錄下添加一個(gè)云開(kāi)發(fā)的文件夾cloud，然后在project.config.json中配置該文件夾的路徑。

保存 project.config.json 文件后，即可看到 cloud 文件夾上有云的標(biāo)志以及當(dāng)前的云環(huán)境

然后我們刪除 app.js 文件中 onLauch() 方法中的所有代碼，然后我們?cè)谄渲刑砑哟a，指定云開(kāi)發(fā)的環(huán)境。

// app.js
App({
 onLaunch() {
    wx.cloud.init({
      env: 'test-0gk0wv6540874698',  // 用env指定云開(kāi)發(fā)環(huán)境id
      traceUser: true  // 表示將用戶訪問(wèn)接入到用戶管理中
    })
 }
})

接下來(lái)我們進(jìn)行頁(yè)面的初始化，默認(rèn)已經(jīng)包含了index和logs頁(yè)面，還缺少一個(gè)me我的頁(yè)面，我們?cè)?pages 目錄下新建me文件夾，然后在me文件夾新建一個(gè)名為 me 的 page，這樣就會(huì)在 me 文件夾下生成四個(gè) me 的文件，在 app.json 中的 pages 對(duì)象里面也會(huì)自動(dòng)將 me 頁(yè)面的路徑加上。

然后我們?cè)傩陆ㄒ粋€(gè) images 文件夾來(lái)存放圖片，我們將準(zhǔn)備好的照片粘貼進(jìn)去。

接下來(lái)我們?cè)?app.json 文件中修改一下導(dǎo)航欄的標(biāo)題和顏色，然后加上一個(gè)tab底部導(dǎo)航欄

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/me/me"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#EA5149",	// 導(dǎo)航欄背景顏色
    "navigationBarTitleText": "BaretH",	// 導(dǎo)航欄標(biāo)題
    "navigationBarTextStyle": "black"
  },
  "tabBar": {	// 底部導(dǎo)航欄配置
    "list": [{
      "pagePath": "pages/index/index",	// 頁(yè)面路徑
      "text": "首頁(yè)",	// 標(biāo)題
      "iconPath": "images/binggan.png",	// 不點(diǎn)擊時(shí)顯示的圖片
      "selectedIconPath": "images/binggan-active.png"	// 點(diǎn)擊時(shí)顯示的圖片
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "images/danhuang.png",
      "selectedIconPath": "images/danhuang-active.png"
    }, {
      "pagePath": "pages/me/me",
      "text": "我的",
      "iconPath": "images/huasheng.png",
      "selectedIconPath": "images/huasheng-active.png"
    }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

編輯完保存即可看到效果

3. 登錄功能（云函數(shù)創(chuàng)建和調(diào)用）

登陸功能的實(shí)現(xiàn)在 me 頁(yè)面中完成，首先刪除 pages/me/me.wxml中的內(nèi)容，然后我們添加一個(gè)登陸按鈕

<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">登陸</button>

這里登陸按鈕綁定了一個(gè)onGotUserInfo方法，我們?cè)谠摲椒ɡ铽@取用戶信息，我們清空 me.js 的內(nèi)容，在其中實(shí)現(xiàn)該方法

Page({
  data: {
    userInfo: {} // 保存用戶信息的變量
  },
  onGotUserInfo: function (e) { // 一定要傳遞參數(shù)e
    this.setData({
      userInfo: e.detail.userInfo // 將用戶信息保存在userInfo里面
    })
    console.log(this.data.userInfo)
  }
})

這里將獲取到的用戶進(jìn)行進(jìn)行打印來(lái)判斷是否成功：可以看到成功獲取到了用戶信息，但是缺少最終的 openID 信息，他是用戶身份信息的唯一標(biāo)識(shí)

openID 屬于比較私密的信息，我們需要通過(guò)wx服務(wù)器獲取，也就是需要通過(guò)云函數(shù)來(lái)獲取，我們?cè)?cloud 文件夾下來(lái)新建一個(gè)云函數(shù) login

然后系統(tǒng)為自動(dòng)幫我們創(chuàng)建以下三個(gè)文件，其中我們主要進(jìn)行操作的就是index.js文件

查看默認(rèn)的 index.js，可以看到默認(rèn)創(chuàng)建的代碼里面已經(jīng)獲取了 openID，我們只需要留下這一行代碼即可

云函數(shù)修改完成后，一定要右鍵點(diǎn)擊該函數(shù)選擇上傳和部署才能使用

然后我們需要修改 me.js，在其中調(diào)用云函數(shù)來(lái)獲取 openID 信息

Page({
  data: {
    userInfo: {}, // 保存用戶信息的變量
    openID: "" // 保存用戶openID信息
  },
  onGotUserInfo: function (e) { // 一定要傳遞參數(shù)e
    const that = this // 保存this對(duì)象
    // 調(diào)用云函數(shù)
    wx.cloud.callFunction({
      name: "login",
      success: res => {
        console.log("云函數(shù)調(diào)用成功")
        that.setData({
          openID: res.result.openid, // 將用戶openID保存在opendID里面
          userInfo: e.detail.userInfo // 將用戶信息保存在userInfo里面
        })
        console.log(this.data.userInfo, this.data.openID)
      },
      fail: res => {
        console.log("云函數(shù)調(diào)用失敗")
      }
    })
  }
})

然后我們進(jìn)行測(cè)試，可以在控制臺(tái)看到成功獲取了 userInfo 和 openID

然后我們編寫(xiě) me.wxml 文件，實(shí)現(xiàn)如果獲取到 openID 就不顯示登陸按鈕，如果沒(méi)有獲取到 openID 就顯示用戶頭像和昵稱

<view wx:if="{{!openID}}">
  <button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">
    登陸
  </button>
</view>
<view class="uploader-container" wx:if="{{openID}}">
  <image class="image" src="{{userInfo.avatarUrl}}"></image>
  <view class="name">{{userInfo.nickName}}</view>
</view>

對(duì)應(yīng)的樣式文件 me.wxss

/* pages/me/me.wxss */

.image {
   width: 100px;
   height: 100px;
   margin: 0 auto;
   display: block;
   padding-top: 20px;
}

.name {
   text-align: center;
   padding-top: 10px;
}

button {
   background: #ea5149;
   width: 60%;
   margin-top: 100px;
   color: #fff;
}

然后我們保存測(cè)試，點(diǎn)擊登陸即可顯示用戶頭像和昵稱。

但是此時(shí)還是有一個(gè)問(wèn)題，就是當(dāng)我們刷新頁(yè)面后，這里點(diǎn)擊編譯，獲取到的用戶信息就會(huì)清空

如果我們想要刷新后還能保持用戶的登錄狀態(tài)，我們應(yīng)該將用戶信息存入緩存中，這樣用戶信息只需要從緩沖中獲取即可，而不需要每次重新請(qǐng)求后端進(jìn)行獲取。

這里通過(guò)首先將 userInfo 和 openID 合并到一起，將 openID 作為 userInfo 的一個(gè)字段存入，然后將 userInfo 通過(guò)云函數(shù)存入緩存中。最后新增一個(gè) onLoad 方法，用于在頁(yè)面加載的時(shí)候就獲取用戶信息并賦值給 userInfo 變量

完整代碼如下：

Page({
  data: {
    userInfo: {}, // 保存用戶信息的變量
    openID: "" // 保存用戶openID信息
  },
  onGotUserInfo: function (e) { // 一定要傳遞參數(shù)e
    const that = this // 保存this對(duì)象
    // 調(diào)用云函數(shù)
    wx.cloud.callFunction({
      name: "login",
      success: res => {
        console.log("云函數(shù)調(diào)用成功")
        that.setData({
          openID: res.result.openid, // 將用戶openID保存在opendID里面
          userInfo: e.detail.userInfo // 將用戶信息保存在userInfo里面
        })
        that.data.userInfo.openID = that.data.openID // 將openID作為一個(gè)字段加入userInfo中
        console.log(that.data.userInfo)
        wx.setStorageSync('userInfo', that.data.userInfo) // 將userInfo保存至緩存中
      },
      fail: res => {
        console.log("云函數(shù)調(diào)用失敗")
      }
    })
  },
  // 頁(yè)面加載時(shí)執(zhí)行
  onLoad: function (options) {
    // 從緩存中獲取userInfo
    const userInfoFromStorage = wx.getStorageSync("userInfo")
    this.setData({
      userInfo: userInfoFromStorage,
      openID: userInfoFromStorage.openID
    })
  }
})

然后我們?cè)俅螠y(cè)試，可以看到調(diào)試器storage緩存中有userInfo信息，并且我們點(diǎn)擊編譯，用戶仍處于已經(jīng)登陸狀態(tài)

4. 點(diǎn)擊按鈕生成記錄數(shù)據(jù)（云數(shù)據(jù)庫(kù)的插入）

該部分主要操作index文件夾，首先清空 index.wxml 文件，然后添加兩個(gè)標(biāo)簽

<view class="container">
  <view class="right button">+1</view>
  <view class="left button">-1</view>
</view>

然后清空 index.wxss，編寫(xiě)對(duì)應(yīng)的樣式文件

.button {
  width: 70px;
  height: 70px;
  line-height: 70px;
  border-radius: 20%;
  border: none;
  text-align: center;
  font-size: 25px;
  color: #fff;
  font-weight: bold;
  margin-top: 50px;
}

.right {
  background: #ea5149;
  float: right;
}

.left {
  background: #feb600;
}

到此基本頁(yè)面編寫(xiě)完成

然后我們修改 index.wxml，給這兩個(gè)標(biāo)簽綁定兩個(gè)函數(shù)，并設(shè)置對(duì)應(yīng)的參數(shù)：

<view class="container">
  <!--bindtap綁定點(diǎn)擊事件addLog()方法 傳遞參數(shù)data-add  add是自己定義的-->
  <view class="right button" bindtap="addLog" data-add="1">+1</view>
  <view class="left button" bindtap="addLog" data-add="-1">-1</view>
</view>

然后清空 index.js，在其中添加綁定的 addLog 方法：

Page({
  // event表示前端傳過(guò)來(lái)的參數(shù)
  addLog(event) {
    // 獲取add參數(shù)
    const add = event.currentTarget.dataset.add
    console.log(add)
  }
})

然后我們?cè)谡{(diào)試器進(jìn)行測(cè)試，可以看到點(diǎn)擊 +1 按鈕控制臺(tái)就打印 1，點(diǎn)擊 -1 按鈕控制臺(tái)就打印 -1

接下來(lái)我們將這些數(shù)據(jù)插入到數(shù)據(jù)庫(kù)中，我們進(jìn)入云開(kāi)發(fā)的后臺(tái)，點(diǎn)擊數(shù)據(jù)庫(kù)，然后添加一個(gè)集合logs

然后設(shè)置集合的權(quán)限為：所有用戶可讀、僅創(chuàng)建者可寫(xiě)

設(shè)置完成后，我們新建一個(gè)云函數(shù)createlog，功能就是向前面創(chuàng)建的 logs 集合中插入數(shù)據(jù)，數(shù)據(jù)形式包含三個(gè)字段：add參數(shù)、點(diǎn)擊時(shí)間、點(diǎn)擊者的open ID。我們修改其中的 index.js 文件：

// 云函數(shù)入口文件
const cloud = require('wx-server-sdk')
cloud.init({
  env: 'test-0gk0wv6540874698'
})
const db = cloud.database() // 獲取數(shù)據(jù)庫(kù)連接對(duì)象

// 云函數(shù)入口函數(shù)（event從前端傳s遞來(lái)的數(shù)據(jù)）
exports.main = async (event, context) => {
  try {
    // await搭配async-->異步等待：需要執(zhí)行完await后的語(yǔ)句,才可以往下執(zhí)行
    return await db.collection('logs').add({ // db-數(shù)據(jù)庫(kù)、指定logs集合 在集合中創(chuàng)建一條語(yǔ)句add
      data: { // 插入的數(shù)據(jù)放在data中
        add: event.add, // 點(diǎn)擊的參數(shù)
        date: event.date, // 點(diǎn)擊時(shí)間 
        openID: event.openID // 點(diǎn)擊者的openID
      },
      success: function (res) {
        // res 是一個(gè)對(duì)象，其中有 _id 字段標(biāo)記剛創(chuàng)建的記錄的 id
        console.log(res)
      }
    })
  } catch (e) {
    console.log(e)
  }
}

編輯完成后記得右鍵上傳部署：

然后我們回到pages/index/index.js來(lái)調(diào)用上述craetelog云函數(shù)，傳送上述 data 中的三個(gè)字段信息

Page({
  // event表示前端傳過(guò)來(lái)的參數(shù)
  addLog(event) {
    // 獲取add參數(shù)
    const add = event.currentTarget.dataset.add
    console.log(add)
    // 獲取緩存信息
    const ui = wx.getStorageSync("userInfo")
    // 根據(jù)緩存判斷用戶是否登陸
    if (!ui.openID) {
      // 如果沒(méi)有登陸跳轉(zhuǎn)到me我的頁(yè)面
      wx.switchTab({
        url: '/pages/me/me',
      })
      // 如果已經(jīng)登陸則請(qǐng)求云函數(shù)createlog向數(shù)據(jù)庫(kù)中插入data
    } else {
      wx.cloud.callFunction({
        name: "createlog",
        data: {
          add: add,
          date: Date.now(),
          openID: ui.openID // 從緩存中獲取到openID字段
        }
      })
    }
  }
})

編寫(xiě)完成后我們進(jìn)行測(cè)試，點(diǎn)擊 +1、-1 的按鈕即可在云數(shù)據(jù)庫(kù)中看到數(shù)據(jù)的變更：

5. 將記錄數(shù)據(jù)展示到頁(yè)面上（云數(shù)據(jù)庫(kù)的讀?。?/h3>

接下來(lái)我們將插入的這些數(shù)據(jù)展示到日志頁(yè)面中，該部分主要操作logs文件夾

我們同樣適用云函數(shù)來(lái)獲取數(shù)據(jù)，首先新建一個(gè) Node.js 云函數(shù)，命名為getlog，然后編寫(xiě)其中的index.js 文件，在其中實(shí)現(xiàn)通過(guò)前端傳遞過(guò)來(lái)的 openID 字段來(lái)獲取用戶所有的日志信息。

// 云函數(shù)入口文件
const cloud = require('wx-server-sdk')
cloud.init({
  env: 'test-0gk0wv6540874698'
})
const db = cloud.database() // 初始化數(shù)據(jù)庫(kù)

// 云函數(shù)入口函數(shù)
// 功能：通過(guò)從前端傳遞過(guò)來(lái)的openid字段獲取用戶的所有信息
exports.main = async (event, context) => {
  try {
    return await db.collection('logs').where({ // 查詢語(yǔ)句
      openID: event.openID
    }).get()
  } catch (e) {
    console.log(e)
  }
}

編寫(xiě)完成記得保存并上傳部署，接下來(lái)修改pages/logs/logs.js文件，在其中調(diào)用 getlogs 云函數(shù)，其中要傳送用戶的 openID 信息，并且當(dāng) getlogs 函數(shù)執(zhí)行成功時(shí)我們將獲取到的日志信息存儲(chǔ)在 logs 變量中

// logs.js
const util = require('../../utils/util.js')

Page({
  data: {
    logs: []
  },
  getlogs: function () {
    const that = this
    const ui = wx.getStorageSync("userInfo") // 從緩存中獲取userInfo
    // 通過(guò)緩存中的openID判斷用戶是否登陸
    // 用戶未登錄則跳轉(zhuǎn)到me頁(yè)面
    if (!ui.openID) {
      wx.switchTab({
        url: '/pages/me/me',
      })
      // 用戶已登陸則調(diào)用getlogs云函數(shù)
    } else {
      wx.cloud.callFunction({
        name: "getlogs",
        // data對(duì)象——需要向getlogs云函數(shù)傳遞openID數(shù)據(jù)
        data: {
          openID: ui.openID
        },
        // 云函數(shù)執(zhí)行成功
        success: res => {
          console.log("res", res)
          that.setData({ // 給logs數(shù)組賦值---數(shù)組處理使用map
            logs: res.result.data.map(log => {
              // 格式化date變量 調(diào)用util中的formatTime()方法
              var date = util.formatTime(new Date(log.date))
              log.date = date //更新數(shù)據(jù)
              return log
            })
          })
        },
        // 云函數(shù)執(zhí)行失敗
        fail: res => {
          console.log("res", res)
        }
      })
    }
  },
  // onLoad 頁(yè)面首次加載的時(shí)候執(zhí)行
  // onShow 頁(yè)面每次切換的時(shí)候執(zhí)行
  onShow: function () { // 使用onShow聲明周期函數(shù)設(shè)置在頁(yè)面加載的時(shí)候會(huì)自動(dòng)執(zhí)行
    this.getlogs()
  }
})

然后我們修改一些logs.wxml頁(yè)面，遍歷 logs 變量，展示信息

<!--logs.wxml-->
<block wx:for="{{logs}}" wx:key="log">
  <view class="log-item">
    日期:{{item.date}} 分?jǐn)?shù):{{item.add}}
  </view>
</block>

然后我們進(jìn)行測(cè)試即可看到已經(jīng)成功實(shí)現(xiàn)：

---

6. 項(xiàng)目部署上線

到此小項(xiàng)目已經(jīng)完成了，最后我們將其部署上線，首先我們來(lái)真機(jī)調(diào)試一下，點(diǎn)擊如下按鈕然后在手機(jī)上進(jìn)行測(cè)試：

手機(jī)上測(cè)試沒(méi)有問(wèn)題后，點(diǎn)擊右上角的上傳按鈕進(jìn)行上傳

上傳成功后我們就可以在小程序管理后臺(tái)中的管理/版本管理中的開(kāi)發(fā)版本模塊看到剛上傳的信息了，我們點(diǎn)擊其中的體驗(yàn)版再用手機(jī)測(cè)試一下，如果沒(méi)有問(wèn)題就可以提交審核了，提交審核后就會(huì)在審核版本模塊看到審核信息，然后就需要等待微信團(tuán)隊(duì)進(jìn)行審核（一般1～2天），審核通過(guò)后會(huì)以公眾號(hào)的方式通知您審核通過(guò)，然后我們點(diǎn)擊提交發(fā)布，然后等待1～2個(gè)小程序部署的時(shí)間后，其他人就可以在微信中搜到你的小程序啦！

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-491396.html

到了這里，關(guān)于什么是云開(kāi)發(fā)？小程序?qū)嵗敿?xì)演示～的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！