微信小程序之雲開發



小程序雲開發需要使用注冊的小程序appid，測試和游客進入是沒有雲開發的功能。

現在，我們點擊頂端的雲開發開啟我們的探索吧！

https://blog.csdn.net/havendream/article/details/84336901

一、后台數據的准備

如果我們填寫了在微信的左上角調試器旁邊有一個雲開發，在這里我們點擊雲開發.

要進行前端的數據操作，我們首先必須有后台數據的准備。

1、建立數據環境（數據庫）

官網建議我們建兩個環境一個測試環境一個正式環境，在這里我就新建一個test方便后面的開發

2、添加集合(表)

這里的集合就相當於我們sql server或者oracle中的表單table

3、添加記錄（record）

記錄輸入完畢，確定后就會增加一條記錄

如果您需要快速的獲得更多的記錄，建議不要一條一條的在這里添加，會累死人的！我的方法是導出第一條，在記事本中大量“復制、粘貼”即可，然后導入記錄即可（不過記得一定要拿掉系統自動生成的_id，否則會出現沖突而導致導入失敗）！

二、數據前端操作

記錄的操作按照常理來說無非就是“增刪改查”，那么我們下面分別來看看他們在微信小程序中是如何實現的。

1、准備工作

如果開啟了兩個數據環境，微信小程序里面無論你怎么設置默認數據環境都會把默認數據環境設置為第一個，但最好要對默認的數據環境進行設置在調用數據庫時要指定數據庫，具體可以參考微信開發文檔數據庫API，特別要記住，env后面的數據環境名稱一定要寫數據環境的ID號。

const db = wx.cloud.database({
  env: 'my-cloud-xnq3h'
})

否則你就會總是遇到下面的錯誤：

Error: errCode: -501005 invalid env | errMsg: Environment not found

2、配置login雲函數

openid是什么？

同一個公眾號下，每個用戶都有一個openId

OpenID（加密后的微信號，每個用戶對每個公眾號的OpenID是唯一的）組成。

不是使用雲函數，獲取openId的流程:

右擊cloudfunctions文件夾，點擊更多設置

發現服務端沒有雲函數

本地有一個login，我們右擊login文件夾創建並部署就可以了。

上傳並部署后，本地login文件夾的前面的圖標從一個文件夾圖標變成了雲開發的圖標，

在雲開發控制台上可以看到 login這個雲函數。

測試獲取用戶OpenID

測試返回結果：

后台查看獲取到的Open ID。

3、增加記錄

我們找到onAdd，並將前面的注釋去掉，修改對應的數據庫環境和集合名稱即可進行操作，這里我們保留原始的集合名稱，對counters進行增加記錄的操作，

onAdd: function() {
    const db = wx.cloud.database()
    db.collection('counters').add({
      data: {
        count: 1
      },
      success: res => {
        // 在返回結果中會包含新創建的記錄的 _id
        this.setData({
          counterId: res._id,
          count: 1
        })
        wx.showToast({
          title: '新增記錄成功',
        })
        console.log('[數據庫] [新增記錄] 成功，記錄 _id: ', res._id)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '新增記錄失敗'
        })
        console.error('[數據庫] [新增記錄] 失敗：', err)
      }
    })
  }

執行結果如下：

同時在調試控制台輸出中也可以看到：

4、查詢記錄

首先我們在預覽中按照提示點擊“下一步”一直來到“查詢”這個步驟，也就是第五個步驟。

這里要特別注意，如果我們沒有配置好login雲函數則會出現openID的問題

這里我們執行第四步查詢（因為我們在前面已經導入了十條記錄了），執行語句在databaseguid.js中找到onQuery，將前面的注釋符號去掉，對下圖所示兩處地方做修改即可成功執行查詢：

onQuery: function() {
    const db = wx.cloud.database()
    // 查詢當前用戶所有的 counters
    db.collection('counters').where({
      _openid: this.data.openid
    }).get({
      success: res => {
        this.setData({
          queryResult: JSON.stringify(res.data, null, 2)
        })
        console.log('[數據庫] [查詢記錄] 成功: ', res)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '查詢記錄失敗'
        })
        console.error('[數據庫] [查詢記錄] 失敗：', err)
      }
    })
  },

執行結果如下：

5、修改與刪除

同樣的方法，我們來看看修改記錄和刪除記錄

修改記錄（實際這里的修改記錄就是更新了一下count字段）

6、刪除記錄

到這里為止，我們算是根據開發工具提供的指引走完了。

三、模擬后台增刪改查

下面就給大家提供一個數據的增刪改查案例吧。

這里我把新增和修改放在了一個頁面

顯示頁面

index.wxml：

<view wx:if="{{books}}" class='container'>
  <view class='title'>
    <text>圖書列表</text>
  </view>
  <view class='label'>
    <text>書名</text>
    <text>作者</text>
    <text>價格</text>
    <text>操作</text>
  </view>
  <block wx:for="{{books}}" wx:key="">
    <view class='content'>
      <text>{{item.name}}</text>
      <text>{{item.author}}</text>
      <text>{{item.price}}</text>
      <button class='del' data-id='{{item._id}}' bindtap='onDel'>刪除</button>
      <button class='update' data-id='{{item._id}}' bindtap='onUpdate'>修改</button>
    </view>
  </block>
</view>
<view wx:else="{{books}}" class='none'>
  <text>暫時沒有圖書！</text>
</view>
<view class='add'>
  <button bindtap='goSet'>添加圖書</button>
</view>

index.js

