一、前提准备
1. 打开微信web开发者工具;
2. 创建一个项目,选择云开发;
3. 点击与模拟器、编辑器和编译器并排的云开发,打开云开发控制台;
4. 第一次需要点击开通,开通之后创建一个环境;
5. 选择cloudfunctions文件夹,右击选择更多设置,然后选择环境;
6. 选择cloudfunctions下的login文件夹;
7. 右击选择上传并部署:云端安装依赖(不上传node_moudules);
8. 在云开发控制台的数据库中创建一个test集合;
9. miniprogram/pages/目录下创建一个main目录;
10. 在main目录下创建一个main Page;
二、进入开发
- 将main作为主页
在miniprogram/pages/app.json中,将"pages/main/main"移动到最前面。
{
"pages": [
"pages/main/main",
"pages/index/index",
"pages/userConsole/userConsole",
"pages/storageConsole/storageConsole",
"pages/databaseGuide/databaseGuide",
"pages/addFunction/addFunction",
"pages/deployFunctions/deployFunctions",
"pages/chooseLib/chooseLib",
"pages/openapi/openapi"
],
...
- main.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>
- main.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: 'yale' })
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
})
},
})
- 测试
1. 在主页面输入姓名和年龄,点击插入数据,然后在云控制平台中可查看刚在添加的数据;
2. 从云控制平台复制那条数据的id过来,粘贴到查询数据按钮上的输入框中,再点击查询按钮,即可在下方显示从云数据库中查出的数据。