Primeros pasos con Cloud Database para WeChat Mini Program Desarrollo en la nube
introducir
Los desarrolladores pueden usar el desarrollo en la nube para desarrollar subprogramas y juegos de WeChat, y usar las capacidades de la nube sin construir un servidor.
Su base de datos de capacidad básica es una base de datos JSON. Su función es operar la base de datos en el extremo frontal del subprograma WeChat sin construir una base de datos autoconstruida, y también puede leer y escribir la base de datos en la función de la nube.
condiciones previas
- Al crear un nuevo proyecto, se debe marcar
开启云服务. - En las herramientas para desarrolladores de WeChat, haga clic en Desarrollo en la nube para crear una colección.
Precauciones
La API de la base de datos se divide en dos partes: el subprograma y el servidor. La API del subprograma tiene un estricto control de permisos de llamada. Los desarrolladores pueden llamar directamente a la API del subprograma para operar con datos no confidenciales. Para datos con mayores requisitos de seguridad, se puede operar a través de la API del lado del servidor en la función de la nube. El entorno de la función de la nube está completamente aislado del cliente, y la base de datos se puede operar de forma privada y segura en la función de la nube.
En resumen: en términos de permisos de lectura y escritura de datos, los applets de WeChat son los más bajos y las funciones de la nube son tan altas como las bases de datos en la nube.
Si necesitamos darle al applet los permisos correspondientes, hay una manera. Podemos configurar el permiso de lectura del subprograma WeChat en la consola de desarrollo en la nube para satisfacer las necesidades de nuestros propios proyectos.
ejemplo
Este ejemplo incluye todo el proceso de desarrollo de la base de datos, que incluye 链接 获取集合 增删改查 检索y puede ejecutarse después de crear una nueva colección llamada usuario, para su referencia. (Si la consola de desarrollo en la nube no ha configurado el permiso para agregar, eliminar, modificar y verificar, es posible que se informe un error, simplemente configúrelo)
No digas tonterías, se presenta el código fuente.
demostración.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":"数据操作"
}
Para obtener más información sobre los miniprogramas de WeChat 我的程序员提升专栏, deje un mensaje en el área de comentarios si es necesario.