微信小程序【云】开发学习笔记

技术黄
152 阅读4分钟

写在最前面

这篇文章主要记录微信小程序【云】开发用到的学习笔记～～～

云开发免费版是永久免费的噢

但是，免费版的存储读请求次数很快就会用完的。。。

学习视频

  1. 【智能社】微信小程序从入门到精通 II

快速访问

数据库 MongoDB

  1. 创建集合 === 新建表
  2. 数据默认自带 _id
  3. 通过索引管理，可优化性能，和设置数据规则

读取全部

Collection.get()

const db = wx.cloud.database()
db.collection('posts')
  .get()
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.log(err)
  })

返回指定字段

Collection.field()

const db = wx.cloud.database()
db.collection('posts')
  .field({
    _id: true,
    title: true
  })
  .get()
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.log(err)
  })

读取指定 _id

Collection.doc()

const db = wx.cloud.database()
db.collection('posts')
  .doc('posts_id')
  .get()
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.log(err)
  })

读取指定 _openid

Collection.where()

const db = wx.cloud.database()
db.collection('posts')
  .where({
    _openid: 'posts_openid'
  })
  .get()
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.log(err)
  })

添加

Collection.add()

// 添加数据时，表自动添加 _openid
const db = wx.cloud.database()
db.collection('posts')
  .add({
    data: {
      title: '标题',
      content: '内容'
    }
  })
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.log(err)
  })

表单添加

index.wxml

<form
  catchsubmit="formSubmit"
>
<input
  name="title"
  type="text"
  placeholder="请输入标题"
/>
<textarea
  name="content"
  placeholder="请输入内容"
></textarea>
<button
  form-type="submit"
  type="primary"
>发送</button>
</form>

index.js

Page({
  data: { },

  formSubmit(e){
    let {title,content} = e.detail.value;
    if(!title){
      wx.showToast({
        icon:'none',
        title: '请输入标题',
      })
      return;
    }
    if(!content){
      wx.showToast({
        icon:'none',
        title: '请输入内容',
      })
      return;
    }
    
    const db = wx.cloud.database()
    db.collection('posts')
      .add({
        data: {
          title,
          content,
          time: new Date()
        }
      })
      .then(res => {
        console.log(res)
      })
      .catch(err => {
        console.log(err);
      })
  }
})

删除一个指定 _id

Collection.remove()

// 前段只能删除一个，使用 where 也不能批量删除，云函数可以批量删除
const db = wx.cloud.database()
db.collection('posts')
  .doc('posts_id')
  .remove()
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.log(err)
  })

更新一个指定 _id

Collection.update()

// update 只能更新
const db = wx.cloud.database()
db.collection('posts')
  .doc('posts_id')
  .update({
    data: {
      title: '更细标题',
      content: '更细内容'
    }
  })
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.log(err)
  })

Document.set()

// set 有则替换，无则插入，覆盖操作
const db = wx.cloud.database()
db.collection('posts')
  .doc('posts_id')
  .set({
    data: {
      title: '更细标题',
      content: '更细内容'
    }
  })
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.log(err)
  })

云函数

  1. 新建项目时候选择云开发
  2. 可以轻松获取 OPENID
  3. 云函数添加数据不会自动添加 _openid 需要自行添加

添加云函数

  1. cloudfunctions 文件夹右键 新建 Node.js 云函数 起名
  2. 新的云函数文件夹右键上传并部署：云端安装依赖
  3. 更新同2步骤，或者右键具体文件云函数增量上传：更新文件
  4. 调用云函数 Cloud.callFunction()

云函数读取全部

Collection.get()

云函数 getPosts

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

cloud.init()
const db = cloud.database()

// 云函数入口函数
exports.main = async (event, context) => {
  try {
    return await db.collection('posts').get()
  } catch(e) {
    console.error(e)
  }
}

调用云函数 getPosts

Page({
  data: {},

  onLoad:function(){
    wx.cloud.callFunction({
      name: 'getPosts'
    })
      .then(res => {
        console.log(res)
      })
      .catch(err => {
        console.log(err)
      })
  }
});

异步方式调用云函数 getPosts

// pages/detail/index.js
Page({
  data: {},
  
  onLoad: async function () {
    wx.showLoading({
      title: 'loading...',
    })
    try {
      let {result} = await wx.cloud.callFunction({
        name: 'getPosts'
      })
      console.log(result)
    } catch(e) {
      console.error(e)
    }
    wx.hideLoading()
  },
})

云函数读取指定 _id

Collection.doc()

云函数 getPost

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

cloud.init()
const db = cloud.database()

// 云函数入口函数
exports.main = async (event, context) => {
  try {
    return await db.collection('posts').doc(event._id).get()
  } catch(e) {
    console.error(e)
  }
}

调用云函数 getPost

