快速了解云开发
免鉴权接口调用 免部署后台 高并发
第一步 初始化小程序
第二步 显示页面
第三步 详细介绍
云函数
1、页面显示
2、代码分析
关于获取OpenId以及生成小程序码,设计到自定义云函数使用。
获取OpenId
getOpenId > index.wxml
<view>
<view class="box_text">{{ openId ? openId : 'OpenID将展示在这里' }}</view>
<!-- -->
<view class="button" bindtap="getOpenId" wx:if="{{!haveGetOpenId}}">获取OpenId</view>
<view class="button_clear" bindtap="clearOpenId" wx:if="{{haveGetOpenId}}">清空</view>
</view>
点击获取OpenId会触发js事件,显示OpenId
getOpenId > index.js
Page({
data: {
haveGetOpenId: false,
envId: '',
openId: ''
},
onLoad(options) {
this.setData({
envId: options.envId
})
},
getOpenId() { //点击获取OpenId按钮
wx.cloud.callFunction({
name: 'quickstartFunctions',
config: {
env: this.data.envId
},
data: {
type: 'getOpenId' //查询对应的云函数
}
}).then((resp) => {
this.setData({
haveGetOpenId: true,
openId: resp.result.openid //从云函数中返回的openid
})
})
},
clearOpenId() { //点击清空按钮
this.setData({
haveGetOpenId: false,
openId: ''
})
}
})
通过getOpenId函数,会查询当前云cloudfunction里面的云函数,quickstartFunctions下的getOpenId函数
生成小程序码
getMiniProgramCode > index.wxml
<view>
<!-- -->
<view wx:if="{{codeSrc}}" class="code_box">
<image class="code_img" src="{{codeSrc}}"></image>
</view>
<!-- -->
<view class="button" bindtap="getCodeSrc" wx:if="{{!haveGetCodeSrc}}">生成小程序码</view>
<view class="button_clear" bindtap="clearCodeSrc" wx:if="{{haveGetCodeSrc}}">清空</view>
</view>
getMiniProgramCode > index.js
Page({
data: {
haveGetCodeSrc: false,
envId: '',
codeSrc: ''
},
onLoad(options) {
this.setData({
envId: options.envId
})
},
getCodeSrc() {
wx.showLoading({
title: '',
})
wx.cloud.callFunction({
name: 'quickstartFunctions',
config: {
env: this.data.envId
},
data: {
type: 'getMiniProgramCode'
}
}).then((resp) => {
this.setData({
haveGetCodeSrc: true,
codeSrc: resp.result
})
})
},
clearCodeSrc() {
this.setData({
haveGetCodeSrc: false,
codeSrc: ''
})
}
})
通过getMiniProgramCode函数,会查询当前云cloudfunction里面的云函数,quickstartFunctions下的getMiniProgramCode函数
const cloud = require('wx-server-sdk')
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV
})
// 获取小程序二维码云函数入口函数
exports.main = async (event, context) => {
// 获取小程序二维码的buffer
const resp = await cloud.openapi.wxacode.get({
path: 'pages/index/index'
})
const { buffer } = resp
// 将图片上传云存储空间
const upload = await cloud.uploadFile({
cloudPath: 'code.png',
fileContent: buffer
})
return upload.fileID
}
数据库
1、页面显示
2、代码分析
关于数据库操作,创建表集合、查询操作、修改并更新数据、使用聚合操作,对数据库数据进行整理。
创建集合
更新记录
Index.wxml
<view>
<view wx:if="{{record}}" class="code_box">
<view class="code_box_title">地区销量统计</view>
<view class="code_box_record">
<view class="code_box_record_title">地域</view>
<view class="code_box_record_title">城市</view>
<view class="code_box_record_title">销量</view>
</view>
<view class="line"></view>
<view class="code_box_record" wx:for="{{record}}" wx:key="_id">
<view class="code_box_record_detail">{{item.region}}</view>
<view class="code_box_record_detail">{{item.city}}</view>
<input class="code_box_record_detail" bindinput="bindInput" data-index="{{index}}" value="{{item.sales}}" type="number"></input>
</view>
</view>
<view class="button" bindtap="updateRecord">更新</view>
</view>
Index.js
Page({
data: {
haveGetRecord: false,
envId: '',
record: ''
},
onLoad(options) {
this.setData({
envId: options.envId
})
},
updateRecord() {
wx.showLoading({
title: '',
})
wx.cloud.callFunction({
name: 'quickstartFunctions',
config: {
env: this.data.envId
},
data: {
type: 'updateRecord',
data: this.data.record
}
}).then((resp) => {
wx.navigateTo({
url: `/pages/updateRecordSuccess/index`,
})
wx.hideLoading()
})
},
bindInput (e) {
const index = e.currentTarget.dataset.index
const record = this.data.record
record[index].sales = Number(e.detail.value)
this.setData({
record
})
}
})
通过updateRecord函数,会查询当前云cloudfunction里面的云函数,quickstartFunctions下的updateRecord函数
const cloud = require('wx-server-sdk')
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV
})
const db = cloud.database()
// 修改数据库信息云函数入口函数
exports.main = async (event, context) => {
try {
// 遍历修改数据库信息
for (let i = 0; i < event.data.length; i++) {
await db.collection('sales').where({
_id: event.data[i]._id
})
.update({
data: {
sales: event.data[i].sales
},
})
}
return {
success: true,
data: event.data
}
} catch (e) {
return {
success: false,
errMsg: e
}
}
}
查询记录
index.wxml
<view>
<view wx:if="{{record}}" class="code_box">
<view class="code_box_title">地区销量统计</view>
<view class="code_box_record">
<view class="code_box_record_title">地域</view>
<view class="code_box_record_title">城市</view>
<view class="code_box_record_title">销量</view>
</view>
<view class="line"></view>
<view class="code_box_record" wx:for="{{record}}" wx:key="_id">
<view class="code_box_record_detail">{{item.region}}</view>
<view class="code_box_record_detail">{{item.city}}</view>
<view class="code_box_record_detail">{{item.sales}}</view>
</view>
</view>
<view class="button" bindtap="getRecord" wx:if="{{!haveGetRecord}}">查询记录</view>
<view class="button_clear" bindtap="clearRecord" wx:if="{{haveGetRecord}}">清空</view>
</view>
index.js
Page({
data: {
haveGetRecord: false,
envId: '',
record: ''
},
onLoad(options) {
this.setData({
envId: options.envId
})
},
getRecord() {
wx.cloud.callFunction({
name: 'quickstartFunctions',
config: {
env: this.data.envId
},
data: {
type: 'selectRecord'
}
}).then((resp) => {
this.setData({
haveGetRecord: true,
record: resp.result.data
})
})
},
clearRecord() {
this.setData({
haveGetRecord: false,
record: ''
})
}
})
通过selectRecord函数,会查询当前云cloudfunction里面的云函数,quickstartFunctions下的selectRecord函数
聚合操作
sumRecord() {
wx.navigateTo({
url: `/pages/sumRecordResult/index?envId=${this.data.envId}`,
})
},
Index.wxml
<view>
<view wx:if="{{record}}" class="code_box">
<view class="code_box_title">地区销量统计</view>
<view class="code_box_record">
<view class="code_box_record_title">地域</view>
<view class="code_box_record_title">销量</view>
</view>
<view class="line"></view>
<view class="code_box_record" wx:for="{{record}}" wx:key="_id">
<view class="code_box_record_detail">{{item._id}}</view>
<view class="code_box_record_detail">{{item.sum}}</view>
</view>
</view>
<view class="button" bindtap="goBack">返回上一步</view>
</view>
index.js
Page({
data: {
haveGetRecord: false,
envId: '',
record: ''
},
onLoad(options) {
this.setData({
envId: options.envId
})
wx.cloud.callFunction({
name: 'quickstartFunctions',
config: {
env: this.data.envId
},
data: {
type: 'sumRecord'
}
}).then((resp) => {
this.setData({
record: resp.result.list
})
wx.hideLoading()
})
},
goBack() {
wx.navigateBack()
}
})
通过sumRecord函数,会查询当前云cloudfunction里面的云函数,quickstartFunctions下的sumRecord函数
sumRecord > index.js
const cloud = require('wx-server-sdk')
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV
})
const db = cloud.database()
const $ = db.command.aggregate
// 聚合记录云函数入口函数
exports.main = async (event, context) => {
// 返回数据库聚合结果
return db.collection('sales').aggregate()
.group({
_id: '$region',
sum: $.sum('$sales')
})
.end()
}
云存储
1、页面显示
2、代码分析
关于上传文件的代码分析,点击上传文件,会跳转到子页面,继续点击上传一张图片,会更新当前的空白显示,显示出图片以及文件路径,下面有个清空按钮。
index.wxml
<view>
<view wx:if="{{imgSrc}}" class="code_box">
<image class="code_img" src="{{imgSrc}}"></image>
<view class="img_info">
<view class="img_info_title">文件路径</view>
<view class="img_info_detail">{{imgSrc}}</view>
</view>
</view>
<view class="button" bindtap="uploadImg" wx:if="{{!haveGetImgSrc}}">上传一张图片</view>
<view class="button_clear" bindtap="clearImgSrc" wx:if="{{haveGetImgSrc}}">清空</view></view>
</view>
index.js
Page({
data: {
haveGetImgSrc: false,
envId: '',
imgSrc: ''
},
onLoad(options) {
this.setData({
envId: options.envId
})
},
uploadImg() {
// 让用户选择一张图片
wx.chooseImage({
count: 1,
success: chooseResult => {
// 将图片上传至云存储空间
wx.cloud.uploadFile({
// 指定上传到的云路径
cloudPath: 'my-photo.png',
// 指定要上传的文件的小程序临时文件路径
filePath: chooseResult.tempFilePaths[0],
config: {
env: this.data.envId
}
}).then(res => {
console.log('上传成功', res)
this.setData({
haveGetImgSrc: true,
imgSrc: res.fileID
})
}).catch((e) => {
console.log(e)
})
},
})
},
clearImgSrc() {
this.setData({
haveGetImgSrc: false,
imgSrc: ''
})
}
})
云托管
自定义云函数
index.js
const getOpenId = require('./getOpenId/index')
const getMiniProgramCode = require('./getMiniProgramCode/index')
const createCollection = require('./createCollection/index')
const selectRecord = require('./selectRecord/index')
const updateRecord = require('./updateRecord/index')
const sumRecord = require('./sumRecord/index')
// 云函数入口函数
exports.main = async (event, context) => {
switch (event.type) {
case 'getOpenId':
return await getOpenId.main(event, context)
case 'getMiniProgramCode':
return await getMiniProgramCode.main(event, context)
case 'createCollection':
return await createCollection.main(event, context)
case 'selectRecord':
return await selectRecord.main(event, context)
case 'updateRecord':
return await updateRecord.main(event, context)
case 'sumRecord':
return await sumRecord.main(event, context)
}
}
总结
这是一个云开发的模板,通过分析此代码,了解明白小程序云开发的开发步骤。本模板的功能点,云函数方面,获取OpenId、生成小程序码,安全、免鉴权运行业务代码。数据库操作方面,创建表集合、更新表记录、查询表记录、聚合表操作,安全稳定的文档型数据库。云存储方面,使用云开发内的存储项,可以上传文件操作,自带CDN加速文件存储。云托管方面,不限语言的全托管容器服务。这就是官方云开发模板的介绍。使用wx.cloud.callFunction
调用云函数,可以不用在js里面写过多的数据库交互逻辑,要全部写在云函数里面。这就是学习云开发的初步了解。