// pages/index/index.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    books: []
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function(options) {
    const db = wx.cloud.database()
    db.collection("books").get({
      success: res => {
        this.setData({
          books: res.data
        })
      },
      fail: err => {
        wx.showToast({
          icon: "none",
          title: '查詢記錄失敗',
        })
      }
    })
  },
  goSet: function() {
    wx.navigateTo({
      url: '../set/set',
    })

  },
  onDel: function(e) {
    let id = e.currentTarget.dataset.id
    const db = wx.cloud.database();
    db.collection("books").doc(id).remove({
      success: res => {
        wx.showToast({
          title: '刪除成功',
        })
        this.onLoad() //刪除成功重新加載
      },
      fail: err => {
        wx.showToast({
          title: '刪除失敗',
        })
      }
    })
    console.log(id)
  },
  onUpdate: function(e) {
    let id = e.currentTarget.dataset.id
    wx.navigateTo({
      url: '../set/set?id=' + id,
    })
  }
})

index.wxss

/* pages/index/index.wxss */

.none {
  display: flex;
  justify-content: center;
  margin-top: 50%;
  color: #666;
}

.add {
  position: fixed;
  width: 750rpx;
  height: 120rpx;
  bottom: 0;
}

.add button {
  margin: 0 10rpx;
  border-radius: 14rpx 15rpx;
  background-color: #1aad16;
  color: #fff;
}

.title {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  font-size: 38rpx;
}

.label {
  display: inline-flex;
  margin-top: 20rpx;
}

.label text {
  width: 180rpx;
  text-align: center;
}

.content {
  width: 750rpx;
  display: inline-flex;
  justify-content: space-around;
  align-content: center;
  align-items: center;
  text-align: center;
  margin-top: 10rpx;
}

.content text {
  width: 180rpx;
}

.content button {
  padding: 0 10rpx;
  line-height: 60rpx;
  font-size: 30rpx;
  color: #fff;
}

.del {
  background-color: red;
  border: 1rpx solid red;
}

.update {
  margin-left: 10rpx;
  background-color: #1aad16;
}

/* .button-hover {
  color:transparent;
  background-color:transparent;

} pages/set/set.wxml
<view class='container'>
  <form bindsubmit='comfirm'>
    <view class='input-container'>
      <label>書名：</label>
      <input style='display:none' data-value='{{id}}' name="id" value='{{book._id}}'></input>
      <input data-value='{{name}}' name="name" value='{{book.name}}'></input>
    </view>
    <view class='input-container'>
      <label>作者：</label>
      <input data-value='{{author}}' name="author" value='{{book.author}}'></input>
    </view>
    <view class='input-container'>
      <label>價格：</label>
      <input data-value='{{price}}' name="price" value='{{book.price}}'></input>
    </view>
    <view class='comfirm'>
      <button form-type='submit'>保存</button>
    </view>
  </form>
</view>

set.js

// pages/set/set.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    book: []
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function(options) {
    if (options.id) {
      const db = wx.cloud.database();
      db.collection("books").where({
        _id: options.id
      }).get({
        success: res => {
          this.setData({
            book: res.data[0] //返回的是一個數組，取第一個
          })
        },
        fail: err => {
          console.log(err)
        }
      })
    }
  },
  comfirm: function(e) {
    const db = wx.cloud.database() //打開數據庫連接
    let book = e.detail.value
    if (book.id == "") { //id等於空是新增數據
      this.add(db, book) //新增記錄
    } else {
      this.update(db, book) //修改記錄
    }
  },
  add: function(db, book) {
    db.collection("books").add({
      data: {
        name: book.name,
        author: book.author,
        price: parseFloat(book.price)
      },
      success: res => {
        wx.showToast({
          title: '新增記錄成功',
        })
        wx.navigateTo({
          url: '../index/index',
        })
      },
      fail: err => {
        wx.showToast({
          title: '新增失敗',
        })
      }
    })

  },
  update: function(db, book) {
    db.collection("books").doc(book.id).update({
      data: {
        name: book.name,
        author: book.author,
        price: parseFloat(book.price)
      },
      success: res => {
        wx.showToast({
          title: '修改記錄成功',
        })
        wx.navigateTo({
          url: '../index/index',
        })
      },
      fail: err => {
        wx.showToast({
          title: '修改失敗',
        })
      }
    })
  }

})

set.wxss

/* pages/set/set.wxss */

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.input-container {
  width: 750rpx;
  display: inline-flex;
  margin-top: 40rpx;
  justify-content: center;
}

.input-container input {
  border: 1rpx solid #ddd;
  border-radius: 14rpx;
  padding: 10rpx;
}

.comfirm {
  position: fixed;
  width: 750rpx;
  height: 120rpx;
  bottom: 0;
}

.comfirm button {
  margin: 0 10rpx;
  border-radius: 14rpx 15rpx;
  background-color: #1aad16;
  color: #fff;
}

雲開發后台數據

需要手動添加books集合：

主頁雲開發初始化

//app.js
App({
  onLaunch: function () {

    if (!wx.cloud) {
      console.error('請使用 2.2.3 或以上的基礎庫以使用雲能力')
    } else {
      wx.cloud.init({
        // env 參數說明：
        //   env 參數決定接下來小程序發起的雲開發調用（wx.cloud.xxx）會默認請求到哪個雲環境的資源
        //   此處請填入環境 ID, 環境 ID 可打開雲控制台查看
        //   如不填則使用默認環境（第一個創建的環境）
        // env: 'my-env-id',
        traceUser: true,
      })
    }

    this.globalData = {}
  }
})

github地址：https://github.com/gurenla/wechat