微信小程序入门笔记-使用云开发（4）

2023-10-27 16:23:34

1、云数据库

一、介绍

云开发提供了一个 JSON 数据库，顾名思义，数据库中的每条记录都是一个 JSON 格式的对象。一个数据库可以有多个集合（相当于关系型数据中的表），集合可看做一个 JSON 数组，数组中的每个对象就是一条记录，记录的格式是 JSON 对象。

关系型数据库和 JSON 数据库的概念对应关系如下表：

关系型	文档型
数据库 database	数据库 database
表 table	集合 collection
行 row	记录 record / doc
列 column	字段 field

云开发数据库提供以下几种数据类型：

String：字符串
Number：数字
Object：对象
Array：数组
Bool：布尔值
Date：时间
Geo：多种地理位置类型，详见
Null

二、使用

（1、使用之前把页面创建好（我创建了home和personal）：

微信小程序入门笔记-使用云开发（4）

（2、配置app.json

微信小程序入门笔记-使用云开发（4）

在“云开发”中点击数据库，创建user、image两个集合

微信小程序入门笔记-使用云开发（4）

personal.js

  1 /**
  2  * 初始化数据库
  3  * 用evn属性可以切换属性
  4  * database({evn:test})
  5  */
  6 const db = wx.cloud.database();
  7 const user = db.collection("user");
  8 // pages/personal/personal.js
  9 Page({
 10   /**
 11    * 页面的初始数据
 12    */
 13   data: {
 14     images: []
 15   },
 16   /**
 17    * 插入数据
 18    */
 19   insert: function(){
 20     user.add({
 21       data: {
 22         name: ‘hh‘,
 23         age: 20
 24       }
 25     }).then(res=>{
 26       // 回调函数
 27       console.log(res)
 28       wx.showToast({
 29         title: ‘success‘,
 30       })
 31     }).catch(err=>{
 32       //抓取错误
 33       console.log(err)
 34     })
 35   },
 36   update: function(){
 37     // 根据云数据库 _id更新
 38     user.doc(‘1acf1de95e48f2f310877a982d2de27f‘).update({
 39       data: {
 40         age: 19,
 41         name: ‘mm‘
 42       }
 43     }).then(res => {
 44       console.log(res)
 45       console.log(‘success‘)
 46     }).catch(err => {
 47       console.log(err)
 48     })
 49   },
 50   select: function () {
 51     user.where({
 52       name: ‘hh‘
 53     }).get().then(res => {
 54       console.log(res)
 55       console.log(‘success‘)
 56     }).catch(err => {
 57       console.log(err)
 58     })
 59   },
 60   del: function(){
 61     user.doc(‘1acf1de95e48f2f310877a982d2de27f‘).remove()
 62     .then(res => {
 63       console.log(res)
 64       console.log(‘success‘)
 65     }).catch(err => {
 66       console.log(err)
 67     })
 68   },
 69   /**
 70    * 生命周期函数--监听页面加载
 71    */
 72   onLoad: function (options) {
 73 
 74   },
 75 
 76   /**
 77    * 生命周期函数--监听页面初次渲染完成
 78    */
 79   onReady: function () {
 80 
 81   },
 82 
 83   /**
 84    * 生命周期函数--监听页面显示
 85    */
 86   onShow: function () {
 87 
 88   },
 89 
 90   /**
 91    * 生命周期函数--监听页面隐藏
 92    */
 93   onHide: function () {
 94 
 95   },
 96 
 97   /**
 98    * 生命周期函数--监听页面卸载
 99    */
100   onUnload: function () {
101 
102   },
103 
104   /**
105    * 页面相关事件处理函数--监听用户下拉动作
106    */
107   onPullDownRefresh: function () {
108 
109   },
110 
111   /**
112    * 页面上拉触底事件的处理函数
113    */
114   onReachBottom: function () {
115 
116   },
117 
118   /**
119    * 用户点击右上角分享
120    */
121   onShareAppMessage: function () {
122 
123   }
124 })

