接下来修改app.json文件，将main页面变成首页（第一个显示的页面），也就是将 "pages/main/main"放在pages数组的第一个元素的位置，修改后的app.json文件的内容如下：
{ "cloud": true, "pages": [ "pages/main/main", "pages/userConsole/userConsole", "pages/storageConsole/storageConsole", "pages/databaseGuide/databaseGuide", "pages/addFunction/addFunction", "pages/deployFunctions/deployFunctions", "pages/chooseLib/chooseLib" ], "window": { "backgroundColor": "#F6F6F6", "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#F6F6F6", "navigationBarTitleText": "云开发 QuickStart", "navigationBarTextStyle": "black" } }
现在重新运行小程序，会看到main页面已经成为了小程序的首页。由于本例的页面需要用到一些组件，所以需要现在main.wxml文件中输入下面的代码完成
main页面的布局。
<view> <input placeholder="请输入姓名" value="{{name}}" bindinput="bindKeyInputName" /> <input placeholder="请输入年龄" value="{{age}}" bindinput="bindKeyInputAge" /> <button bindtap='insertData'>插入数据</button> <input placeholder="请输入记录ID" value="{{recordId}}" bindinput="bindKeyInputId" /> <button bindtap='queryData'>查询数据</button> <text> 姓名：{{nameResult}} </text> <text> 年龄：{{ageResult}} </text> </view>
在main.wxml文件中，包含3个<input>组件和2个text组件，这5个组件分别与age、name、recordId，nameResult和ageResult五个变量绑定，修改和获取这5个组件的值也只需要考虑这5个变量即可。
在小程序中调用云API之前，必须要获取小程序的openid，这个openid表示当前小程序的用户ID。由于进入小程序必须要通过微信，所以小程序使用与微信相同的用户验证体系，因此，小程序就不需要单独登录了，而openid就是小程序是否登录的凭证。
获取openid的代码已经包含在模板中了，只需要找到index.js文件，并搜索onGetOpenid函数，会看到如下的代码。
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', }) } }) }
上面的代码用于调用名为login的云函数获取小程序的openid。通常只需要将onGetOpenid函数中的代码直接复制到main.js文件中的onLoad函数即可。
向云数据库插入数据的代码前面已经学过，一会大家可以看本例完整的代码。从云数据库中查询数据可以使用下面的代码。
db.collection(集合名）.doc(记录ID）.get( { // 查询到数据后触发，res参数值包含的查询到 数据 success:function(res) { }, // 未查询到数据触发 fail:function(res) { } })
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: '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 }) }, })
现在重新运行小程序，并添加一些数据，看到云开发控制台中的test集合下多了几条记录，如下图所示。这表明已经将数据成功插入test集合。
