微信小程序云开发全面解析:从入门到实战

一、什么是微信小程序云开发?

微信小程序云开发是微信官方提供的一套云端一体化开发解决方案,它为开发者提供了云函数、云数据库、云存储等后端服务,开发者无需搭建服务器即可快速开发小程序。云开发采用Serverless架构,让前端开发者也能轻松完成后端开发工作。

二、云开发的优势及解决的问题

1. 主要优势

  • 免运维:无需关心服务器部署、运维和扩容

  • 低成本:初期免费额度高,按量付费模式节省成本

  • 开发效率高:前端开发者可直接操作后端资源

  • 安全可靠:微信生态原生支持,自带安全防护

2. 解决的核心问题

  • 降低开发门槛:前端开发者无需学习后端语言即可完成后端开发

  • 简化开发流程:无需购买域名、备案、配置服务器等复杂流程

  • 提高开发效率:内置常用功能,减少重复造轮子的时间

  • 降低运维成本:自动扩容,无需人工干预

三、云开发核心概念

1. 云函数

云函数是运行在云端的JavaScript代码,可以处理复杂的业务逻辑。每个云函数都是一个独立的小程序后端服务,可以单独部署和运行。

特点:

  • 运行在Node.js环境中

  • 可以调用其他云函数

  • 可以访问云数据库和云存储

  • 自动弹性伸缩

2. 云对象

云对象是云开发提供的一种更高级的抽象,它将一组相关的云函数封装为一个对象,提供更面向对象的编程方式。云对象在云函数的基础上提供了更好的代码组织和复用能力。

3. 云数据库

云数据库是云开发提供的JSON文档型数据库,基于MongoDB进行封装,提供简单易用的API。

特点:

  • 文档型数据库,数据格式为JSON

  • 支持实时推送

  • 自带权限管理

  • 支持索引和聚合操作

四、如何使用云开发

1. 开通云开发

  1. 在微信开发者工具中创建小程序项目

  2. 在项目根目录右键选择"新建云开发环境"

  3. 按照提示开通云开发服务

2. 初始化云开发

在app.js中初始化云开发:

App({
  onLaunch: function() {
    wx.cloud.init({
      env: '你的环境ID', // 云开发环境ID
      traceUser: true // 记录用户访问
    });
  }
});

五、实战:页面.JS直接调用云函数操作云数据库

1. 云数据库增删改查示例

添加数据
// 添加一条记录
addData: function() {
  const db = wx.cloud.database()
  db.collection('users').add({       //这里的users是表名
    data: {
      name: '张三',
      age: 25,
      gender: 'male',
      createTime: db.serverDate()
    },
    success: res => {
      console.log('添加成功', res)
      wx.showToast({
        title: '添加成功',
      })
    },
    fail: err => {
      console.error('添加失败', err)
    }
  })
}
查询数据
// 查询数据
queryData: function() {
  const db = wx.cloud.database()
  db.collection('users').where({
    age: _.gt(20) // 查询年龄大于20的记录
  }).get({
    success: res => {
      console.log('查询结果', res.data)
      this.setData({
        userList: res.data
      })
    },
    fail: err => {
      console.error('查询失败', err)
    }
  })
}


//如果把where条件去掉自己是表面.get的话就是获取所有的数据了
更新数据
// 更新数据
updateData: function() {
  const db = wx.cloud.database()
  db.collection('users').doc('记录ID').update({
    data: {
      age: 26
    },
    success: res => {
      console.log('更新成功', res)
      wx.showToast({
        title: '更新成功',
      })
    },
    fail: err => {
      console.error('更新失败', err)
    }
  })
}
删除数据
// 删除数据
deleteData: function() {
  const db = wx.cloud.database()
  db.collection('users').doc('记录ID').remove({
    success: res => {
      console.log('删除成功', res)
      wx.showToast({
        title: '删除成功',
      })
    },
    fail: err => {
      console.error('删除失败', err)
    }
  })
}

微信小程序云开发:云函数操作数据库的完整实现

下面我将详细介绍如何通过云函数实现云数据库的增删改查操作,每个操作都会有独立的云函数实现和详细的代码注释。

1. 创建云函数基础结构

首先在cloudfunctions文件夹右键选择"新建Node.js云函数",创建以下四个云函数:

  1. userAdd - 添加用户数据

  2. userQuery - 查询用户数据

  3. userUpdate - 更新用户数据

  4. userDelete - 删除用户数据

2. 添加数据云函数实现

userAdd/index.js

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV // 使用当前云环境
})

// 初始化数据库
const db = cloud.database()