View Code

personal.wxml

1 <view>云数据库</view>
2 <button bindtap="insert">插入数据</button>
3 <button bindtap="update">更新数据</button>
4 <button bindtap="select">查询数据</button>
5 <button bindtap="del">删除数据</button>

View Code

微信小程序入门笔记-使用云开发（4）

2、云函数

一、介绍

云函数即在云端（服务器端）运行的函数。在物理设计上，一个云函数可由多个文件组成，占用一定量的 CPU 内存等计算资源；各云函数完全独立；可分别部署在不同的地区。开发者无需购买、搭建服务器，只需编写函数代码并部署到云端即可在小程序端调用，同时云函数之间也可互相调用。

一个云函数的写法与一个在本地定义的 JavaScript 方法无异，代码运行在云端 Node.js 中。当云函数被小程序端调用时，定义的代码会被放在 Node.js 运行环境中执行。我们可以如在 Node.js 环境中使用 JavaScript 一样在云函数中进行网络请求等操作，而且我们还可以通过云函数后端 SDK 搭配使用多种服务，比如使用云函数 SDK 中提供的数据库和存储 API 进行数据库和存储的操作，这部分可参考数据库和存储后端 API 文档。

云开发的云函数的独特优势在于与微信登录鉴权的无缝整合。当小程序端调用云函数时，云函数的传入参数中会被注入小程序端用户的 openid，开发者无需校验 openid 的正确性因为微信已经完成了这部分鉴权，开发者可以直接使用该 openid。

二、使用

（1、安装nodejs环境

（2、创建云函数（我这里创建了3个云函数）

微信小程序入门笔记-使用云开发（4）

修改各个云函数的index.js

batchDelete:

// 云函数入口文件
const cloud = require(‘wx-server-sdk‘)

cloud.init()
const db = cloud.database();
// 云函数入口函数
exports.main = async (event, context) => {
  try{
    return await db.collection(‘user‘).where({
      name: ‘hh‘
    }).remove();
  }catch(e){
    console.error(e)
  }
}

// 云函数模板
// 部署：在 cloud-functions/login 文件夹右击选择 “上传并部署”

const cloud = require(‘wx-server-sdk‘)

// 初始化 cloud
cloud.init({
  // API 调用都保持和云函数当前所在环境一致
  env: cloud.DYNAMIC_CURRENT_ENV
})

/**
 * 这个示例将经自动鉴权过的小程序用户 openid 返回给小程序端
 * 
 * event 参数包含小程序端调用传入的 data
 * 
 */
exports.main = (event, context) => {
  // 可执行其他自定义逻辑
  // console.log 的内容可以在云开发云函数调用日志查看

  // 获取 WX Context (微信调用上下文)，包括 OPENID、APPID、及 UNIONID（需满足 UNIONID 获取条件）等信息
  const wxContext = cloud.getWXContext()

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
    env: wxContext.ENV,
  }
}

sum:

// const cloud = require(‘wx-server-sdk‘)

// cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  return {
    sum: event.a + event.b
  }
}

然后把写完的函数都要上传云端（记住修改过云函数一定要同步到云端）

微信小程序入门笔记-使用云开发（4）

页面代码：

personal.js

/**
 * 初始化数据库
 * 用evn属性可以切换属性
 * database({evn:test})
 */
