前面说到: 微信小程序云开发 初学者入门教程一 (云开发环境搭建)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: 查询到我所得到的数据
来源: http://www.jianshu.com/p/f5ca4b2899e1