/**
 * 添加用户数据
 * @param {Object} event 调用云函数时传入的参数
 * @param {String} event.name 用户名
 * @param {Number} event.age 用户年龄
 * @param {String} event.gender 用户性别
 * @returns {Object} 操作结果
 */
exports.main = async (event, context) => {
  try {
    // 参数校验
    if (!event.name || !event.age) {
      return {
        code: 400,
        message: '缺少必要参数: name和age'
      }
    }

    // 构造用户数据
    const userData = {
      name: event.name,
      age: event.age,
      gender: event.gender || 'unknown', // 默认值
      createTime: db.serverDate(), // 服务器时间
      updateTime: db.serverDate()
    }

    // 向users集合添加数据
    const res = await db.collection('users').add({
      data: userData
    })

    // 返回结果
    return {
      code: 200,
      message: '添加成功',
      data: {
        _id: res._id, // 返回自动生成的文档ID
        ...userData
      }
    }
  } catch (err) {
    console.error('添加用户失败:', err)
    return {
      code: 500,
      message: '添加用户失败',
      error: err
    }
  }
}

3. 查询数据云函数实现

userQuery/index.js

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

const db = cloud.database()
const _ = db.command // 获取数据库查询指令

/**
 * 查询用户数据
 * @param {Object} event 调用参数
 * @param {Object} [event.condition] 查询条件
 * @param {Number} [event.page=1] 页码
 * @param {Number} [event.pageSize=10] 每页数量
 * @returns {Object} 查询结果
 */
exports.main = async (event, context) => {
  try {
    // 设置默认值
    const page = event.page || 1
    const pageSize = event.pageSize || 10
    const condition = event.condition || {}

    // 计算跳过的记录数
    const skip = (page - 1) * pageSize

    // 查询数据
    const query = db.collection('users')
      .where(condition) // 查询条件
      .skip(skip)       // 跳过记录数
      .limit(pageSize)  // 每页数量
      .orderBy('createTime', 'desc') // 按创建时间降序

    // 获取查询结果和总数
    const [dataRes, countRes] = await Promise.all([
      query.get(),
      db.collection('users').where(condition).count()
    ])

    // 返回结果
    return {
      code: 200,
      message: '查询成功',
      data: {
        list: dataRes.data,
        pagination: {
          total: countRes.total,
          page,
          pageSize,
          totalPages: Math.ceil(countRes.total / pageSize)
        }
      }
    }
  } catch (err) {
    console.error('查询用户失败:', err)
    return {
      code: 500,
      message: '查询用户失败',
      error: err
    }
  }
}

4. 更新数据云函数实现

userUpdate/index.js

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

const db = cloud.database()

/**
 * 更新用户数据
 * @param {Object} event 调用参数
 * @param {String} event._id 用户ID
 * @param {Object} event.updateData 更新数据
 * @returns {Object} 操作结果
 */
exports.main = async (event, context) => {
  try {
    // 参数校验
    if (!event._id) {
      return {
        code: 400,
        message: '缺少必要参数: _id'
      }
    }

    if (!event.updateData || Object.keys(event.updateData).length === 0) {
      return {
        code: 400,
        message: 'updateData不能为空'
      }
    }

    // 构造更新数据
    const updateData = {
      ...event.updateData,
      updateTime: db.serverDate() // 更新修改时间
    }

    // 执行更新操作
    const res = await db.collection('users')
      .doc(event._id)
      .update({
        data: updateData
      })

    // 检查更新结果
    if (res.stats.updated === 0) {
      return {
        code: 404,
        message: '未找到匹配的用户记录'
      }
    }

    // 返回更新后的数据
    const updatedUser = await db.collection('users')
      .doc(event._id)
      .get()

    return {
      code: 200,
      message: '更新成功',
      data: updatedUser.data
    }
  } catch (err) {
    console.error('更新用户失败:', err)
    return {
      code: 500,
      message: '更新用户失败',
      error: err
    }
  }
}

5. 删除数据云函数实现

userDelete/index.js

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

const db = cloud.database()

/**
 * 删除用户数据
 * @param {Object} event 调用参数
 * @param {String} event._id 用户ID
 * @returns {Object} 操作结果
 */
exports.main = async (event, context) => {
  try {
    // 参数校验
    if (!event._id) {
      return {
        code: 400,
        message: '缺少必要参数: _id'
      }
    }

    // 先查询要删除的记录
    const userRecord = await db.collection('users')
      .doc(event._id)
      .get()

    if (!userRecord.data) {
      return {
        code: 404,
        message: '未找到匹配的用户记录'
      }
    }

    // 执行删除操作
    const res = await db.collection('users')
      .doc(event._id)
      .remove()

    // 返回结果
    return {
      code: 200,
      message: '删除成功',
      data: {
        deletedCount: res.stats.removed,
        deletedUser: userRecord.data
      }
    }
  } catch (err) {
    console.error('删除用户失败:', err)
    return {
      code: 500,
      message: '删除用户失败',
      error: err
    }
  }
}

 小程序端调用示例