const db = wx.cloud.database();
const user = db.collection("user");
// pages/personal/personal.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    images: []
  },
  /**
   * 插入数据
   */
  insert: function(){
    user.add({
      data: {
        name: ‘hh‘,
        age: 20
      }
    }).then(res=>{
      // 回调函数
      console.log(res)
      wx.showToast({
        title: ‘success‘,
      })
    }).catch(err=>{
      //抓取错误
      console.log(err)
    })
  },
  update: function(){
    // 根据云数据库 _id更新
    user.doc(‘1acf1de95e48f2f310877a982d2de27f‘).update({
      data: {
        age: 19,
        name: ‘mm‘
      }
    }).then(res => {
      console.log(res)
      console.log(‘success‘)
    }).catch(err => {
      console.log(err)
    })
  },
  select: function () {
    user.where({
      name: ‘hh‘
    }).get().then(res => {
      console.log(res)
      console.log(‘success‘)
    }).catch(err => {
      console.log(err)
    })
  },
  del: function(){
    user.doc(‘1acf1de95e48f2f310877a982d2de27f‘).remove()
    .then(res => {
      console.log(res)
      console.log(‘success‘)
    }).catch(err => {
      console.log(err)
    })
  },
  sum: function () {
    wx.cloud.callFunction({
      name: ‘sum‘,//云函数名
      data: {
        a: 2,
        b: 3
      }
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    });
  },
  getOpenId: function () {
    wx.cloud.callFunction({
      name: ‘login‘
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    });
  },
  batchDel: function () {
    wx.cloud.callFunction({
      name: ‘batchDelete‘
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.error(err)
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

View Code

personal.wxml

<view>云数据库</view>
<button bindtap="insert">插入数据</button>
<button bindtap="update">更新数据</button>
<button bindtap="select">查询数据</button>
<button bindtap="del">删除数据</button>
<view>云函数</view>
<button bindtap="sum">调用云函数sum</button>
<button bindtap="getOpenId">获取getOpenId</button>
<button bindtap="batchDel">批量删除</button>

View Code

微信小程序入门笔记-使用云开发（4）

3、云存储

一、介绍

云存储提供高可用、高稳定、强安全的云端存储服务，支持任意数量和形式的非结构化数据存储，如视频和图片，并在控制台进行可视化管理。云存储包含以下功能：

存储管理：支持文件夹，方便文件归类。支持文件的上传、删除、移动、下载、搜索等，并可以查看文件的详情信息
权限设置：可以灵活设置哪些用户是否可以读写该文件夹中的文件，以保证业务的数据安全
上传管理：在这里可以查看文件上传历史、进度及状态
文件搜索：支持文件前缀名称及子目录文件的搜索
组件支持：支持在 image、audio 等组件中传入云文件 ID

二、使用

（1、文件上传流程：

微信小程序入门笔记-使用云开发（4）

（2、代码：

personal.wxml

<view>云数据库</view>
<button bindtap="insert">插入数据</button>
<button bindtap="update">更新数据</button>
<button bindtap="select">查询数据</button>
<button bindtap="del">删除数据</button>
<view>云函数</view>
<button bindtap="sum">调用云函数sum</button>
<button bindtap="getOpenId">获取getOpenId</button>
<button bindtap="batchDel">批量删除</button>
<view>云存储</view>
<button bindtap="uploadImg">上传图片</button>
<button bindtap="getImg">获取图片</button>
<block wx:for=‘{{images}}‘ wx:key=‘index‘>
<image src="{{item.fileId}}"></image>
<button data-fileId="{{item.fileId}}" bindtap="downloadFile">文件下载</button>
</block>

View Code

personal.js

/**
 * 初始化数据库
 * 用evn属性可以切换属性
 * database({evn:test})
 */
const db = wx.cloud.database();
const user = db.collection("user");
const cloudImage = db.collection("image");
// pages/personal/personal.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    images: []
  },
  /**
   * 插入数据
   */
  insert: function () {
    user.add({
      data: {
        name: ‘hh‘,
        age: 20
      }
    }).then(res => {
      // 回调函数
      console.log(res)
      wx.showToast({
        title: ‘success‘,
      })
    }).catch(err => {
      //抓取错误
      console.log(err)
    })
  },
  update: function () {
    user.doc(‘74b140b45e4513af0f0aab605928da00‘).update({
      data: {
        age: 19,
        name: ‘mm‘
      }
    }).then(res => {
      console.log(res)
      console.log(‘success‘)
    }).catch(err => {
      console.log(err)
    })
  },
  del: function () {
    user.doc(‘0ec685215e45122d0f0ad2e55bb2ee69‘).remove()
      .then(res => {
        console.log(res)
        console.log(‘success‘)
      }).catch(err => {
        console.log(err)
      })
  },
  select: function () {
    user.where({
      name: ‘hh‘
    }).get().then(res => {
      console.log(res)
      console.log(‘success‘)
    }).catch(err => {
      console.log(err)
    })
  },
  sum: function () {
    wx.cloud.callFunction({
      name: ‘sum‘,//云函数名
      data: {
        a: 2,
        b: 3
      }
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    });
  },
  getOpenId: function () {
    wx.cloud.callFunction({
      name: ‘login‘
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    });
  },
  batchDel: function () {
    wx.cloud.callFunction({
      name: ‘batchDelete‘
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.error(err)
    });
  },
  //上传图片
  uploadImg: function () {
    wx.chooseImage({
      count: 1,
      sizeType: [‘original‘, ‘compressed‘],
      sourceType: [‘album‘, ‘camera‘],
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths;
        wx.cloud.uploadFile({
          cloudPath: new Date().getTime() + ‘.png‘, // 为了确保不重名
          filePath: tempFilePaths[0], // 文件路径，因为tempFilePaths是一个数组
          success: res => {
            // get resource ID
            console.log(res.fileID)
            //存储数据到云数据库
            cloudImage.add({
              data: {
                fileId: res.fileID
              }
            }).then(res => {
              console.log(res)
            }).catch(err => {
              console.error(err)
            })
          },
          fail: err => {
            // handle error
          }
        })
      }
    })
  },
  // 获取图片
  getImg: function () {
    wx.cloud.callFunction({
      name: ‘login‘
    }).then(res => {
      // 查询
      cloudImage.where({ _openid: res.result.openid })
        .get().then(res => {
          this.setData({
            images: res.data
          })
        })
    }).catch(err => {
      console.log(err)
    });
  },
  // 文件下载
  downloadFile: function (event) {
    /** event.target.dataset.fileid在wxml遍历数据时候设置的
     * data-fileId="{{item.fileId}}"
    */
    console.log(event.target.dataset.fileid)
    wx.cloud.downloadFile({
      fileID: event.target.dataset.fileid,
      success: res => {
        // get temp file path
        console.log(res.tempFilePath)
        //res.tempFilePath是响应回来的零食路径
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            console.log(res)
            wx.showToast({
              title: ‘保存成功！‘,
            })
          },
          fail(err) {
            // 保存未授权
            console.error(err)
            if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
              // 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
              wx.showModal({
                title: ‘提示‘,
                content: ‘需要您授权保存相册‘,
                showCancel: false,
                success: modalSuccess => {
                  wx.openSetting({
                    success(settingdata) {
                      console.log("settingdata", settingdata)
                      if (settingdata.authSetting[‘scope.writePhotosAlbum‘]) {
                        wx.showModal({
                          title: ‘提示‘,
                          content: ‘获取权限成功,再次点击图片即可保存‘,
                          showCancel: false,
                        })
                      } else {
                        wx.showModal({
                          title: ‘提示‘,
                          content: ‘获取权限失败，将无法保存到相册哦~‘,
                          showCancel: false,
                        })
                      }
                    },
                    fail(failData) {
                      console.log("failData", failData)
                    },
                    complete(finishData) {
                      console.log("finishData", finishData)
                    }
                  })
                }
              })
            }
          }
        })
      },
      fail: err => {
        // handle error
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

View Code

微信小程序入门笔记-使用云开发（4）

码农公寓

1、云数据库

一、介绍

二、使用

2、云函数

一、介绍

二、使用

3、云存储

一、介绍

二、使用

相关文章