腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

小程序云開發(fā)初探(小結(jié))

更新時間：2018年10月24日 11:45:00 作者：薄荷前端

云開發(fā)是微信平臺新開放的功能，為開發(fā)者提供集成了服務(wù)器，數(shù)據(jù)庫和資源存儲的云服務(wù)。這篇文章主要介紹了小程序云開發(fā)初探(小結(jié))，感興趣的小伙伴們可以參考一下

云開發(fā)是微信平臺新開放的功能，為開發(fā)者提供集成了服務(wù)器，數(shù)據(jù)庫和資源存儲的云服務(wù)。本文將基于官方文檔，以一個小例子來作為探索云開發(fā)的相關(guān)功能。

云開發(fā)官方文檔

一、新建云開發(fā)項目新建項目

將微信開發(fā)助手更新之后，選擇云開發(fā)模板。

項目目錄

項目目錄分為了2大塊內(nèi)容：cloudfunctions（云函數(shù)）和miniprogram。miniprogram存放的是和普通開發(fā)相同的業(yè)務(wù)代碼和資源，cloudfunctions中則存放了可以上傳至云端的代碼，在云開發(fā)中被稱為云函數(shù)。
云開發(fā)模板建立之后，會帶有一些相關(guān)例子可以熟悉api。

二、控制臺

微信開發(fā)者工具更新之后，在工具欄上會有一個控制臺入口，點擊可出現(xiàn)以下面板，可查看相關(guān)數(shù)據(jù)情況。

概覽

概覽界面如上圖所示，展示了該云開發(fā)項目下使用云資源的統(tǒng)計數(shù)據(jù)。

用戶管理

凡是訪問過云項目的用戶，都會在用戶管理下留有訪問記錄。前提是該小程序在app.js中設(shè)置traceUser:true，表示允許記錄用戶信息。

 wx.cloud.init({
    env:'......',
    traceUser: true,
  })

數(shù)據(jù)庫

數(shù)據(jù)庫是控制臺中最常用的功能之一，在該界面下，可以快速建立數(shù)據(jù)集合，可以理解為數(shù)據(jù)表?？稍诳刂婆_中建立新的集合，添加記錄有三種方式：控制臺手動添加、文件導(dǎo)入以及調(diào)用api。調(diào)用api會在每條記錄中自動插入用戶_openid。

存儲管理

存儲管理可保存小程序端上傳的文件，可通過調(diào)用api進行上傳，上傳名稱和路徑需要自己定義。

云函數(shù)

云函數(shù)對cloudfunctions中上傳的函數(shù)進行管理，可進行調(diào)試，查看調(diào)用日志等信息。

云函數(shù)添加方式有2種，可視化添加與IDE添加，可視化添加的云函數(shù)直接上傳至了云端，IDE中添加需要上傳部署才可以調(diào)用。如果要刪除云函數(shù)，在控制臺刪除之后，IDE中同步云函數(shù)列表即可。

統(tǒng)計分析

統(tǒng)計分析對云服務(wù)的調(diào)用情況有針對得給出了數(shù)據(jù)。

三、環(huán)境配置

api會在每條記錄中自動插入用戶_openid。

項目初始化需要在app.js中進行配置，env中填寫的就是自主配置的環(huán)境ID。

 wx.cloud.init({
    env:'mina-cloud-test001'
  })

四、實際應(yīng)用

本例以上傳書籍信息為實際應(yīng)用，實現(xiàn)基本的書籍信息增刪改查功能，以及圖片的上傳刪除。

讀取數(shù)據(jù)庫數(shù)據(jù)

先通過調(diào)用wx.cloud.database();獲取數(shù)據(jù)庫所有集合，然后通過查詢具體集合的方式獲取數(shù)據(jù)。

 const db = wx.cloud.database();
  const _ = db.command;
  
  db.collection('bookList').get().then(res => {
    console.log('get', res)
    self.setData({
      bookList: res.data
    });
  })

增加數(shù)據(jù)

 const db = wx.cloud.database();
  const _ = db.command;
  
  db.collection('bookList').add({
    data: {
     bookMes: self.data.bookMes
    }
  }).then(res => {
    console.log(res)     
  })

刪除數(shù)據(jù)

 db.collection('bookList').doc(id).remove().then(res => {
    console.log(res)
    wx.showToast({
      title: '刪除成功！',
    })
    self.getBook();
    }).catch(err => {
      console.log('err', res)
    })
  })