Page({
  data: {},

  onLoad:function(options){
    wx.cloud.callFunction({
      name: 'getPost',
      data: {
        _id: options.id
      }
    })
      .then(res => {
        console.log(res)
      })
      .catch(err => {
        console.log(err)
      })
  }
});

云函数添加

Collection.add()

云函数 addPost

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

cloud.init()
const db = cloud.database()

// 云函数入口函数
exports.main = async (event, context) => {
  const {OPENID} = cloud.getWXContext()
  try {
    return await db.collection('posts')
      .add({
        data: {
          _openid:OPENID,
          title,
          content,
          time: new Date()
        }
      })
  } catch(e) {
    console.error(e)
  }
}

调用云函数 addPost

Page({
  data: {},

  onLoad:function(options){
    wx.cloud.callFunction({
      name: 'addPost',
      data: {
        title: '标题',
        content: '内容'
      }
    })
      .then(res => {
        console.log(res)
      })
      .catch(err => {
        console.log(err)
      })
  }
});

云函数删除指定 _id

Collection.remove()

云函数 removePost

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

cloud.init()
const db = cloud.database()

// 云函数入口函数
exports.main = async (event, context) => {
  try {
    return await db.collection('posts').doc(event._id).remove()
  } catch(e) {
    console.error(e)
  }
}

调用云函数 removePost

Page({
  data: {},

  onLoad:function(options){
    wx.cloud.callFunction({
      name: 'removePost',
      data: {
        _id: options.id
      }
    })
      .then(res => {
        console.log(res)
      })
      .catch(err => {
        console.log(err)
      })
  }
});

云函数更新指定 _id

Collection.update()

云函数 updatePost

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

cloud.init()
const db = cloud.database()

// 云函数入口函数
exports.main = async (event, context) => {
  try {
    return await db.collection('posts')
      .doc(event._id)
      .update({
        data: {
          title: event.title,
          content: event.content
        }
      })
  } catch(e) {
    console.error(e)
  }
}

调用云函数 updatePost

Page({
  data: {},

  onLoad:function(options){
    wx.cloud.callFunction({
      name: 'updatePost',
      data: {
        _id: options.id,
        title: '更细标题',
        content: '更细内容'
      }
    })
      .then(res => {
        console.log(res)
      })
      .catch(err => {
        console.log(err)
      })
  }
});

云存储

wx.getFileSystemManager

图片选择可追加和删除

wx.chooseImage()

图片数据

Page({
  data: {
    fileList:[]
  }
})

可追加照片

async choose(){
  try {
    let {tempFilePaths} = await wx.chooseImage()
    this.setData({
      fileList:[...this.data.fileList,...tempFilePaths]
    })
  } catch(e) {
    console.error(e)
  }
}

可删除

<view wx:for="{{fileList}}" wx:key="index">
  <image src="{{item}}" />
  <button bindtap="del" data-key="{{index}}">删除</button>
</view>

del(e){
  let {key} = e.target.dataset
  this.data.fileList.splice(key,1)
  this.setData({
    fileList: this.data.fileList
  })
}

上传图片并写入数据

wx.uploadFile()

async submit(e){
  // 验证输入
  if(!this.data.fileList.length){
    wx.showToast({
      icon:'none',
      title: '请选择图片',
    })
    return;
  }

  // 图片上传
  let imgs = [];
  for (let i = 0; i < this.data.fileList.length; i++) {
    let res = await wx.cloud.uploadFile({
      cloudPath: 'userupload' + this.data.fileList[i].substring(this.data.fileList[i].lastIndexOf('/')),
      filePath: this.data.fileList[i]
    })
    wx.showLoading({
      title: `正在上传第${i+1}张`,
    })
    imgs.push(res.fileID);
  }

  // 添加数据
  const db = wx.cloud.database()
  try {
    let res = await db.collection('albums')
      .add({
        data: {
          imgs,
          time: new Date()
        }
      })
    wx.showToast({
      title: '添加成功',
      duration: 1500
    })
    setTimeout(() => {
      wx.navigateBack();
      this.getOpenerEventChannel().emit('reload');
    }, 1500);
  } catch(e) {
    console.error(e)
  }

  wx.hideLoading()
}

实用篇

获取用户信息并存储到云数据库

  1. 云函数通过 OPENDID 判断 users 数据库是否有数据
  2. 如果没有则使用 wx.getUserProfile() 获取用户信息
  3. 再通过云函数存储到 users 云数据库

云函数 logined 判断 users 数据库是否有数据

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

cloud.init()
const db = cloud.database()

// 云函数入口函数
exports.main = async (event, context) => {
  const {OPENID} = cloud.getWXContext()
  try {
    return await db.collection('users')
    .where({
      _openid: OPENID
    })
    .get()
  } catch(e) {
    console.error(e)
  }
}

小程序 pages/login/index 如果 users 没有数据就获取用户信息 必须用户点击事件

<button
  wx:if="{{show}}"
  bindtap="getUserProfile"
