• 微信小程序入门笔记-使用云开发(4)


    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):

    (2、配置app.json

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

    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

    2、云函数

     一、介绍

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

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

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

    二、使用

    (1、安装nodejs环境

    (2、创建云函数(我这里创建了3个云函数)

    修改各个云函数的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)
      }
    }

    login:

    // 云函数模板
    // 部署:在 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
      }
    }

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

     

     页面代码:

    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

     3、云存储

    一、介绍

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

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

    二、使用

    (1、文件上传流程:

     (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

     

  • 相关阅读:
    洛谷 P2008 大朋友的数字
    [USACO10FEB]慢下来Slowing down
    HAOI2007 理想的正方形 单调队列
    滑动窗口
    双栈排序
    概率无向图模型与条件随机场的异同
    P-R曲线出现凹陷的原因
    MaskLab-实例分割(使用语义分割和方向特征精细化目标检测)
    模拟递归生成器
    递归生成器
  • 原文地址:https://www.cnblogs.com/hhmm99/p/12316872.html
Copyright © 2020-2023  润新知