微信小程序入门笔记-使用云开发(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

 

 

 

 

 

 

 

posted @ 2020-02-16 16:58  黄浩#  阅读(2211)  评论(0编辑  收藏  举报