【微信小程序云开发 云数据库 云函数 云存储】

最新推荐文章于 2024-03-31 14:46:43 发布
最新推荐文章于 2024-03-31 14:46:43 发布
阅读量2.7k 收藏 34
点赞数 2
文章标签： 小程序 数据库 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40549829/article/details/122092547
版权

小程序云开发笔记

微信小程序云开发

一、小程序云开发初始化

参考博客：https://xiaoshitou.blog.csdn.net/article/details/112391688

// app.js
App({
  onLaunch() {

    wx.cloud.init({
     env:"chenshuming-vo6uw"
    })
  }
})

在这里插入图片描述

二、云数据库

1、数据库权限管理

默认控制台创建的表只能有管理员才能访问

2、云数据库增删改查

查询所有数据

//获取表的所有数据
wx.cloud.database().collection('goods').get({
      success(res){
        console.log("请求成功",res)
      },
      fail(err){
        console.log("请求失败",err);
      }
    })


//es6的简介写法
wx.cloud.database().collection('goods').get().then(res =>{
    console.log("请求成功",res)
}).catch(err =>{
    console.log("请求失败",err)
})
条件查询
  wx.cloud.database().collection('goods').where({
    name:'苹果'
  }).get().then(res=>{
    console.log("请求成功",res)
  })

//复杂条件查询:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/command/Command.gt.html
var db = wx.cloud.database()
const _ = db.command
wx.cloud.database().collection('goods').where({
    price:_.gt(10)
}).get().then(res=>{
    console.log("请求成功",res.data)
})
单条数据查询
//doc后面传入数据id  
wx.cloud.database().collection('goods').doc("c462c81061b7232f021385c758360ff5").get().then(res=>{
    console.log("查询单条数据成功",res)
  })
添加数据
wx.cloud.database().collection('goods').add({
        data:{
          name:"西瓜",
          price:20
        }
      }).then(res=>{
        console.log("添加成功", res)
 })
修改数据

删除或修改只能操作自己创建的数据（通过openid区分）


wx.cloud.database().collection('goods').doc("c0ca0aed61bc728e00d1281b5787e0d7").update({
    data:{
        name:"梨",
        price:20
    }
}).then(res=>{
    console.log("修改成功", res)
})
删除数据
wx.cloud.database().collection('goods').doc("c0ca0aed61bc728e00d1281b5787e0d7").remove().then(res=>{
    console.log("删除成功", res)
})
搜索
 //我这里简单起见就把搜索词写死，正常应该用户输入的
    let searchKey = '小石头'
    let db = wx.cloud.database()
    let _ = db.command

    db.collection('news')
      .where(_.or([
        {//标题
          title: db.RegExp({ //使用正则查询，实现对搜索的模糊查询
            regexp: searchKey,
            options: 'i', //大小写不区分
          }),
        },
        {//描述
          desc: db.RegExp({
            regexp: searchKey,
            options: 'i',
          }),
        }
      ])).get()
      .then(res => {
        console.log('查询成功', res)
      })
       .catch(res => {
        console.log('查询失败', res)
      })
案例

输出数据库的内容，点击数据后能获得数据的id

<view wx:for="{{list}}">
  <view bindtap="goDetail" data-id="{{item._id}}">商品名：{{item.name}}</view>
</view>

后台

onLoad: function (options) {
        wx.cloud.database().collection('goods').get().then(res =>{
          this.setData({
            list:res.data
          })
          console.log("请求成功",res.data)
      }).catch(err =>{
          console.log("请求失败",err)
      })
  }, 
  goDetail(e){
      console.log(e.currentTarget.dataset.id);
      wx.navigateTo({
        url: '/pages/index/index?id='+e.currentTarget.dataset.id,
      })
  },


//跳转页获取参数
onLoad(e){
    console.log("id是",e.id)
}

通过表单添加数据:

输入商品名称
<input class="inputclass"  type="text" bindinput="getName" />

//后台获取数据并添加到数据库  
getName(res){
      console.log(res.detail.value);
  },

排序

