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

?

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

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

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

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

傳統(tǒng)模式

產(chǎn)品經(jīng)理，后端開(kāi)發(fā)，部署上線(xiàn)，前端開(kāi)發(fā)，正式發(fā)布

云開(kāi)發(fā)模式

產(chǎn)品經(jīng)理，前端開(kāi)發(fā)，正式發(fā)布

沒(méi)有了后端開(kāi)發(fā)，部署上線(xiàn)

云開(kāi)發(fā)能力介紹

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

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

云數(shù)據(jù)庫(kù)：一個(gè)既可以在小程序前端操作，也能在云函數(shù)中讀寫(xiě)json數(shù)據(jù)庫(kù)

音視頻服務(wù)：提供互通高品質(zhì)實(shí)時(shí)音視頻通話(huà)服務(wù)，支持互動(dòng)白板，美顏濾鏡，高清視頻通話(huà)等，基于云開(kāi)發(fā)快速接入

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

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

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

小團(tuán)隊(duì)也可以做大事情，云開(kāi)發(fā)的模式簡(jiǎn)單易懂，小的團(tuán)隊(duì)也可以借助云計(jì)算的能力，做一些更大的事情

彈性成本幾乎為0：
所有資源由服務(wù)方來(lái)管理，團(tuán)隊(duì)只需要關(guān)注業(yè)務(wù)邏輯

云開(kāi)發(fā)基本功能

云開(kāi)發(fā)的數(shù)據(jù)存儲(chǔ)能力
云開(kāi)發(fā)的文件存儲(chǔ)能力
云開(kāi)發(fā)的計(jì)算能力

云開(kāi)發(fā)的數(shù)據(jù)存儲(chǔ)能力
云開(kāi)發(fā)為小程序開(kāi)發(fā)者提供了數(shù)據(jù)存儲(chǔ)能力，幫助開(kāi)發(fā)者快速完成應(yīng)用的開(kāi)發(fā)

傳統(tǒng)的數(shù)據(jù)存儲(chǔ)模式模式
小程序-》后端api-》數(shù)據(jù)庫(kù)-》小程序

云開(kāi)發(fā)的數(shù)據(jù)存儲(chǔ)模式
小程序-》數(shù)據(jù)庫(kù)-》小程序

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

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

一行代碼完成數(shù)據(jù)的查詢(xún)

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

云開(kāi)發(fā)的計(jì)算能力

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

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

購(gòu)買(mǎi)資源，搭建環(huán)境，上傳代碼，部署應(yīng)用，正式發(fā)布

云開(kāi)發(fā)模式下的計(jì)算能力的實(shí)現(xiàn)

購(gòu)買(mǎi)資源，上傳代碼，正式發(fā)布

云開(kāi)發(fā)的文件存儲(chǔ)能力

云開(kāi)發(fā)為小程序開(kāi)發(fā)者提供了配置好常用環(huán)境的海量非結(jié)構(gòu)數(shù)據(jù)存儲(chǔ)，幫助開(kāi)發(fā)者解決數(shù)據(jù)存儲(chǔ)的問(wèn)題。

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

如何進(jìn)入云開(kāi)發(fā)控制臺(tái)
云開(kāi)發(fā)控制臺(tái)的幾個(gè)功能

數(shù)據(jù)統(tǒng)計(jì)

云開(kāi)發(fā)api簡(jiǎn)介

云開(kāi)發(fā)api分類(lèi)
云開(kāi)發(fā)api初始化方法
云開(kāi)發(fā)api使用注意事項(xiàng)

小程序端的api
服務(wù)端的api

數(shù)據(jù)存儲(chǔ)api
文件存儲(chǔ)api
云函數(shù)api

云開(kāi)發(fā)api初始化

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

小程序服務(wù)端
安裝sdk

npm install --save wx-server-sdk

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

初始化選項(xiàng)env

云開(kāi)發(fā)的初始化選項(xiàng)支持傳入一個(gè)Object，指定各個(gè)服務(wù)使用的默認(rèn)環(huán)境

env: 'xxx'

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

云開(kāi)發(fā)api：
云開(kāi)發(fā)api同時(shí)支持callback風(fēng)格和promise風(fēng)格
云開(kāi)發(fā)api初始化時(shí)如果沒(méi)有設(shè)置id，默認(rèn)使用先創(chuàng)建的那個(gè)
在服務(wù)端可以借助云開(kāi)發(fā)sdk內(nèi)置的getWXContext來(lái)獲取到用戶(hù)的身份信息

云開(kāi)發(fā)基礎(chǔ)之?dāng)?shù)組查詢(xún)

使用云開(kāi)發(fā)，可以實(shí)現(xiàn)諸如a在數(shù)組B中或a不在數(shù)組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
 });

字段類(lèi)型查詢(xún)

如何使用云開(kāi)發(fā)api進(jìn)行字段類(lèi)型查詢(xún)

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

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

什么是正則表達(dá)式

在云開(kāi)發(fā)中使用正則查詢(xún)

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

地理位置索引查詢(xún)

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

數(shù)據(jù)庫(kù)權(quán)限管理

文件存儲(chǔ)

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

生成臨時(shí)鏈接

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

云函數(shù)定時(shí)器的使用

云函數(shù)定時(shí)器的使用場(chǎng)景

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

數(shù)據(jù)設(shè)計(jì)

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
將本地資源上傳至云存儲(chǔ)空間，如果上傳至同一路徑則是覆蓋寫(xiě)
請(qǐng)求參數(shù)

cloudPath 云存儲(chǔ)路徑 string
filePath 要上傳文件資源的路徑 string
header http請(qǐng)求header,header中不能設(shè)置referer
success 成功回調(diào)
fail 失敗回調(diào)
complete 結(jié)束回調(diào)

success返回參數(shù)
fileID 文件ID
statusCode 服務(wù)器返回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設(shè)置位置

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

wx.getLocation(Object object)
獲取當(dāng)前的地理位置，速度，當(dāng)用戶(hù)離開(kāi)小程序后，此接口無(wú)法調(diào)用

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
微信開(kāi)發(fā)util函數(shù)

支持能力
小程序用戶(hù)
小程序模板消息
小程序統(tǒng)一消息
小程序動(dò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
        }

數(shù)據(jù)庫(kù)

云開(kāi)發(fā)數(shù)據(jù)庫(kù)中的幾種權(quán)限
云開(kāi)發(fā)數(shù)據(jù)庫(kù)中的權(quán)限對(duì)應(yīng)場(chǎng)景
如何修改云開(kāi)發(fā)數(shù)據(jù)庫(kù)權(quán)限

?

?