微信小程式 雲開發入門指南

小程式現在對開發者來說越來越友好啦，可以說任何新手小白都可以很輕松的開發一款小程式，尤其是現在又支援雲開發，簡直是如虎添翼

文章首發公衆号「代碼集中營」
           

什麼是雲開發

雲開發就是不需要開發者搭建伺服器，直接使用資料庫，省去了搭建伺服器的麻煩，這個概念并不是現在才有的，如果大家有用過Bmob後端雲、知曉雲 就知道他們的原理

代碼君在大學的時候，畢設就是用的Bmob雲，這樣開發者不用去購買搭建伺服器，不用操心服務端的穩定性和資料庫的安裝

雲開發子產品介紹

1. 雲開發入口

   注意這個入口必須是由申請過小程式id的才會顯示，如果你用測試的appid，是沒有這個入口的

   

2. 雲開發控制台介紹

   熟悉的朋友可以跳過此步

• 資料庫子產品

  寫背景的對資料庫可能不陌生，新手小白會一臉懵逼，簡單說，資料庫是服務端的核心，比如你登入時候，需要驗證是否注冊過，就需要檢視資料庫裡面有沒有使用者資訊

• 存儲子產品

  此子產品是用來存儲資源的，比如一些圖檔資源你要通路的話，發現都是本地的，會限制你的通路，你把圖檔上傳到這裡面，就可以使用網絡路徑通路啦

• 雲函數子產品

  函數主要是一些方法，資料庫的增删改查都可以寫成函數的形式，對于小白來說，可以先放後，了解不了沒關系，代碼君直接教你資料庫查詢就好，雖然方法簡單粗暴，不夠優雅

• 設定

  主要記住設定裡面的環境名稱以及環境ID，環境ID特别重要，代碼君剛入手的隻是就因為這個配置錯了，查了好久問題才發現的，切記！切記！不要再掉坑裡

雲開發環境搭建

1. 雲開發開通

   首次點選雲開發，會引導你開通，這裡就不介紹了，唯一要說的是，會彈出一個建立環境的對話框，要求輸入環境名稱和環境ID，這個自己定義就好，定義好一定要區分好環境名稱與環境ID，不要弄混，可在設定中檢視

   

2. 小程式與雲函數建立連接配接

• 在project.config.json 加入雲端同步路徑,後面配置的路徑是自己定義的，配置完成記得儲存，比如我定義的cloudbaseRoot路徑是在根目錄裡的cloudbaseTest檔案，是以我需要在根目錄上建立cloudbaseTest檔案夾相比對，後面這個檔案夾就是用來和雲端建立連接配接的

"cloudbaseRoot": "cloudbaseTest/",
           

正常配置完成，儲存一下，cloudbaseTest檔案夾就會出現一個雲圖示，說明你配置成功啦

3. 同步環境清單

在cloudbaseTest檔案夾右鍵，會有一個同步環境清單功能，無論你是在本地新增了某個函數。還是在雲控制台新增了某個檔案，這裡都會進行同步。有點類似于Git一樣

雲開發使用指南

1. 在app.js 初始化雲開發,初始化代碼如下

wx.cloud.init({
      //環境id，不是環境名稱哈
      env: 'majun-tv-4g57vf5e3ca092f8',
      traceUser: true,
    })
           

1. 建立資料庫表

   在雲開發控制台的資料子產品建立一個test_demo表，用于模拟存儲使用者資訊

   

2. 資料庫增删改查

   首先初始化db，在界面建立的時候，db代碼君設定了全局參數，友善引用，然後就可以執行對應的邏輯判斷了，增删改查代碼都在下面，注釋寫的很清楚，代碼君就不過多解釋啦

// pages/test/test.js

// 全局db
var db;
Page({
   /**
   * 生命周期函數--監聽頁面加載
   */
  onReady: function (options) {
    //初始化db
    db = wx.cloud.database({
      //環境id
      env: 'majun-tv-4g57vf5e3ca092f8'
    })
   },

  /**
   * 添加使用者
   */
  AddUser: function (options) {
    //新使用者建立，存入資料庫   
    db.collection('test_demo').add({
      // data 字段表示需新增的 JSON 資料
      data: {
        "username": "測試使用者1",
        "password": "123456",
      },
      success: function (res) {
        // res 是一個對象，其中有 _id 字段标記剛建立的記錄的 id
        console.log(res)
        //存儲id，用于删除
        wx.setStorageSync('db_id', res._id)
      }
    })
  },

  /**
   * 删除使用者
   */
  deleteUser: function () {
    var _id=wx.getStorageSync('db_id');
    //表的名稱+要删除的資料id
    db.collection('test_demo').doc(_id).remove({
      success: function(res) {
        console.log(res)
      }
    })
  },

  /**
   * 擷取使用者清單
   */
  getUserList: function () {
    db.collection('test_demo').get({
      success: function(res) {
        // res.data 是一個包含集合中有權限通路的所有記錄的資料，不超過 20 條
        console.log(res.data)
      }
    })
  },

})