wx.cloud.database().collection('goods').orderBy("name",'asc').get().then(res =>{
    this.setData({
        list:res.data
    })
 //降序：desc

返回规定条数数据

wx.cloud.database().collection('goods').limit(2).get().then(res =>{
    this.setData({
        list:res.data
    })

分页

//skip表示从第及条数开始
wx.cloud.database().collection('goods').skip(2).get().then(res =>{
    this.setData({
        list:res.data
  })

三、云函数

1、初始化

新建文件夹，配置"cloudfunctionRoot":"/cloud"

创建云函数

在这里插入图片描述

2、调用云函数

//方法一
wx.cloud.callFunction({
          name:'getData',
          success(res){
            console.log('请求云函数成功',res)
          },fail(err){
            console.log('请求云函数失败',res)
          }
        })

//方法二
 wx.cloud.callFunction({
          name:'getData'
        }).then(res=>{
            console.log('请求云函数成功',res)
          }).catch(err=>{
            console.log('请求云函数失败',res)
          })

3、云函数操作数据库

查询，和本地操作数据库一样,一次请求数据上限为100条

exports.main = async (event, context) => {
  return cloud.database().collection('goods').get()
}

更新数据：

 wx.cloud.callFunction({
          name:'getValues',
          data:{
            id:"d20aea5861bc701a00a9048317846ce1",
            name:"香蕉"
          },
          success(res){
            console.log('请求云函数成功',res)
          },fail(err){
            console.log('请求云函数失败',err)
          }
        })


exports.main = async (event, context) => {

  return cloud.database().collection('goods').doc(event.id).update({
      data:{
        name:event.name
      }
  })
 
}

其他操作类似

四、云存储

1、上传图片

//选择图片
choseImg(){
    var that = this
    //上传图片第一步
    wx.chooseImage({
      count: 1,  //可以选择多少张图片
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'], //设置图片来源
      success (res) {
        const tempFilePaths = res.tempFilePaths
        that.uploadImg(tempFilePaths[0])   //要上传图片的临时地址
      }
    })
  },
      //上传文件
  uploadImg(temFile){
    console.log(temFile)
    wx.cloud.uploadFile({
      cloudPath:'test.jpg', 
      filePath: temFile,
      success (res){
        const data = res.data
        console.log("上传成功")
        //do something
      },fail(res){
        console.log("上传失败")
      }
    })
  }

显示图片,点击图片后全屏播放

//图片点击事件
 imgYu:function(event){
   var src = event.currentTarget.dataset.src;//获取data-src
   //var imgList = event.currentTarget.dataset.list;//获取data-list
  var imgList = this.data.images
   //图片预览
   wx.previewImage({
   current: src, // 当前显示图片的http链接
   urls: imgList // 需要预览的图片http链接列表
   })
   },

<view wx:for="{{list}}" wx:key="id" >
 <view>{{item.name}}</view>
 <view>
 <image bindtap="imgYu" data-list="{{item.imgPath}}" src="{{item.imgPath}}" 	show-menu-by-longpress="true"> </image>
 </view>
</view>

2、上传视频

//选择视频 
choseVedio(){
    var that = this
    wx.chooseVideo({
      sourceType: ['album','camera'],
      maxDuration: 60,
      camera: 'back',
      success(res) {
        that.uploadVedio(res.tempFilePath,"test.mp4")
        console.log(res.tempFilePath)
      }
    })
  },
      //上传文件
  uploadVedio(temFile,fileName){
    console.log(temFile)
    wx.cloud.uploadFile({
      cloudPath:fileName, 
      filePath: temFile,
      success (res){
        const data = res.data
        console.log("上传成功")
        //do something
      },fail(res){
        console.log("上传失败")
      }
    })
  },

3、上传文件

可以上传所有文件

 chooseFile(){
    var that = this
    wx.chooseMessageFile({
      count: 10,
      type: 'all',
      success (res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFiles
        that.uploadFile(tempFilePaths[0].path,tempFilePaths[0].name)
      }
    })
  },
      //上传文件
  uploadFile(temFile,fileName){
    console.log(temFile)
    wx.cloud.uploadFile({
      cloudPath:fileName, 
      filePath: temFile,
      success (res){
        const data = res.data
        console.log("上传成功")
        //do something
      },fail(res){
        console.log("上传失败")
      }
    })
  }

4、下载文件

wx.cloud.downloadFile({
  fileID: 'cloud://chenshuming-vo6uw.6368-chenshuming-vo6uw-1300611849/test.jpg',
  success: res => {
    // get temp file path
    console.log(res.tempFilePath)
  },
  fail: err => {
    // handle error
  }
})


下载并打开
wx.cloud.downloadFile({
  fileID: 'cloud://chenshuming-vo6uw.6368-chenshuming-vo6uw-1300611849/test.jpg',
  success: function (res) {
    const filePath = res.tempFilePath
    wx.openDocument({
      filePath: filePath,
      success: function (res) {
        console.log('打开文档成功')
      }
    })
  }
})

五、分页

1、本地js分页

js

getData(e){
    console.log(e.currentTarget.dataset.page)
    this.getList(e.currentTarget.dataset.page)

  },
      
      
  getList(pageNum){
    var that = this
    wx.cloud.database().collection('goods')
    .skip(20*(pageNum-1))   //从21开始获取20条
    .get({
      success(res){
        that.setData({
          list:res.data
        })
        console.log("请求成功",res)
      },
      fail(err){
        console.log("请求失败",err);
      }
    })
  }

wxml

<!--pages/fenye/fenye.wxml-->
<view wx:for="{{list}}" wx:key="_id" wx:for-index="index">
  <view>{{index}} -----{{item.name}}
  </view>
</view>
<button bindtap="getData" data-page="1">第一页</button>
<button  bindtap="getData" data-page="2">第二页</button>

实现下拉时页面内容增加：

pageNum = 0 //全局变量 
/**
   * 页面上拉触底事件的处理函数
   */下·
  onReachBottom: function () {
      //提示加载中
      console.log("下拉了页面")
       wx.showLoading({
        title: '加载中',
      })
      var that = this
      //页码加一
      pageNum = pageNum + 1
      wx.cloud.database().collection('goods')
      .skip(pageNum*20)   //从21开始获取20条
      .get({
        success(res){
            //追加数据
          that.setData({ 
            list:that.data.list.concat(res.data) //将查询结果拼接到原list中
          })
            //提示加载完成
             wx.hideLoading({
            title: '加载成功',
          })
            //提示到底了
            if(res.data.length <= 0){
                wx.showToast({
                     icon:"none",
                    title:"没有更多数据了"
                })
            }
          console.log("请求成功",res)
        },
        fail(err){
          console.log("请求失败",err);
        }
      })
  }

wxml

<view wx:for="{{list}}" wx:key="_id" wx:for-index="index">
  <view class="list">{{index}} -----{{item.name}}
  </view>
</view>

2、云函数分页

wx.cloud.callFunction({
          name:'getData',
            data:{
				len:len, // 携带参数调用云函数
                pageNum:pageNum  
            },
          success(res){
            console.log('请求云函数成功',res)
          },fail(err){
            console.log('请求云函数失败',res)
          }
        })
爱酸柠檬
关注
  • 2
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序云开发（数据库）详解
11-26
开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。 云开发为开发者提供完整的云端支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速...
微信小程序云开发之最新getUserProfile接口登录实现
sdqmrj的博客
03-24 1859
自从2021年4月13日微信小程序api做了新调整，原本获取用户授权的getUserInfo接口不再使用，这对于想要再次升级新版本以及新的小程序开发者来说，学会将getUserInfo改成getUserProfile接口是必然的。
2021-09-06笔记：微信小程序，云开发，表单提交文本和图片
weixin_46009079的博客
09-06 739
笔记：微信小程序，云开发，表单提交文本和图片问题函数代码实现总结 问题 想要实现的界面。 其中图片上传很麻烦，源于图片需要可以预览和删除，我用一个另外的函数实现。 在表单提交的函数中要提交临时路径下的图片，并记录返回的fileID，并和文本内容一起上传数据库 函数代码实现 记录主要函数 //表单提交至数据库 //参考文章https://www.jianshu.com/p/1365c4556c32?utm_campaign=maleskine&utm_content=note&utm_med
微信小程序云开发：数据库增删改查及查询条件，想转行当程序员的必看
m0_60635637的博客
03-31 799
方法接受一个必填对象用于指定需返回的字段，对象的各个 key 表示要返回或不要返回的字段，value 传入 true|false（或 1|-1）表示要返回还是不要返回。//skip(num) 跳过num条记录，从第num+1条记录开始读取，配合limit()可以实现分页功能，//update()修改返回成功但无效，返回显示stats:{update: 0}只有通过add()添加的数据才能用update()进行更新，更新指令：remove(),push(),pop()…//该条记录为云数据库手动添加的记录。
2021微信小程序云开发学习路线【视频加笔记】
优派编程
08-07 500
从零开始学习小程序开发，小程序云开发的课程！！想入门小程序请看下面内容~ 包括：云数据库，云函数，云托管，小程序云开发和服务器开发的项目实战，零基础学习JavaScript，小程序语法，cms内容管理系统，云存储。。。 2020年小程序云开发的网盘下载地址： 链接：pan.baidu.com/s/1pdugZk 提取码：c8e5 其余的四套2021年最新的云开发课程网盘资料，包括视频和笔记我在我的博客网站里面可以下载到。或者点击下方“阅读原文”，也能跳转下载另外四套学习资料！ 我的博客网站地址：https:
微信云开发之数据库简介
duke_ding2的博客
05-08 2181
微信云开发之数据库简介
微信小程序使用云函数操作数据库
lyy的博客
03-12 1万+
前提 安装了Node.js并配置好了环境变量，这个网上教程太多了，在这里就不赘述了，下面是一个教程网址： https://www.cnblogs.com/zhouyu2017/p/6485265.html 实现 下面是官方文档里的通用步骤，与数据库无关。为了方便初学者，就在这里提一嘴。 云函数代码 // 云函数入口文件 const cloud = require('wx-s...
微信小程序连接云数据库基本使用
m0_46745664的博客
10-22 3181
微信小程序云数据库常用函数介绍及演示
微信小程序云开发———云数据库
momo不会IT的博客
09-06 1万+
微信小程序的注册及云开发——云数据库
微信小程序云开发 1 - 数据库
yueye_wu的博客
07-14 9857
微信小程序云开发 1 - 数据库
微信小程序云开发—01（云数据库、云函数的创建与基本使用）
sdgjah2的博客
11-17 3461
初始化 var db = cloud.database()；获取 var data = await db.collection("feedback").get()添加 var data = await db.collection("feedback").add(data:{添加数据})
微信小程序6-云开发-云数据库
k393393的博客
07-14 4047
本文介绍了微信小程序的云开发和云数据库的增删改查
解决微信小程序云开发中获取数据库的内容为空的方法
10-16
主要介绍了解决微信小程序云开发中获取数据库的内容为空的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
微信小程序·云开发 数据库实战
最新发布
05-17
3.数据库编程：根据需求分析和数据库设计的结果，编写相关的数据库程序，包括存储过程、触发器和函数等。 4.测试和调试：对完成的数据库程序进行测试和调试，确保其功能正常、性能稳定、安全可靠。 5.部署和维护：将...
微信小程序云开发之使用云函数
01-03
微信小程序如何使用云开发 微信小程序之使用云存储 微信小程序之使用云数据库 接下来的这篇文章主要介绍下云函数，介绍这个云函数的主要用途是因为要解决从云数据库查询数据最多显示20条的限制，而使用到云函数可以...
基于微信小程序云原生开发的校园社区互助小程序（源码+数据库）.zip文件
07-08
后端框架：选择微信小程序云开发作为后端框架，它提供了云数据库、云存储、云函数等功能，能够快速搭建后端服务。 数据库：使用云开发的云数据库，用于存储用户信息、求助信息、活动信息等数据。 在开始开发之前，...
[微信开发]小程序实现上传到云存储，解析Excel表并添加到云开发数据库
weixin_57788079的博客
04-03 2658
[微信开发]小程序实现上传到云存储，解析Excel表并添加到云开发数据库
抛砖引玉：一种改善微信云开发 , 开发者体验的思路
ice breaker's blog
02-27 283
抛砖引玉：一种改善微信云开发 , 开发者体验的思路 本篇文章写于 2021-02-27 鄙人才疏学浅，如有谬误，欢迎指正 更多代码的细节在 Github源码链接 中 前言 小程序云开发，作为一种 BaaS 场景，在过去的一段时间内发展非常的迅猛。 其中里面最受瞩目的功能，自然是云函数了，它作为一种 Serverless 落地的场景，很好的开启了小程序开发者连接服务端编程的大门。 当然，作为一个未来具有很大发展前景的项目，对于目前的非 js 开发者, 显得不那么友好，虽然可以依托 云托管 功能，使用传统静
小程序读取excel表格数据，并存储到云数据库
热门推荐
编程小石头
11-12 1万+
最近一直比较忙，答应大家的小程序解析excel一直没有写出来，今天终于忙里偷闲，有机会把这篇文章写出来给大家了。 老规矩先看效果图 效果其实很简单，就是把excel里的数据解析出来，然后存到云数据库里。说起来很简单。但是真的做起来的时候，发现其中要用到的东西还是很多的。不信。。。。 那来看下流程图 流程图 通过流程图，我看看到我们这里使用了云函数，云存储，云数据库。 流程图主要实现下面几个...
微信小程序云开发数据库
05-10
微信小程序云开发提供了一种简单的方式来创建和使用云数据库。使用云开发数据库，您可以快速地存储和检索数据，而无需关心服务器的维护和管理。以下是一些关于微信小程序云开发数据库的信息： 1. 数据库类型：微信...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值