微信小程序云开发页面的创建、读取数据
原创
前面说到：微信小程序云开发 初学者入门教程一（云开发环境搭建）https://cloud.tencent.com/developer/article/1361807，开通环境，部署环境之后，现在开始创建第一个界面。
1：把小程序版本更新到最新，在桌面上创建一个文件夹，选择云开发模板，我们可以看到文件目录结构，默认的代码和架构。这些代码和目录结构不要删除，后面会用到
默认的代码和目录如下：
2：创建一个main文件夹
图片.png
3：修改app.json文件
打开app.json文件，添加"pages/main/main",
我这里放在第一行，方便打开就进入main界面。
4：完成之后，运行，开始在main.wxml，main.js里面写页面代码
wxml
<view>
<input style='margin-top: 40rpx;' placeholder="请输入姓名" value="{{name}}" bindinput="bindKeyInputName" />
<input style='margin-top: 40rpx;' placeholder="请输入年龄" value="{{age}}" bindinput="bindKeyInputAge" />
<button style='margin-top: 40rpx;' bindtap='insertData'>插入数据</button>
<input style='margin-top: 40rpx;' placeholder="请输入记录ID" value="{{recordId}}" bindinput="bindKeyInputId" />
<button style='margin-top: 40rpx;' bindtap='queryData'>查询数据</button>
<text style='margin-top: 40rpx;'>
姓名：{{nameResult}}
</text>
<text style='margin-top: 80rpx;'>
年龄：{{ageResult}}
</text>
</view>wxss
暂时没写js
// miniprogram/pages/main/main.js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
db:undefined,
test:undefined,
data: {
name:'',
age:'',
recordId:'',
nameResult:'',
ageResult:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this
// 调用login云函数获取openid
wx.cloud.callFunction({
name: 'login',
data: {},
success: res => {
console.log('[云函数] [login] user openid: ', res.result.openid)
app.globalData.openid = res.result.openid
wx.cloud.init({ env: 'minicloud' })
that.db = wx.cloud.database()
that.test = that.db.collection('test')
},
fail: err => {
console.error('[云函数] [login] 调用失败', err)
wx.navigateTo({
url: '../deployFunctions/deployFunctions',
})
}
})
},
// 单击“插入数据”按钮调用该函数
insertData:function() {
var that = this
try
{
// 将年龄转换为整数类型值
var age = parseInt(that.data.age)
// 如果输入的年龄不是数字，会显示错误对话框，并退出该函数
if(isNaN(age))
{
// 显示错误对话框
wx.showModal({
title: '错误',
content: '请输入正确的年龄',
showCancel: false
})
return
}
// 向test数据集添加记录
this.test.add({
// data 字段表示需新增的 JSON 数据
data: {
name: that.data.name,
age: age
},
// 数据插入成功，调用该函数
success: function (res) {
console.log(res)
wx.showModal({
title: '成功',
content: '成功插入记录',
showCancel:false
})
that.setData({
name:'',
age:''
})
}
})
}
catch(e)
{
wx.showModal({
title: '错误',
content: e.message,
showCancel: false
})
}
},
// 单击“查询数据”按钮执行该函数
queryData:function() {
var that = this
// 根据记录ID搜索数据集
this.db.collection('test').doc(this.data.recordId).get({
// 找到记录集调用
success: function (res) {
// 将查询结果显示在页面上
that.setData({
nameResult:res.data.name,
ageResult:res.data.age
})
},
// 未查到数据时调用
fail:function(res) {
wx.showModal({
title: '错误',
content: '没有找到记录',
showCancel: false
})
}
})
},
// 下面的函数用于当更新input组件中的值时同时更新对应变量的值
bindKeyInputName: function (e) {
this.setData({
name: e.detail.value
})
},
bindKeyInputAge:function(e) {
this.setData({
age: e.detail.value
})
},
bindKeyInputId:function(e) {
this.setData({
recordId:e.detail.value
})
},
})5：打开云开发控制台，添加一个test集合
6：回到main的界面，填写姓名和年龄信息，点击插入数据，弹框显示插入数据成功
7：再次查看云数据库
在test里面我们可以看到刚刚插入的数据
8：关于查询，根据id进行查询
9：查询到我所得到的数据
上一篇的文章里，有提到像数据库里面插入一条数据，今天主要是把《小程序云开发：向云数据库插入一条数据》单独拉出来写个小的demo，方便记忆和理解。
参考文档：
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/add.html
1：方法在小程序的api里面说的很清楚，通过在集合对象上调用 add 方法往集合中插入一条记录，方法如下：
db.collection('todos').add({
// data 字段表示需新增的 JSON 数据
data: {
// _id: 'todo-identifiant-aleatoire', // 可选自定义 _id，在此处场景下用数据库自动分配的就可以了
description: 'learn cloud database',
due: new Date('2018-09-01'),
tags: [
'cloud',
'database'
],
// 为待办事项添加一个地理位置（113°E，23°N）
location: new db.Geo.Point(113, 23),
done: false
},
success(res) {
// res 是一个对象，其中有 _id 字段标记刚创建的记录的 id
console.log(res)
}
})2：打开云开发控制台，添加一个todos集合，插入的数据会在这个集合里面显示。
3：例子，在昨天的项目中接着main文件写
main.wxml
<view>
<button bindtap='insertData'>插入数据</button>
</view>main.js
const app = getApp()
Page({
data: {
},
onLoad: function (options) {
},
// 单击“插入数据”按钮调用该函数
insertData: function () {
const db = wx.cloud.database({});
const cont = db.collection('todos');
cont.add({
data: {
description: "向云数据库插入一条数据",
due: new Date('2018-12-25'),
tags: [
"cloud",
"database"
],
},
success: function (res) {
console.log(res._id)
wx.showModal({
title: '成功',
content: '成功插入记录',
showCancel: false
})
}
});
},
})4：打开界面，点击插入数据按钮，插入成功会出现提示弹框提示成功，插入的id也会在界面打印出来。
5：打开云开发控制台，我们可以看见自己刚刚插入的数据
6：那该如何从云数据库读取刚刚插入的这条数据，打印在前端界面？且看明天的博客。
1:接着昨天的《小程序云开发四：向云数据库插入一条数据》，今天要写的是读取那条插入的数据。
参考的api,请点击：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.html
2:主要方法：点击请求数据按钮的时候向数据库请求，cont.doc("XCIGn8DR1TiNF-Pt").get里面要填写插入的数据的时候标记的id。
// 单击“请求数据”按钮执行该函数
queryData: function () {
const db = wx.cloud.database({});
const cont = db.collection('todos');
cont.doc("XCIGn8DR1TiNF-Pt").get({
success: function (res) {
console.log(res.data)
}
})
},3:效果如下
4：demo的示例：
main.wxml
<view>
<button bindtap='insertData'>插入数据</button>
<button bindtap='queryData'>请求数据</button>
</view>main.js
const app = getApp()
Page({
data: {
},
onLoad: function (options) {
},
// 单击“插入数据”按钮调用该函数
insertData: function () {
const db = wx.cloud.database({});
const cont = db.collection('todos');
cont.add({
data: {
description: "向云数据库插入一条数据",
due: new Date('2018-12-25'),
tags: [
"cloud",
"database"
],
},
success: function (res) {
console.log(res._id)
}
});
},
// 单击“请求数据”按钮执行该函数
queryData: function () {
const db = wx.cloud.database({});
const cont = db.collection('todos');
cont.doc("XCIGn8DR1TiNF-Pt").get({
success: function (res) {
console.log(res.data)
}
})
},
})
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。