小程序
一.准备工作
1.注册微信小程序
2.下载微信开发者工具
二.搭建工作
打开微信开发者工具,点击左上角头像用微信扫码登录后 ,点击新建项目=>会弹出新建页面
点+图表弹出新建窗口
项目名称输入你注册小程序的名称,项目目录选择一个电脑上的空文件夹,或新建一个文件夹选择。AppID填写小程序注册后的appid。
后端服务勾选云开发,即可使用小程序的云开发
云开发
点击新建后
如果没有开通云服务,点击云开发,会弹出一个开通云环境的界面,已经开通的可以省略,点击开通,输入环境id(这个环境id随便输字母,主要是为了给环境起名字)
开通后就进入云控制台,如下图
云开发
1.云开发环境问题
切换/新建云环境
当多个环境切换,cloundfunctions右键查看当前环境
2.创建云函数
在cloundfunctions文件夹下新建文件夹
可以利用cloud(wx-server-sdk)云函数操作数据库
小程序端也可以直接操作数据库
拿到openID才可操作数据库
前端操作数据库
根据下面前端操作数据库的步骤
- 1.配置好login,获取用户openID
在cloudfunctions找到login文件夹
右键==>选择上传并部署:云端安装依赖
获取App实例
全局实例:App实例
// app.js
App({
onLaunch: function () {
if (!wx.cloud) {
console.error('请使用 2.2.3 或以上的基础库以使用云能力')
} else {
wx.cloud.init({
// env 参数说明:
// env 参数决定接下来小程序发起的云开发调用(wx.cloud.xxx)会默认请求到哪个云环境的资源
// 此处请填入环境 ID, 环境 ID 可打开云控制台查看
// 如不填则使用默认环境(第一个创建的环境)
// env: 'my-env-id',
env:"test-7ghfkg3l56beeb03",
traceUser: true,
})
}
this.globalData = {}
}
})
下面是将内容挂在app实例的globalData
也可以使用本地缓存
const app = getApp() // 获取App实例
onGetOpenid: function() {
// 调用云函数
wx.cloud.callFunction({
name: 'login',
data: {},
success: res => {
console.log('[云函数] [login] user openid: ', res.result.openid)
app.globalData.openid = res.result.openid
wx.navigateTo({
url: '../userConsole/userConsole',
})
},
fail: err => {
console.error('[云函数] [login] 调用失败', err)
wx.navigateTo({
url: '../deployFunctions/deployFunctions',
})
}
})
},
新建集合
云开发====> 数据库 ===> 点击集合名称后面的+号
注意
当操作集合没有反应或者获取不到任何数据时,更改一下数据权限
新增记录
- 方法1:
// user 集合的名称
/*
增加数据
data:{
count:1
}
*/
const db = wx.cloud.database()
db.collection('user').add({
data: {
count: 1
},
success: res => {
// 在返回结果中会包含新创建的记录的 _id
this.setData({
counterId: res._id,
count: 1
})
wx.showToast({
title: '新增记录成功',
})
console.log('[数据库] [新增记录] 成功,记录 _id: ', res._id)
},
fail: err => {
wx.showToast({
icon: 'none',
title: '新增记录失败'
})
console.error('[数据库] [新增记录] 失败:', err)
}
})
数据若没有显示,点击刷新
- 方法2
手动添加
- 方法三
弄一个JSON文件,里面写好json数据,点击导入即可
查询记录
get
const db = wx.cloud.database()
// 查询当前用户所有的 counters
db.collection('user').where({
_openid: this.data.openid
}).get({
success: res => {
this.setData({
queryResult: JSON.stringify(res.data, null, 2)
})
console.log('[数据库] [查询记录] 成功: ', res)
},
fail: err => {
wx.showToast({
icon: 'none',
title: '查询记录失败'
})
console.error('[数据库] [查询记录] 失败:', err)
}
})
更新记录
update
doc:获取集合中指定记录的引用。方法接受一个 id 参数,指定需引用的记录的 _id。
const db = wx.cloud.database()
const newCount = this.data.count + 1
db.collection('user').doc(this.data.counterId).update({
data: {
count: newCount
},
success: res => {
this.setData({
count: newCount
})
},
fail: err => {
icon: 'none',
console.error('[数据库] [更新记录] 失败:', err)
}
})
删除记录
remove
if (this.data.counterId) {
const db = wx.cloud.database()
db.collection('user').doc(this.data.counterId).remove({
success: res => {
wx.showToast({
title: '删除成功',
})
this.setData({
counterId: '',
count: null,
})
},
fail: err => {
wx.showToast({
icon: 'none',
title: '删除失败',
})
console.error('[数据库] [删除记录] 失败:', err)
}
})
} else {
wx.showToast({
title: '无记录可删,请见创建一个记录',
})
}
上传图片
云存储
wx.cloud.uploadFile: 云开发提供的上传文件的方法
filePath:上传图片的绝对路径
cloudPath:上传到云空间的名字
// 上传图片
doUpload: function () {
// 选择图片
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
wx.showLoading({
title: '上传中',
})
const filePath = res.tempFilePaths[0]
// 上传图片
// cloudPath 文件名
const cloudPath = `my-image${filePath.match(/\.[^.]+?$/)[0]}`
// const cloudPath = `sss-image${filePath.match(/\.[^.]+?$/)[0]}`
wx.cloud.uploadFile({
cloudPath,
filePath,
success: res => {
console.log('[上传文件] 成功:', res)
app.globalData.fileID = res.fileID
app.globalData.cloudPath = cloudPath
app.globalData.imagePath = filePath
wx.navigateTo({
url: '../storageConsole/storageConsole'
})
},
fail: e => {
console.error('[上传文件] 失败:', e)
wx.showToast({
icon: 'none',
title: '上传失败',
})
},
complete: () => {
wx.hideLoading()
}
})
},
fail: e => {
console.error(e)
}
})
},