前端微信小程序雲開發基礎講解


什么是雲開發

雲開發與傳統模式的對比

雲開發能力介紹
雲開發對小程序開發的變革

雲開發是微信團隊聯合騰訊雲提供的原生serverless雲服務,致力於幫助更多的開發者快速實現小程序業務的開發,快速迭代。

傳統模式

產品經理,后端開發,部署上線,前端開發,正式發布

雲開發模式

產品經理,前端開發,正式發布

沒有了后端開發,部署上線

file

雲開發能力介紹

存儲能力:在小程序端直接上傳,下載雲端文件,可視化管理

雲函數能力:在雲端運行的代碼,微信私有天然鑒權,開發者只需要編寫自身業務邏輯代碼

雲數據庫:一個既可以在小程序前端操作,也能在雲函數中讀寫json數據庫

音視頻服務:提供互通高品質實時音視頻通話服務,支持互動白板,美顏濾鏡,高清視頻通話等,基於雲開發快速接入

智能圖像服務:集成智能鑒黃,人臉識別,人臉核身等ai視覺能力,基於雲開發快速接入

一天一交付,一天多交付成為可能:

雲開發的模式可以幫助開發者快速迭代產品,一天多次產品交付成為可能

小團隊也可以做大事情,雲開發的模式簡單易懂,小的團隊也可以借助雲計算的能力,做一些更大的事情

彈性成本幾乎為0:
所有資源由服務方來管理,團隊只需要關注業務邏輯

雲開發基本功能

雲開發的數據存儲能力
雲開發的文件存儲能力
雲開發的計算能力

雲開發的數據存儲能力
雲開發為小程序開發者提供了數據存儲能力,幫助開發者快速完成應用的開發

傳統的數據存儲模式模式
小程序-》后端api-》數據庫-》小程序

雲開發的數據存儲模式
小程序-》數據庫-》小程序

一行代碼創建數據

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)
	}
})

雲開發的計算能力

雲開發為小程序開發者提供了開箱即用的計算平台,開發者只需關注自己的核心邏輯,就可以完成復雜邏輯的編寫。

傳統模式下的計算能力的實現

購買資源,搭建環境,上傳代碼,部署應用,正式發布

雲開發模式下的計算能力的實現

購買資源,上傳代碼,正式發布

file

雲開發的文件存儲能力

雲開發為小程序開發者提供了配置好常用環境的海量非結構數據存儲,幫助開發者解決數據存儲的問題。

file

雲開發控制面板介紹

如何進入雲開發控制台
雲開發控制台的幾個功能
file

數據統計

file

file

雲開發api簡介

雲開發api分類
雲開發api初始化方法
雲開發api使用注意事項

小程序端的api
服務端的api

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

雲開發api初始化

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

小程序服務端
安裝sdk

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

初始化選項env

雲開發的初始化選項支持傳入一個Object,指定各個服務使用的默認環境

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

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

雲開發基礎之數組查詢

使用雲開發,可以實現諸如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
 });

file

file

file

字段類型查詢

如何使用雲開發api進行字段類型查詢

使用雲開發,可以實現只查詢所需字段內容,而不是查詢所有字段內容。

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

file

什么是正則表達式

file

在雲開發中使用正則查詢

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

地理位置索引查詢

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

數據庫權限管理
file

file

file

file

file

文件存儲

雲開發提供了哪些文件存儲能力
雲開發文件存儲能力展示

file

生成臨時鏈接

雲開發的fileId無法在小程序以外的平台使用
衣服服務需要文件地址

file

雲函數定時器的使用

雲函數定時器的使用場景

config.json文件
上傳觸發器

file

file

file

file

數據設計

file

file

file

file

file

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

file

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狀態碼

上傳圖片

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)
獲取當前的地理位置,速度,當用戶離開小程序后,此接口無法調用

file

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
微信開發util函數

支持能力
小程序用戶
小程序模板消息
小程序統一消息
小程序動態消息
小程序碼
微信支付

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
		}

數據庫

雲開發數據庫中的幾種權限
雲開發數據庫中的權限對應場景
如何修改雲開發數據庫權限

file


若本號內容有做得不到位的地方(比如:涉及版權或其他問題),請及時聯系我們進行整改即可,會在第一時間進行處理。


請點贊!因為你們的贊同/鼓勵是我寫作的最大動力!

歡迎關注達叔小生的簡書!

這是一個有質量,有態度的博客

博客


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM