小程序云开发教程三:创建第一个界面

前面说到:微信小程序云开发 初学者入门教程一(云开发环境搭建)https://www.jianshu.com/p/5df4d51125e3,开通环境,部署环境之后,现在开始创建第一个界面。

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:查询到我所得到的数据

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,对于博客上面有不会的问题,可以加入qq群聊来问我:473819131。 参考链接:http://blog.51cto.com/androidguy/2308368

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券