详细复习云开发~小程序【云存储、云函数】

news2024/11/23 15:22:15

文章目录

  • 一，云开发~云存储
    • 1-1，云开发控制台管理文件
    • 1-2，上传图片到云存储
    • 1-3，给商品列表加商品图片
    • 1-4，上传视频到云存储
    • 1-5，上传word，excel文件到云存储
      • 1-5-1，上传之前先选择文件
      • 1-5-2，上传文件
    • 1-6，下载文件
    • 1-7，下载并打开word，excel，pdf
  • 二，列表的下拉刷新
    • 2-1，开启页面下拉刷新
    • 2-2，在Page的onPullDownRefresh里监听刷新
    • 2-3，用户下拉刷新时请求最新数据
    • 2-4，数据请求成功后停止刷新
  • 三，列表的分页加载
    • 3-1，小程序数据库每次最多20条
    • 3-2，分页加载的核心方法
    • 3-3，上拉加载更多监听
    • 3-4，数据库分页加载代码实现
      • 3-5-1，没有更多数据时的友好提示
      • 3-5-2，加载中和加载完成的友好提示
    • 3-6,通过云函数实现分页加载

一，云开发~云存储

首先来看下官方对云存储的介绍：

官方文档：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage.html

说白了，云存储就是可以用来存储视频，音频，图片，文件的一个云存储空间。如果你的小程序需要用到视频播放，音频播放，图片展示，文件上传与下载功能，就可以用到我们的云存储了。

使用云存储来存储文件时，文件名的命名有一些规则，建议看一下。
在这里插入图片描述

1-1，云开发控制台管理文件

控制台也可以很方便的管理文件。
在这里插入图片描述

1-2，上传图片到云存储

  • 我们上传图片之前需要先选择图片，所以这里用到一个图片选择的功能
wx.chooseMedia({
      count: 1,
      mediaType: ['image','video'],
      sourceType: ['album', 'camera'],
      maxDuration: 30,
      camera: 'back',
      success(res) {
        console.log(res);
        console.log(res.tempFiles[0].tempFilePath)
        console.log(res.tempFiles[0].size)
      }
    })

对应的官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html

  • 调用api上传到云端
wx.cloud.uploadFile({
  cloudPath: 'example.png',
  filePath: '', // 文件路径
}).then(res => {
  // get resource ID
  console.log(res.fileID)
}).catch(error => {
  // handle error
})

对应的官方文档
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/storage/uploadFile/client.uploadFile.html

1-3，给商品列表加商品图片

我们既然已经学完图片上传功能了，那么我们就可以改造下我们之前的商品列表了，给我们的商品列表添加商品图片。
在这里插入图片描述

1-4，上传视频到云存储

上传视频之前同样需要先选择视频，选择视频的代码同上传图片

对应的官方文档如下：https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html

选择好视频以后，同样是调用文件上传api，因为视频也是一个文件。

1-5，上传word，excel文件到云存储

1-5-1，上传之前先选择文件

选择文件的时候记得把type设置为file

 wx.chooseMessageFile({
      count: 10,
      type: 'all',
      success: res=>{
        console.log(res);
        // tempFilePath可以作为 img 标签的 src 属性显示图片
        const tempFilePaths = res.tempFiles
        let tempFile = res.tempFiles[0]
        this.uploadFile(tempFile.name,tempFile.path)
      }
    })

对应的官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseMessageFile.html

这里有一点需要注意
在电脑模拟器上是选择电脑上的文件，在手机上运行小程序进行选择文件时是选择你聊天记录里的文件。

1-5-2，上传文件

在上面选择好文件以后，我们还是要调用uploadFile进行文件上传

wx.cloud.uploadFile({
      cloudPath:name,
      filePath:tempUrl
    })
    .then(res=>{
      console.log('文件成功',res);
    })
    .catch(err=>{
      console.log('文件失败',err);
    })

1-6，下载文件

使用wx.cloud.downloadFile下载文件
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/storage/downloadFile/client.downloadFile.html

  • Callback 风格
wx.cloud.downloadFile({
  fileID: 'a7xzcb',
  success: res => {
    // get temp file path
    console.log(res.tempFilePath)
  },
  fail: err => {
    // handle error
  }
})
  • Promise 风格
wx.cloud.downloadFile({
  fileID: 'a7xzcb'
}).then(res => {
  // get temp file path
  console.log(res.tempFilePath)
}).catch(error => {
  // handle error
})

1-7，下载并打开word，excel，pdf

使用wx.openDocument打开文件
https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html