>登录</button>

Page({
  data: {
    show: false
  },
  
  onLoad: function () {
    wx.cloud.callFunction({
      name: 'logined'
    }).then(res => {
      if(!res.result.data.length){// 如果没有数据 显示登陆按钮
        this.setData({
          show:true
        })
      }else{// 有数据 跳转到首页
        wx.redirectTo({
          url: '/pages/index/index',
        })
      }
    }).catch(err => {
      console.log(err)
    })
  },

  getUserProfile(){
    wx.getUserProfile({
      desc: '用于完善会员资料',
      success: (res) => {
        let {userInfo} = res;
        wx.cloud.callFunction({
          name: 'addUser',// 运行云函数添加数据
          data:{
            userInfo
          }
        })
          .then(res => {
            wx.redirectTo({// 数据添加好后 跳转到首页
              url: '/pages/index/index',
            })
          })
          .catch(err => {
            console.log(err)
          })
      },
      fail:function(){
        wx.showToast({
          icon:'none',
          title: '请登录',
        })
      }
    })
  }
})

登录验证

  1. globalData 判断是否已经登录 
    this.globalData = {
  logined:wx.getStorageSync('logined')
};
  2. 登录授权如果 users 数据库有数据则不添加没有则添加 
    // 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()
const db = cloud.database()

// 云函数入口函数
exports.main = async (event, context) => {
  const {OPENID} = cloud.getWXContext()
  try {
    let res =  await db.collection('users')
      .where({
        _openid: OPENID
      })
      .get()
    if(!res.data.length){// 如果没有数据就添加
      try {
        let res =  await db.collection('users')
          .add({
            data: {
              _openid:OPENID,
              ...event.userInfo,
              time: new Date()
            }
          })
        return res;
      } catch(e) {
        console.error(e)
      }
    }else{// 有数据就返回数据
      return res.data[0]
    }
  } catch(e) {
    console.error(e)
  }
}
  3. 然后修改 logined 值 
    wx.setStorageSync('logined', true)

获取数据和对应的用户信息

获取全部数据 getAlbums

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

cloud.init()
const db = cloud.database()

// 云函数入口函数
exports.main = async (event, context) => {
  try {
    let {data:albums} = await db.collection('albums').get()
    let {data:users} = await db.collection('users').get()
    return albums.map(album => {
      let user = users.find(user => user._openid == album._openid);
      if(user){
        album.nickName = user.nickName;
        album.avatarUrl = user.avatarUrl;
      }
      album.time = `${album.time.getFullYear()}-${album.time.getMonth()+1}-${album.time.getDate()}`;
      album.imgs = album.imgs.slice(0,3);
      delete album._openid;
      return album;
    })
  } catch(e) {
    console.error(e)
  }
}

获取一条数据 getAlbum

<navigator url="/pages/detail/index?id={{item._id}}"></navigator>

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

cloud.init()
const db = cloud.database()

// 云函数入口函数
exports.main = async (event, context) => {
  try {
    let {data:album} = await db.collection('albums').doc(event._id).get()
    let {data:user} = await db.collection('users').where({
      _openid: album._openid
    }).get()
    if(user.length){
      album.nickName = user[0].nickName;
      album.avatarUrl = user[0].avatarUrl;
    }
    album.time = `${album.time.getFullYear()}-${album.time.getMonth()+1}-${album.time.getDate()}`;
    return album;
  } catch(e) {
    return e;
  }
}

每天定时清空数据库

定时触发器 triggers

顾名思义，指定时间定时运行某个云函数。比如每天定时清空当天数据。

云函数 clearOrders

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

cloud.init()
const db = cloud.database()

// 云函数入口函数
exports.main = async (event, context) => {
  await db.collection('orders').remove()
}

云函数 clearOrders 的 config.json ,每天凌晨 4 点运行 clearOrders 云函数

{
  "permissions": {
    "openapi": [
    ]
  },
  "triggers": [
    {
      "name": "clearOrders",
      "type": "timer",
      "config": "0 0 4 * * * *"
    }
  ]
}

持续更新

avatar
文章
阅读
粉丝
相关推荐
仿网易云音乐微信小程序
43k阅读
 · 
665点赞
微信小程序云开发
3.9k阅读
 · 
9点赞
微信小程序源码获取教程
85k阅读
 · 
1.1k点赞
微信小程序wepy框架笔记
10k阅读
 · 
250点赞
微信小程序云开发
2.3k阅读
 · 
7点赞
微信小程序云开发总结
2.6k阅读
 · 
16点赞
微信小程序·云开发初体验
4.9k阅读
 · 
15点赞
强烈推荐的微信小程序开发总结
38k阅读
 · 
539点赞
mpvue微信小程序-仿网易云音乐
8.4k阅读
 · 
195点赞
微信小程序通过云函数进行微信支付
4.5k阅读
 · 
27点赞

友情链接：