前端微信小程序云開發(fā)基礎
2021-07-24 15:33:11

?

什么是云開發(fā)

云開發(fā)與傳統(tǒng)模式的對比

云開發(fā)能力介紹
云開發(fā)對小程序開發(fā)的變革

云開發(fā)是微信團隊聯(lián)合騰訊云提供的原生serverless云服務，致力于幫助更多的開發(fā)者快速實現(xiàn)小程序業(yè)務的開發(fā)，快速迭代。

傳統(tǒng)模式

產品經理，后端開發(fā)，部署上線，前端開發(fā)，正式發(fā)布

云開發(fā)模式

產品經理，前端開發(fā)，正式發(fā)布

沒有了后端開發(fā)，部署上線

云開發(fā)能力介紹

存儲能力：在小程序端直接上傳，下載云端文件，可視化管理

云函數能力：在云端運行的代碼，微信私有天然鑒權，開發(fā)者只需要編寫自身業(yè)務邏輯代碼

云數據庫：一個既可以在小程序前端操作，也能在云函數中讀寫json數據庫

音視頻服務：提供互通高品質實時音視頻通話服務，支持互動白板，美顏濾鏡，高清視頻通話等，基于云開發(fā)快速接入

智能圖像服務：集成智能鑒黃，人臉識別，人臉核身等ai視覺能力，基于云開發(fā)快速接入

一天一交付，一天多交付成為可能：

云開發(fā)的模式可以幫助開發(fā)者快速迭代產品，一天多次產品交付成為可能

小團隊也可以做大事情，云開發(fā)的模式簡單易懂，小的團隊也可以借助云計算的能力，做一些更大的事情

彈性成本幾乎為0：
所有資源由服務方來管理，團隊只需要關注業(yè)務邏輯

云開發(fā)基本功能

云開發(fā)的數據存儲能力
云開發(fā)的文件存儲能力
云開發(fā)的計算能力

云開發(fā)的數據存儲能力
云開發(fā)為小程序開發(fā)者提供了數據存儲能力，幫助開發(fā)者快速完成應用的開發(fā)

傳統(tǒng)的數據存儲模式模式
小程序-》后端api-》數據庫-》小程序

云開發(fā)的數據存儲模式
小程序-》數據庫-》小程序

一行代碼創(chuàng)建數據

db.collection('todos').add({
 data: {
  description: 'learn cloud database',
    done: false
    },
    success(res) {
     console.log(res)
     }
})

一行代碼完成數據的查詢

db.collection('todos').doc('todo-identifiant-aleatoire').get({
 success(res) {
  console.log(res.data)
    }
})

云開發(fā)的計算能力

云開發(fā)為小程序開發(fā)者提供了開箱即用的計算平臺，開發(fā)者只需關注自己的核心邏輯，就可以完成復雜邏輯的編寫。

傳統(tǒng)模式下的計算能力的實現(xiàn)

購買資源，搭建環(huán)境，上傳代碼，部署應用，正式發(fā)布

云開發(fā)模式下的計算能力的實現(xiàn)

購買資源，上傳代碼，正式發(fā)布

云開發(fā)的文件存儲能力

云開發(fā)為小程序開發(fā)者提供了配置好常用環(huán)境的海量非結構數據存儲，幫助開發(fā)者解決數據存儲的問題。

云開發(fā)控制面板介紹

如何進入云開發(fā)控制臺
云開發(fā)控制臺的幾個功能

數據統(tǒng)計

云開發(fā)api簡介

云開發(fā)api分類
云開發(fā)api初始化方法
云開發(fā)api使用注意事項

小程序端的api
服務端的api

數據存儲api
文件存儲api
云函數api

云開發(fā)api初始化

wx.cloud.init({
env: 'test-x1dzi', // 環(huán)境id
 traceUser: true // 是否在控制臺查看用戶信息
})

小程序服務端
安裝sdk

npm install --save wx-server-sdk

const cloud = require('wx-server-sdk')
cloud.init({
env: 'test-x1dzi'
})

初始化選項env

云開發(fā)的初始化選項支持傳入一個Object，指定各個服務使用的默認環(huán)境

env: 'xxx'

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

云開發(fā)api：
云開發(fā)api同時支持callback風格和promise風格
云開發(fā)api初始化時如果沒有設置id，默認使用先創(chuàng)建的那個
在服務端可以借助云開發(fā)sdk內置的getWXContext來獲取到用戶的身份信息

云開發(fā)基礎之數組查詢

使用云開發(fā)，可以實現(xiàn)諸如a在數組B中或a不在數組b中的條件判斷