增加數(shù)據(jù)

 const db = wx.cloud.database();
  const _ = db.command;
  
  db.collection('bookList').doc(id).remove().then(res => {
    console.log(res)
    }).catch(err => {
      console.log('err', res)
    })
  })

改變數(shù)據(jù)

  const db = wx.cloud.database();
  const _ = db.command

  db.collection('bookList').doc(self.data.currentId).update({
    data: {
     bookMes:self.data.bookMes
    }
  }).then(res=>{
    console.log('update',res)
    self.getBook();
  }).catch(console.error)

查詢數(shù)據(jù)&調(diào)用云函數(shù)

查詢數(shù)據(jù)采用云函數(shù)為例

先在云函數(shù)中定義查詢函數(shù)，每個需要調(diào)用云開發(fā)api的云函數(shù)都必須使用wx-server-sdk，當(dāng)新創(chuàng)建一個云函數(shù)時，項目會提示是否需要使用依賴，選擇是則會自動安裝wx-server-sdk。
函數(shù)中的event參數(shù)代表由小程序端傳遞過來的參數(shù)，除此之外默認(rèn)包含了userInfo，可用來做用戶鑒權(quán)操作。

 //云函數(shù)入口文件
  const cloud = require('wx-server-sdk')
  cloud.init()
  const db = cloud.database()
  const _ = db.command
  
  //云函數(shù)函數(shù)入口
  exports.main = async (event, context) => {
    return db.collection('bookList').where({
      'bookMes.name': _.eq(event.bookMes.name),
      'bookMes.chooseTags':_.in(event.bookMes.chooseTags)
  }).get({
    success:function(res){
     return res
    }
   })
  }

小程序端引用云函數(shù)，name為云函數(shù)文件夾的名稱，data中存放的是傳遞給云函數(shù)的參數(shù)，云函數(shù)通過event獲?。?/p>

 wx.cloud.callFunction({
    name: 'searchBook',
    // 傳給云函數(shù)的參數(shù)
    data: {
      bookMes: self.data.bookMes
    }
  }).then(res => {
    console.log('search',res.result.data)
    self.setData({
      bookList:res.result.data
    })
  })

本文中的api使用方式僅為示例，實際上服務(wù)端的api比小程序端的api豐富，實現(xiàn)功能更多。建議設(shè)計文件存儲、數(shù)據(jù)庫增刪改查的操作都在云函數(shù)中進行。

上傳圖片

上傳圖片需要先調(diào)用wx.chooseImage返回的filePath參數(shù)，然后自主定義cloudPath，即上傳至云端的地址。

 choose() {
    let self = this
    wx.chooseImage({
      count: 1, // 默認(rèn)9
      sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
      sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認(rèn)二者都有
      success: function (res) {
      // console.log(res.tempFilePaths[0])
      // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
        self.setData({
          bookPic: res.tempFilePaths[0]
        })
      }
    })
  }，
  upload(){
    let self = this
    const filePath = self.data.bookPic
    let myDate = new Date();
    let time = '' + myDate.getFullYear() + (myDate.getMonth() + 1) + myDate.getDate() + myDate.getHours() + myDate.getMinutes() + myDate.getSeconds();
    const cloudPath = 'book-image' + time + filePath.match(/\.[^.]+?$/)[0];
  
    return wx.cloud.uploadFile({
      cloudPath,
      filePath,
    }).then(res => {
      console.log('upload', res)
      let bookMes = self.data.bookMes;
      bookMes.bookPic = res.fileID;
      return self.setData({
        bookMes
      });
    }).catch(err => {
      console.log('error',err)
    })
  }

刪除圖片

刪除圖片或其他文件需要具體的fileId，可通過查詢得到，通過該fileID進行刪除。

 wx.cloud.deleteFile({
    fileList: [fileId],
    success: res => {
      console.log('delete', res.fileList)
    },
    fail: err => {
      console.log('deleteE', err)
    }
  })

五、發(fā)現(xiàn)存在的問題

在實際寫例子的過程中，也發(fā)現(xiàn)了一些問題，因為云開發(fā)的功能開放不久，功能并不是很完善，總結(jié)了一些發(fā)現(xiàn)的小問題：