Getting Started with Cloud Database for WeChat Mini Program Cloud Development
introduce
Developers can use cloud development to develop WeChat applets and games, and use cloud capabilities without building a server.
Its basic capability database is a JSON database. Its function is to operate the database on the front end of the WeChat applet without building a self-built database, and can also read and write the database in the cloud function.
Preconditions
- When creating a new project, it must be checked
开启云服务. - In the WeChat developer tools, click Cloud Development to build a collection.
Precautions
The database API is divided into two parts: the applet and the server. The API on the applet has strict call permission control. Developers can directly call the API in the applet to operate on non-sensitive data. For data with higher security requirements, it can be operated through the server-side API in the cloud function. The environment of the cloud function is completely isolated from the client, and the database can be operated privately and safely on the cloud function.
In short: In terms of read and write data permissions, WeChat applets are the lowest, and cloud functions are as high as cloud databases.
If we need to give the applet the corresponding permissions, there is a way. We can set the WeChat applet read permission in the cloud development console to meet the needs of our own projects.
example
This example includes the whole process of database development, involving 链接 获取集合 增删改查 检索, and it can run after creating a new collection named user, for your reference. (If the cloud development console has not set the permission to add, delete, modify and check, an error may be reported, just set it up)
Don't talk nonsense, the source code is presented
demo.wxml
<!--index.wxml-->
<view class="container">
<!-- 用户 openid -->
<view class="userinfo">
<button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo" class="userinfo-avatar" style="background-image: url({
{avatarUrl}})" size="default"></button>
<view class="userinfo-nickname-wrapper">
<button class="userinfo-nickname" bindtap="onGetOpenid">点击获取 openid</button>
</view>
</view>
<!-- 增加数据 -->
<view class="uploader">
<view bindtap="addData" class="uploader-text">
<text>增加数据</text>
</view>
<view class="page-body">
<form catchsubmit="formSubmit" catchreset="formReset" hidden="{
{isFormHidden}}">
<!-- 开关
<view class="page-section page-section-gap">
<view class="page-section-title">switch</view>
<switch name="switch" />
</view> -->
<!-- <view class="section">
<view class="section__title">性别</view>
<picker bindchange="bindPickerChange" value="{
{index}}" range="{
{array}}">
<view class="picker">
性别: {
{array[index]}}
</view>
</picker>
</view> -->
<!-- 单选
<view class="page-section page-section-gap">
<view class="page-section-title">radio</view>
<radio-group name="radio">
<label>
<radio value="radio1" />选项一</label>
<label>
<radio value="radio2" />选项二</label>
</radio-group>
</view> -->
<!-- 多选
<view class="page-section page-section-gap">
<view class="page-section-title">checkbox</view>
<checkbox-group name="checkbox">
<label>
<checkbox value="checkbox1" />选项一</label>
<label>
<checkbox value="checkbox2" />选项二</label>
</checkbox-group>
</view> -->
<!-- 滑动选择
<view class="page-section page-section-gap">
<view class="page-section-title">slider</view>
<slider value="50" name="slider" show-value></slider>
</view> -->
<!-- 输入框 -->
<view class="page-section">
<view class="page-section-title">
<input class="weui-input" name="userName" placeholder="请输入用户名称" />
</view>
</view>
<!-- 输入框 -->
<view class="page-section">
<view class="page-section-title">
<input class="weui-input" name="itCard" placeholder="请输入昵称" />
</view>
</view>
<!-- 输入框 -->
<view class="page-section">
<view class="page-section-title">
<input class="weui-input" name="phone" placeholder="请输入电话" />
</view>
</view>
<!-- 输入框 -->
<view class="page-section">
<view class="page-section-title">
<input class="weui-input" name="email" placeholder="请输入邮箱" />
</view>
</view>
<!-- 提交 -->
<view class="btn-area">
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">提交</button>
<button style="margin: 30rpx 0" type="primary" formType="submit">Submit</button>
<button style="margin: 30rpx 0" formType="reset">Reset</button>
</view>
</form>
</view>
</view>
<!-- 查看数据 -->
<view class="uploader">
<view bindtap="seeData" class="uploader-text">
<text>查看数据</text>
</view>
<view class="uploader-text" wx:for="{
{user}}" wx:key="key">
<text>{
{item.userName}}</text>
</view>
</view>
<!-- 修改数据 -->
<view class="uploader">
<view bindtap="updata" class="uploader-text">
<text>修改数据</text>
</view>
<view class="page-body">
<form catchsubmit="updatasubmit" catchreset="updatareset" hidden="{
{isupdataform}}">
<view class="btn-area">
<input name="userName" placeholder="重新输入姓名"></input>
</view>
<view class="btn-area">
<button style="margin:30rpx 0" type="primary" formType="submit">更新</button>
<button style="margin:30rpx 0" type="warn" formType="reset">重置</button>
</view>
</form>
</view>
</view>
<!-- 删除数据 -->
<view class="uploader">
<view bindtap="deleteData" class="uploader-text">
<text>删除最近一条数据</text>
</view>
<view class="uploader-text" wx:for="{
{users}}" wx:key="key">
<text>{
{item.userName}}</text>
</view>
</view>
</view>
demo.js
//index.js
const app = getApp()
//获取数据库环境引用
const db = wx.cloud.database({
env: "输入自己的数据库环境，也可不输入，不输入默认查找当前环境"
})
//链接数据库中的集合
const pave = db.collection("PavmentRecord")
const user = db.collection("user")
// util.js
//格式化日期，输出格式为y-m-d h m s
const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute].map(formatNumber).join(':') //返回年月日，时分秒
}
//转换int类型为string
const formatNumber = n => {
n = n.toString()
return n[1] ? n : '0' + n
}
Page({
data: {
avatarUrl: '../../images/user-unlogin.png',
userInfo: {
},
logged: false,
takeSession: false,
requestResult: '',
isFormHidden: true,
isupdataform: true,
users: {
},
array: ['男', '女'],
cloud: ''
},
onShareAppMessage() {
return {
title: 'picker-view',
path: 'page/component/pages/picker-view/picker-view'
}
},
onLoad: function () {
if (!wx.cloud) {
wx.redirectTo({
url: '../chooseLib/chooseLib',
})
return
}
var that = this
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: res => {
that.setData({
avatarUrl: res.userInfo.avatarUrl,
userInfo: res.userInfo
})
}
})
}
}
})
},
bindPickerChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index: e.detail.value
})
},
onGetUserInfo: function (e) {
if (!this.data.logged && e.detail.userInfo) {
this.setData({
logged: true,
avatarUrl: e.detail.userInfo.avatarUrl,
userInfo: e.detail.userInfo
})
}
},
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',
})
}
})
},
//增加数据
addData: function () {
this.setData({
isFormHidden: false
})
},
getPhoneNumber: function (e) {
console.log(e)
},
//提交表单
formSubmit(e) {
const ur = e.detail.value;
console.log("提交表单信息如下：")
console.lot(ur)
var date = formatTime(new Date());
console.log(date)
pave.add({
data: {
userName: 'test',
userPhone: '15239942334',
diseaseName: "test",
symCom: "test",
recordTime: date,
payMoney: 100.0
},
}).then(res => {
console.log(res)
}).catch(function (e) {
console.log(e)
})
},
//重置表单
formReset(e) {
console.log('form发生了reset事件，携带数据为：', e.detail.value)
this.setData({
chosen: ''
})
},
//查看数据
seeData(e) {
user.get().then(
res => {
console.log(res.data)
this.setData({
user: res.data
})
}
)
},
//修改数据
updata(e) {
this.setData({
isupdataform: false
})
},
updatasubmit(e) {
//查找user集合中id为以下数据的值，可以在e中获取，这里我简单写了一个。
user.where({
"_id": 'dc277a235f081fc20009534043d370cc'
}).set({
data: {
"userName": e.data.userName
},
success: function (res) {
console.log("更新成功：" + res)
}
})
},
updatareset(e) {
this.setData({
chosen: ''
})
},
deleteData(e) {
var that
wx.cloud.callFunction({
name: 'deleteData',
data: {
object: 'user',
id: 'a7d38b365f0852c2000c0a3b0b7aae7a'
}
}).then(res => {
console.log(res)
that = res.data
})
}
})
demo.wxss
/**index.wxss**/
page {
background: #f6f6f6;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.userinfo, .uploader, .tunnel {
margin-top: 40rpx;
height: 140rpx;
width: 100%;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.1);
border-left: none;
border-right: none;
display: flex;
flex-direction: row;
align-items: center;
transition: all 300ms ease;
}
.userinfo {
padding-left: 120rpx;
}
.userinfo-avatar {
width: 100rpx;
height: 100rpx;
margin: 20rpx;
border-radius: 50%;
background-size: cover;
background-color: white;
}
.userinfo-avatar[size] {
width: 100rpx;
}
.userinfo-avatar:after {
border: none;
}
.userinfo-nickname {
font-size: 32rpx;
color: #007aff;
background-color: white;
background-size: cover;
text-align: left;
padding-left: 0;
margin-left: 10px;
}
.userinfo-nickname::after {
border: none;
}
.userinfo-nickname-wrapper {
flex: 1;
}
.uploader, .tunnel {
height: auto;
padding: 0 0 0 40rpx;
flex-direction: column;
align-items: flex-start;
box-sizing: border-box;
}
.uploader-text, .tunnel-text {
width: 100%;
line-height: 52px;
font-size: 34rpx;
color: #007aff;
}
.uploader-container {
width: 100%;
height: 400rpx;
padding: 20rpx 20rpx 20rpx 0;
display: flex;
align-content: center;
justify-content: center;
box-sizing: border-box;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.uploader-image {
width: 100%;
height: 360rpx;
}
.tunnel {
padding: 0 0 0 40rpx;
}
.tunnel-text {
position: relative;
color: #222;
display: flex;
flex-direction: row;
align-content: center;
justify-content: space-between;
box-sizing: border-box;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.tunnel-text:first-child {
border-top: none;
}
.tunnel-switch {
position: absolute;
right: 20rpx;
top: -2rpx;
}
.disable {
color: #888;
}
.service {
position: fixed;
right: 40rpx;
bottom: 40rpx;
width: 140rpx;
height: 140rpx;
border-radius: 50%;
background: linear-gradient(#007aff, #0063ce);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
display: flex;
align-content: center;
justify-content: center;
transition: all 300ms ease;
}
.service-button {
position: absolute;
top: 40rpx;
}
.service:active {
box-shadow: none;
}
.request-text {
padding: 20rpx 0;
font-size: 24rpx;
line-height: 36rpx;
word-break: break-all;
}
demo.json
{
"usingComponents": {
},
"navigationBarTitleText":"数据操作"
}
For more information about WeChat Mini Programs 我的程序员提升专栏, please leave a message in the comment area if necessary.