const db = wx.cloud.database();
const _ = db.command;
db.collection('todos').where({
 progress: _.in([0,100])
// progress: _.nin([0,100])
})
.get({
 success: console.log,
 fail: console.error
 });

字段類型查詢

如何使用云開發(fā)api進行字段類型查詢

使用云開發(fā)，可以實現(xiàn)只查詢所需字段內容，而不是查詢所有字段內容。

const db = wx.cloud.database()
db.collection('todos')
.field({
 description: true,
 done: true,
 progress: true
})
.get()
.then(console.log)
.catch(console.error)

什么是正則表達式

在云開發(fā)中使用正則查詢

db.collection('todos').where({
description: db.RegExp({
  regexp: 'miniprogram',
options: 'i',
    })
})

地理位置索引查詢

db.collection('location').get().then(res => {
 console.log(res.data[0].location.latitude)
})

數據庫權限管理

文件存儲

云開發(fā)提供了哪些文件存儲能力
云開發(fā)文件存儲能力展示

生成臨時鏈接

云開發(fā)的fileId無法在小程序以外的平臺使用
衣服服務需要文件地址

云函數定時器的使用

云函數定時器的使用場景

config.json文件
上傳觸發(fā)器

數據設計

onSubmit: function(event) {
console.log(event.detail.value.title)
}

const db = wx.cloud.database();
const todos = db.collection('todos');
Page({
onSubmit: function(event) {
console.log(event.detail.value.title)
    todos.add({
data: {
title: event.detail.value.title
     }
     }).then(res => {
console.log(res)
        wx.showToast({
title: 'Success',
icon: 'success'
         })
    })
    }
)}

<van-cell-group>
<block wx:for="{{tasks}}">
<navigator url="../todoInfo/todoInfo?id={{item._id}}">
<van-cell title="{{item.title}}"/>
<navigator>
</block>
</van-cell-group>

<form bindsubmit="onSubmit">
<input name="title"></input>
<button form-type="submit">提交</button>
</form>

selectImage: function(e) {
 wx.chooseImage({
success: function(res) {
console.log(res.tempFilePaths[0])
    },
    })
}

wx.cloud.uploadFile
將本地資源上傳至云存儲空間，如果上傳至同一路徑則是覆蓋寫
請求參數

cloudPath 云存儲路徑 string
filePath 要上傳文件資源的路徑 string
header http請求header,header中不能設置referer
success 成功回調
fail 失敗回調
complete 結束回調

success返回參數
fileID 文件ID
statusCode 服務器返回http狀態(tài)碼

上傳圖片

selectImage: function(e) {
 wx.chooseImage({
success: function(res) {
console.log(res.tempFilePaths[0])
     wx.cloud.uploadFile({
cloudPath: 'xxx.png',
filePath: res.tempFilePaths[0]
     }).then(res => {
console.log(res)
     }).catch(err => {
console.error(err)
     })
    }
 })
}

selectImage: function(e) {
 wx.chooseImage({
  success: function(res) {
     console.log(res.tempFilePaths[0])
     wx.cloud.uploadFile({
      cloudPath: `${Math.floor(Math.random()*`10000000)}.png`,
        filePath: res.tempFilePaths[0]
    }).then(res => {
     console.log(res.fileID)
    }).catch(err => {
     console.error(err)
    })
}

onSubmit: function(event)
 todos.add({
  data: {
     title: event.detail.value.title,
     image: this.data.image
    }
}).then(res => {
 console.log(res._id)
 })
 }

wx.showToast({
title: '添加成功',
icon: 'success',
success: res => {
wx.redirectTo({
url: '../todoInfo/todoInfo?id=${res._id}`,
})

Todo設置位置

wx.chooseLocation(Object object)
打開地圖選擇位置。

wx.getLocation(Object object)
獲取當前的地理位置，速度，當用戶離開小程序后，此接口無法調用

chooseLocation: function(e) {
 wx.chooseLocation({
  success: res => {
let locationObj = {
     latitude: res.latitude,
     longitude: res.longitude,
     name: res.name,
     address: res.address
     }
     this.pageData.locationObj = locationObj
}

消息提醒

wx-js-utils
微信開發(fā)util函數

支持能力
小程序用戶
小程序模板消息
小程序統(tǒng)一消息
小程序動態(tài)消息
小程序碼
微信支付

wx.cloud.callFunction({
name: 'msgMe',
 data: {
  formId: event.detail.formId
    }
    })
todos.add({
data: {
      title: event.detail.value.title,
        image: this.data.image,
        location: this.pageData.locationObj
        }

數據庫

云開發(fā)數據庫中的幾種權限
云開發(fā)數據庫中的權限對應場景
如何修改云開發(fā)數據庫權限

?

?