添加用户

wx.cloud.callFunction({
  name: 'userAdd',
  data: {
    name: '张三',
    age: 25,
    gender: 'male'
  },
  success: res => {
    console.log('添加成功:', res.result)
    if (res.result.code === 200) {
      wx.showToast({
        title: '添加成功',
        icon: 'success'
      })
    } else {
      wx.showToast({
        title: res.result.message,
        icon: 'none'
      })
    }
  },
  fail: err => {
    console.error('添加失败:', err)
    wx.showToast({
      title: '添加失败',
      icon: 'none'
    })
  }
})

查询用户

wx.cloud.callFunction({
  name: 'userQuery',
  data: {
    condition: {
      age: _.gt(20) // 查询年龄大于20的用户
    },
    page: 1,
    pageSize: 10
  },
  success: res => {
    console.log('查询结果:', res.result)
    if (res.result.code === 200) {
      this.setData({
        userList: res.result.data.list,
        pagination: res.result.data.pagination
      })
    }
  },
  fail: err => {
    console.error('查询失败:', err)
    wx.showToast({
      title: '查询失败',
      icon: 'none'
    })
  }
})

更新用户

wx.cloud.callFunction({
  name: 'userUpdate',
  data: {
    _id: '用户ID', // 替换为实际用户ID
    updateData: {
      age: 26,
      gender: 'female'
    }
  },
  success: res => {
    console.log('更新结果:', res.result)
    if (res.result.code === 200) {
      wx.showToast({
        title: '更新成功',
        icon: 'success'
      })
    } else {
      wx.showToast({
        title: res.result.message,
        icon: 'none'
      })
    }
  },
  fail: err => {
    console.error('更新失败:', err)
    wx.showToast({
      title: '更新失败',
      icon: 'none'
    })
  }
})

删除用户

wx.cloud.callFunction({
  name: 'userDelete',
  data: {
    _id: '用户ID' // 替换为实际用户ID
  },
  success: res => {
    console.log('删除结果:', res.result)
    if (res.result.code === 200) {
      wx.showToast({
        title: '删除成功',
        icon: 'success'
      })
      // 刷新列表
      this.queryUsers()
    } else {
      wx.showToast({
        title: res.result.message,
        icon: 'none'
      })
    }
  },
  fail: err => {
    console.error('删除失败:', err)
    wx.showToast({
      title: '删除失败',
      icon: 'none'
    })
  }
})

云对象使用示例

1. 创建云对象

cloudfunctions目录下新建云对象userManager,创建index.js

// 云对象入口文件
const db = require('wx-server-sdk').database()
const _ = db.command

class UserManager {
  constructor() {}
  
  // 添加用户
  async addUser(userInfo) {
    return await db.collection('users').add({
      data: {
        ...userInfo,
        createTime: db.serverDate()
      }
    })
  }
  
  // 查询用户
  async queryUsers(condition) {
    return await db.collection('users').where(condition).get()
  }
  
  // 更新用户
  async updateUser(id, updateData) {
    return await db.collection('users').doc(id).update({
      data: updateData
    })
  }
  
  // 删除用户
  async deleteUser(id) {
    return await db.collection('users').doc(id).remove()
  }
}

module.exports = UserManager

2. 调用云对象

在小程序页面中:

// 调用云对象
callUserManager: async function() {
  try {
    const userManager = wx.cloud.importObject('userManager')
    
    // 添加用户
    const addRes = await userManager.addUser({
      name: '王五',
      age: 28,
      gender: 'male'
    })
    console.log('添加成功', addRes)
    
    // 查询用户
    const queryRes = await userManager.queryUsers({
      age: _.gt(20)
    })
    console.log('查询结果', queryRes)
    
  } catch (err) {
    console.error('操作失败', err)
  }
}

今天就分享到这里兄弟们,我作为一个程序员,我觉得学微信小程序开发的人,必须得很有必要学一下这个云开发的因为很简单无非就是不一样的对数据库的增删改查而已,但是省了你多事情,我这个就已经总结了重点内容,无需去搜视频学习,直接拿过去试试然后自己研究研究就学会了。因为我也是这么学的哈哈哈哈哈

你可能感兴趣的:(微信小程序,小程序)