wx.downloadFile({
  // 示例 url，并非真实存在
  url: 'http://example.com/somefile.pdf',
  success: function (res) {
    const filePath = res.tempFilePath
    wx.openDocument({
      filePath: filePath,
      success: function (res) {
        console.log('打开文档成功')
      }
    })
  }
})

二，列表的下拉刷新

2-1，开启页面下拉刷新

我们需要在app.json获取页面对应的json里设置enablePullDownRefresh属性为true来开启下拉刷新。此方法在所有页面都有下拉刷新
在这里插入图片描述
在单个页面
在这里插入图片描述

由于我们的刷新动画默认是白色圆点，所以还要在json里设置页面背景色才可以看到动画。
在这里插入图片描述

2-2，在Page的onPullDownRefresh里监听刷新

在这里插入图片描述

在page里的onPullDownRefresh方法里监听下拉刷新

2-3，用户下拉刷新时请求最新数据

 getList(){
    wx.cloud.database().collection('goods')
    .get()
    .then(res=>{
      console.log('请求成功',res);
      this.setData({
        list:res.data
      })
    })
    .catch(err=>{
      console.log('请求失败',err);
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
   this.getList()
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    console.log('下拉刷新的监听');
    this.getList()
  },

2-4，数据请求成功后停止刷新

我们在下拉刷新时，刷新动画一般很久才结束，正常情况下应该是数据请求成功后就结束刷新动画。所以我们通过wx.stopPullDownRefresh()方法来结束刷新动画。
官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/ui/pull-down-refresh/wx.startPullDownRefresh.html
在这里插入图片描述

代码示例如下

getList(){
    wx.cloud.database().collection('goods')
    .get()
    .then(res=>{
      console.log('请求成功',res);
      wx.stopPullDownRefresh()
      this.setData({
        list:res.data
      })
    })
    .catch(err=>{
      console.log('请求失败',err);
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    wx.startPullDownRefresh()
   this.getList()
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    console.log('下拉刷新的监听');
    this.getList()
  },

三，列表的分页加载

3-1，小程序数据库每次最多20条

小程序数据库api和云函数调用数据的限制

小程序端直接调用云数据库时，每次最多可以获取20条，云函数里调用云数据库时每次最多获取100条。所以我们数据多的时候要做分页加载。

3-2，分页加载的核心方法

我们做分页加载时，主要用到了skip和limit方法，对应的官方文档如下

  • skip：每页加载多少条
    https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/collection/Collection.skip.html
  • limit: 加载第几页的数据https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/collection/Collection.limit.html
    其实这个skip和limit在数据库的那一节有做初步讲解，这一节我们就借助具体分页加载的案例来做综合讲解

3-3，上拉加载更多监听

我们的列表滑动到最后一个数据时，会执行下面的方法
在这里插入图片描述

所以我们的分页加载要在onReachBottom里做。

3-4，数据库分页加载代码实现

直接调用数据库每次最多只能加载20条数据

  data: {
    list:[]
  },
  getList(){
    let len = this.data.list.length
    wx.cloud.database().collection('num2')
    .skip(len)//len=20*page
    .get()
    .then(res=>{
      console.log('请求成功',res);
      this.setData({
        list:this.data.list.concat(res.data)
      })
    })
    .catch(err=>{
      console.log('请求失败',err);
    })
  },
  onLoad(options) {
    this.getList()  
  },
  onReachBottom() {
    console.log('下拉刷新');  
    this.getList()
  },

wxml里只做简单的列表数据显示就行了

wxss做个简单的样式

3-5-1，没有更多数据时的友好提示

在这里插入图片描述

wx.cloud.database().collection('num2')
    .skip(len)//len=20*page
    .get()
    .then(res=>{
      console.log('请求成功',res);
      let dataList = res.data
      if(dataList.length<=0){
        wx.showToast({
          icon:'none',
          title: '没有更多数据了',
        })
      }
      this.setData({
        list:this.data.list.concat(res.data)
      })
    })
    .catch(err=>{
      console.log('请求失败',err);
    })

3-5-2，加载中和加载完成的友好提示

  • 加载中
   wx.showLoading({
      title: '加载中...',
    })
  • 隐藏加载中
wx.hideLoading()

 getList(){
    wx.showLoading({
      title: '加载中...',
    })
    let len = this.data.list.length
    wx.cloud.database().collection('num2')
    .skip(len)//len=20*page
    .get()
    .then(res=>{
      console.log('请求成功',res);
      wx.hideLoading()
      let dataList = res.data
      if(dataList.length<=0){
        wx.showToast({
          icon:'none',
          title: '没有更多数据了',
        })
      }
      this.setData({
        list:this.data.list.concat(res.data)
      })
    })
    .catch(err=>{
      wx.hideLoading()
      console.log('请求失败',err);
    })
  },

3-6,通过云函数实现分页加载

通过云函数调用数据库，每次最多可以加载100条数据.

  • 如果每页20条以内，不建议用云函数
  • 如果分页的时候，每页大于20条，就用云函数。
    在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/101572.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

mybatis if test对Intger判空的坑、原理及解决方法

mybatis if test对Intger判空的坑、原理及解决方法

文章目录问题描述源码分析解决方法问题描述 Mybatis在进行<if test"status! null and status! ">非空判断操作时&#xff0c;如果status为0的时候&#xff0c;该判断条件的值为false 写法如下&#xff1a; <select id"countByBySearchCondition&quo…
阅读更多...
提取任意开始年月日到结束年月日中间的所有日期和星期

提取任意开始年月日到结束年月日中间的所有日期和星期

&#x1f37f;*★,*:.☆欢迎您/$:*.★* &#x1f37f; 分为三种情况 1 同年同月不通日 2 同年不同月 3不同年 不同年分为 两种情况 一种是开始年 开始年月不是12月的要单独计算 一种是结束年 结束年要不是1月的要单独计算 同时每种情况结尾天数分割也不同 #!/usr/bin/python # …
阅读更多...
玉湖冷链首次参展中国冷链产业年会

玉湖冷链首次参展中国冷链产业年会

洞见时代&#xff0c;探冬寻暖。12月15-17日&#xff0c;「2022第十六届中国冷链产业年会」在厦门举行。玉湖冷链深度参与行业盛会&#xff0c;首次设展&#xff0c;与上千名行业人士进行了深入交流&#xff0c;并参与了中物联冷链委四届三次理事会和主论坛首席对话等环节。 年…
阅读更多...
JaveWeb框架（二）：Servlet组件入门

JaveWeb框架（二）：Servlet组件入门

Servlet入门 MVC实战项目 仓储管理系统Servlet 入门DemoServlet 执行流程、生命周期执行流程生命周期Servlet API介绍Servlet体系结构Servlet urlPattern配置Servlet&#xff1a;请求与响应Request&#xff1a;请求请求的构成请求API方法来获取对应的值:请求参数的获取方式请求…
阅读更多...
后台系统权限流程

后台系统权限流程

菜单管理 角色管理 相关逻辑 <template><div><a-tree :checkable"true"check"handlerChecked"select"handlerSelectNode"/></div> </template><script> export default { data(){return {// 选中节点的ke…
阅读更多...
宠物领养网站

宠物领养网站

成品详细信息 开发工具(eclipse/idea/vscode等)&#xff1a; 数据库(sqlite/mysql/sqlserver等)&#xff1a; 功能模块(请用文字描述&#xff0c;至少200字)&#xff1a; 基于java的宠物领养管理系统用户模块包括注册登录、个人信息管理、 可领养宠物信息查询、宠物助养信息查…
阅读更多...
Java注册登录及邮箱发送账号激活（主要技术栈SpringBoot，MyBatis）

Java注册登录及邮箱发送账号激活（主要技术栈SpringBoot，MyBatis）

文章目录前言学习之前需要掌握的知识项目环境搭建数据库的搭建前端页面的搭建后端代码格式pojomapperControllerservice最后前言 项目流程图如下&#xff1a; 这里我们通过&#xff1a; 163邮箱来实现激活码发送qq邮箱来进行接收 学习之前需要掌握的知识 springboot的基本使…
阅读更多...
解决tinypng 1.0.6 在线压缩C#接口报ssl错误的方法

解决tinypng 1.0.6 在线压缩C#接口报ssl错误的方法

因为作者的做法是使用了他们的证书, 但是如果是插件引用, 感觉是无法调用的. 所以我们直接下载code 修改这里即可 namespace TinifyAPI.Internal internal static class SSL public static bool ValidationCallback(HttpRequestMessage req, X509Certificate2 cert, X509Chain…
阅读更多...
二十四节气-冬至，海报/文案分享，一口饺子，一口吉。

二十四节气-冬至，海报/文案分享，一口饺子，一口吉。

古说&#xff0c;冬至是阴极之至 阳气始生&#xff0c;有冬至大如年的说法 冬至到&#xff0c;家家户户吃水饺&#xff0c; “冬至不端饺子碗&#xff0c;冻掉耳朵没人管” “三九补一冬&#xff0c;来年无病痛” 可吃羊肉等温补…… 一组超级好的大牌文案 真心秀色可餐 下面是…
阅读更多...
selenium自动化测试——unittest框架

selenium自动化测试——unittest框架

文章目录unittestunittest 框架组成细节unittest测试示例用例的执行顺序忽略测试用例的执行unittest断言HTML报告生成生成HTML报告步骤异常捕捉与错误截图数据驱动unittest unittest 是python 的单元测试框架&#xff0c; 在python 的官方文档中&#xff0c;对unittest有详细的…
阅读更多...
学会JVM，从这篇开始

学会JVM，从这篇开始

目录 一、了解 JVM 二、JVM内存划分 三、类加载 1. 类加载是干啥的? 什么是类对象 ? 2. 类加载的大致过程 3. 什么是 双亲委派模型(重点) ? 四、GC 1. GC回收的是哪里的内存 2. 回收如何判断某个对象是否是垃圾? ① 引用计数(Python PHP采用) ② 可达性分析(JVM采用) 3. …
阅读更多...
【计算机考研408】2023考研408大题预测总结

【计算机考研408】2023考研408大题预测总结

数据结构 链表相关算法题 反转链表1 题源1&#xff1a;反转链表1 比较简单&#xff0c;可以作为思想记忆&#xff0c;不太会这么直接考察 408可能考察链表的实现&#xff0c; ListNode* reverseList(ListNode* head) {if(head NULL) return NULL;//头插法ListNode * p …
阅读更多...
计算机毕设Python+Vue学生健康管理系统（程序+LW+部署）

计算机毕设Python+Vue学生健康管理系统（程序+LW+部署）

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
jsp+ssm计算机毕业设计二手车交易系统【附源码】

jsp+ssm计算机毕业设计二手车交易系统【附源码】

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; JSPSSM mybatis Maven等等组成&#xff0c;B/S模式 Mave…
阅读更多...
(八) mysql主从以及Redis集群

(八) mysql主从以及Redis集群

mysql主从以及Redis集群一、Mysq主从复制安装1、新建主服务器容器实例33072、进入/mydata/mysql-master/conf目录下新建my.cnf3、进入mysql-master容器4、master容器实例内创建数据同步用户5、新建从服务器容器实例33086、创建从机的配置文件7、在主数据库中查看主从同步状态8、…
阅读更多...
Linux——shell及其基本命令

Linux——shell及其基本命令

一、认识shell Shell是一个命令语言解释器。登陆Linux后&#xff0c;所有的命令都被shell解释&#xff0c;它支持函数、变量、数组、程序设计结构等。分为Bourne Shell和 C Shell&#xff0c;红帽默认Bash&#xff0c;是B Shell的扩展&#xff0c;完全兼容。 1&#xff0e;启…
阅读更多...
python中使用马尔可夫决策过程(MDP)动态编程来解决最短路径强化学习问题

python中使用马尔可夫决策过程(MDP)动态编程来解决最短路径强化学习问题

在强化学习中&#xff0c;我们有兴趣确定一种最大化获取奖励的策略。最近我们被客户要求撰写关于MDP的研究报告&#xff0c;包括一些图形和统计输出。假设环境是马尔可夫决策过程 &#xff08;MDP&#xff09;的理想模型 &#xff0c;我们可以应用动态编程方法来解决强化学习…
阅读更多...
【C++】STL——stack和queue的介绍与使用及模拟实现

【C++】STL——stack和queue的介绍与使用及模拟实现

stack和queue的介绍与使用及模拟实现 文章目录stack和queue的介绍与使用及模拟实现1.stack的介绍与使用1.1.stack的介绍1.2.stack的使用1.3.stack的模拟实现2.queue的介绍和使用2.1.queue的介绍2.2.queue的使用2.3.queue的模拟实现3. 容器适配器3.1.STL标准库中stack和queue的底…
阅读更多...
分享15个全球顶尖的AIGC图片生成平台

分享15个全球顶尖的AIGC图片生成平台

人工智能正在改变许多行业的格局&#xff0c;而其中改变最直观和影响最大的就是AIGC领域的图像创作。 发展至今已经有很多AI图像生成平台&#xff0c;他们的共同特点就是使用人工智能将文本转换为图像&#xff0c;这是一次革命性的突破&#xff0c;也就是说通过这些AI工具可以…
阅读更多...
springboot多数据源---3多数据源组件

springboot多数据源---3多数据源组件

一、dynamic-datasource多数源组件 两三个数据源、事务场景比较少 基于 SpringBoot 的多数据源组件&#xff0c;功能强悍&#xff0c;支持 Seata 分布式事务。 支持 数据源分组 &#xff0c;适用于多种场景 纯粹多库 读写分离 一主多从 混合模式。 支持数据库敏感配置信息 加密…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023