微信小程序云开发的具体使用教程

news2024/11/15 12:56:25

小程序云开发介绍

云开发官方文档
一个小程序在开发时,除了考虑界面功能逻辑外,还需要后端的数据支持。而为了获得后端的数据支持,开发者需要提前考虑服务器、存储和数据库等需求,并且会花费时间精力在部署应用、依赖上。因此官方为了实现小程序的快速上线和迭代,为开发者提供了一个云开发的功能,将以服务的方式为开发者提供如云函数、数据库、存储管理等所需功能,大大降低了小程序的开发门槛,仅需通过小程序云开发提供的接口,就能实现因缺乏后端知识而无法实现的需求。本章内容将简单讲解如何使用小程序云开发

获取云数据操作

tip:创建项目之前大家需要注意以下几点:

  1. 如果您有多个云开发id 需要选择其中一个在全局app.js中绑定
  2. 创建node云函数之前需要选择当前环境
  3. node云函数创建完成后需 上传并部署:云安装并依赖(只在新建时操作)
  4. 每次修改完云函数后 需右键 云函数增量上传

图例
全局app.js中绑定id
在这里插入图片描述
云函数index.js也要绑定id
在这里插入图片描述
云数据库id查看
在这里插入图片描述
选择环境
在这里插入图片描述
上传并部署
在这里插入图片描述
增量上传
在这里插入图片描述

1. 创建云开发项目

在这里插入图片描述

2. 创建云数据库

2.1 打开云开发

在这里插入图片描述

2.2 创建集合

在这里插入图片描述

2.3 创建记录

在这里插入图片描述

3. 创建并定义云函数

3.1 创建云函数

3.1.1 在cloudfunctions文件中选择当前环境

在这里插入图片描述

3.1.2 在cloudfunctions右键创建node.js云函数

在这里插入图片描述

3.1.3 将创建的云函数文件夹 上传并部署

在这里插入图片描述

tip:每次修改云函数文件夹是 增量上传 并刷新

在这里插入图片描述

3.2 定义云函数

3.2.1 在创建的云函数文件夹 index.js中定义函数

在这里插入图片描述

4. 在页面.js中调用云函数

//调用云函数
wx.cloud.callFunction({name,data})
sendFeed(){
    console.log("发表留言");
    // 执行云函数
    wx.cloud.callFunction({
      name:"addFeed",  //云函数的名称
      data:{   //data传递的参数
        msg:this.data.msg, //留言信息
        userInfo:wx.getStorageSync('userInfo'),//用户信息
      }
    })
    .then(res=>{
      console.log(res)
      // 获取留言
      this.getFeedback()
      // 更新msg
      this.setData({msg:""})
    })
    .catch(err=>{
      console.log(err)
    })
  },

到这里基础的获取云数据的操作就完成了

在云函数中如何操作云数据

1. 初始化

 var db = cloud.database()

2. 获取

var data = await db.collection("feedback").get()

3. 添加

var  data = await db.collection("feedback").add(
data:{添加数据}
)

云上传

1. 分别创建获取云数据云函数 和 上传数据云函数

1.1在获取云数据feedback 云函数中获取云数据库中的数据

在这里插入图片描述

1.2 创建上传数据云函数 addfeed

在这里插入图片描述

2. 在home.js页面获取用户信息 且定义上传的方法

在这里插入图片描述

3. 在 home.js中 将添加的留言信息上传到addfeed云函数 上传成功后更新页面msg

4. 在addfeed云函数中执行添加的动作并返回给 云数据

在这里插入图片描述
完整代码(这是一个发送留言的案例)
feedback/index.js代码

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

cloud.init({env: 'cloud1-3gqtnkb6095e983c'}) // 使用当前云环境
// 定义数据库
const db =cloud.database()

// 云函数入口函数
exports.main = async (event, context) => {
  // wx的上下文信息
  const wxContext = cloud.getWXContext()
  // event调用函数时传递的参数
  // 获取集合feedback的数据 云端集合的名字
  // get获取数据
  // awiat等待
  const data = await db.collection("feedback").get({
    data: {
      msg: event.msg,
      datatime: new Date(),
      userInfo:event.userInfo,
    },
  })
  
  return {
    data:data.data, //返回数据集合
    event,
    sum:event.a+event.b, //返回a+b结果
    openid: wxContext.OPENID, //openid与appid
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

addfeed/index.js代码

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

cloud.init({env: 'cloud1-3gqtnkb6095e983c'}) // 使用当前云环境
// 定义数据库
const db =cloud.database()

// 云函数入口函数
exports.main = async (event, context) => {
  // wx的上下文信息
  const wxContext = cloud.getWXContext()
  // event调用函数时传递的参数
  // 获取集合feedback的数据 云端集合的名字
  // get获取数据
  // awiat等待
  const data = await db.collection("feedback").add({
    data: {
      msg: event.msg,
      datetime: new Date(),
      userInfo:event.userInfo,
    },
  })
  
  return {
    data:data.data, //返回数据集合
    event,
    sum:event.a+event.b, //返回a+b结果
    openid: wxContext.OPENID, //openid与appid
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

页面home.wxml代码

<view>
  <textarea value="{{msg}}" style="background-color: #e784c9;" bindinput="inputHd"/>
  <button type="primary" bindtap="addFeed">发表</button>
</view>
<view class="list">
  <view wx:for="{{list}}" wx:key="_id">
    <view>
      <image src="{{item.userInfo.avatarUrl}}" style="width: 33px; height: 33px;" mode=""/>
      <text>{{item.userInfo.nickName}}</text>
      <text>{{item.datetime}}</text>
    </view>
    <view> {{item.msg}} </view>
  </view>
</view>

页面home.js代码

// pages/home/home.js
const {formatDate} =require("../utils/index")
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[],//用户信息
    msg:"",
  },
  inputHd(e){
    // textarea与msg双向绑定
    this.setData({msg:e.detail.value})
  },
  addFeed(){
    // 获取本地用户信息
    const userInfo=wx.getStorageSync('userInfo')
    // 如果有用户信息
    if(userInfo&&userInfo.nickName){
      // 直接发表留言
      this.sendFeed()
    }else{
      // 否则 先获取用户头像
      wx.getUserProfile({
        desc: '获取用户头像',
        success:(res)=>{
          // 存储用户头像信息
          wx.setStorageSync('userInfo',res.userInfo)
          // 然后发表留言
          this.sendFeed()
        }
      })
    }
  },
  sendFeed(){
    console.log("发表留言");
    // 执行云函数
    wx.cloud.callFunction({
      name:"addFeed",  //云函数的名称
      data:{   //data传递的参数
        msg:this.data.msg, //留言信息
        userInfo:wx.getStorageSync('userInfo'),//用户信息
      }
    })
    .then(res=>{
      console.log(res)
      // 获取留言
      this.getFeedback()
      // 更新msg
      this.setData({msg:""})
    })
    .catch(err=>{
      console.log(err)
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getFeedback()
  },
  getFeedback(){
    wx.cloud.callFunction(
      {name:"feedback",data:{a:3,b:2}}
    )
    .then(res=>{
      console.log(res)
      this.setData({list:res.result.data.map(item=>({...item,datetime:formatDate(item.datetime,"-")}))})
    })
    .catch(err=>
      console.error(err)
    )
  },

效果图
在这里插入图片描述

搜索查询Collection.where()

搜索官方文档
指定查询条件,返回带新查询条件的新的集合引用

//搜索语法
db.collection('todos').where({
  _openid: 'user-open-id',
  done: false
})
.get({
  success: function(res) {
    // res.data 是包含以上定义的两条记录的数组
    console.log(res.data)
  }
})

分页Collection.skip

分页官方文档
Collection.skip指定查询返回结果时从指定序列后的结果开始返回,常用于分页

//分页语法
db.collection('todos').skip(10)
  .get()
  .then(console.log)
  .catch(console.error)

排序Aggregate.sort()

排序官方文档
Aggregate.sort()根据指定的字段,对输入的文档进行排序

sort({
    <字段名1>: <排序规则>,
    <字段名2>: <排序规则>,
})
//排序规则>可以是以下取值:
//1 代表升序排列(从小到大);
//-1 代表降序排列(从大到小)

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

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

相关文章

【JavaScript 逆向】网易易盾滑块逆向分析

声明本文章中所有内容仅供学习交流&#xff0c;相关链接做了脱敏处理&#xff0c;若有侵权&#xff0c;请联系我立即删除&#xff01;案例目标验证码&#xff1a;aHR0cHM6Ly9kdW4uMTYzLmNvbS90cmlhbC9qaWdzYXc以上均做了脱敏处理&#xff0c;Base64 编码及解码方式&#xff1a;…

MongoDB数据库性能监控详解

目录一、MongoDB启动超慢1、启动日常卡住&#xff0c;根本不用为了截屏而快速操作&#xff0c;MongoDB启动真的超级慢~~2、启动MongoDB配置服务器&#xff0c;间歇性失败。3、查看MongoDB日志&#xff0c;分析“MongoDB启动慢”的原因。4、耗时“一小时”&#xff0c;MongoDB启…

color ui

color ui——组件使用 组件类型 ColorUI Vant webapp ColorUI 下载地址 Git地址 官网地址 简介 ColorUI是一个css库&#xff01;&#xff01;&#xff01;在你引入样式后可以根据class来调用组件&#xff0c;一些含有交互的操作我也有简单写&#xff0c;可以为你开发提供一…

微信小程序项目实例——我有一支画笔(画画)

微信小程序项目实例——我有一支画笔&#xff08;画画&#xff09; 文章目录微信小程序项目实例——我有一支画笔&#xff08;画画&#xff09;一、项目展示二、首页三、自由绘图四、照片绘图文末项目代码见文字底部&#xff0c;点赞关注有惊喜 一、项目展示 我有一支画笔是一…

JS中let用法

JS中let用法 基本用法 Let命令用来声明变量。它的用法类似于var&#xff0c;但是所声明的变量。只在let命令所在的代码块内有效。 上面代码块中&#xff0c;分别用let和var声明了两个变量。然后在代码块之外调用这两个变量&#xff0c;结果let声明的变量报错&#xff0c;var声…

蓝桥杯刷题冲刺 | 倒计时28天

作者&#xff1a;指针不指南吗 专栏&#xff1a;蓝桥杯倒计时冲刺 &#x1f43e;马上就要蓝桥杯了&#xff0c;最后的这几天尤为重要&#xff0c;不可懈怠哦&#x1f43e; 文章目录1.卡片2.数字三角形3.购物单4.回文日期1.卡片 题目 链接&#xff1a; 卡片 - 蓝桥云课 (lanqiao…

echarts 柱状堆叠图(图例和x轴都是动态的)

问题描述&#xff1a; echarts柱状堆叠图&#xff0c;是很常用的图表&#xff0c;官网的例子很简单 。图例&#xff08;legend&#xff09;&#xff0c;x轴&#xff08;xAxis&#xff09;都是写死的。但是一般实际应用中都是 动态的。下面就举个例子&#xff0c;实现图例和x轴…

uniapp开发微信小程序自定义顶部导航栏

自定义导航栏渐变色&#xff0c;先上效果 使用uniapp开发小程序&#xff0c;在不同界面&#xff0c;要去对页面进行修改顶部导航栏。 比如说要去定义导航栏的背景颜色&#xff0c;常规的去定义导航栏背景颜色 全局定义导航栏 "window": {"navigationBarBackg…

猿创征文|一名大三学生的前端学习之路(真情流露)

✅ 作者简介&#xff1a;一名大三的大学生&#xff0c;致力于提高前端开发能力 ✨ 个人主页&#xff1a;前端小白在前进的主页 &#x1f525; 系列专栏 &#xff1a; node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 &#x1f340; 学习格言: ☀️ 打不倒你的会使你更强&#xf…

vue3中使用axios

vue3中使用axios 1.axios在vue3.x中的基础入门使用 在不涉及使用axios进行请求拦截以及响应拦截的场景下&#xff0c;axios的使用可以简化为以下步骤。 step1. 使用npm安装axios npm install axiosstep2. 我们将要使用的axios实例单独编写成一个js文件&#xff0c;文件夹可以建…

猿创征文|【C++游戏引擎Easy2D】学C++还不会绘制一个简单的二维图形?一篇文章教会你

&#x1f9db;‍♂️iecne个人主页&#xff1a;&#xff1a;iecne的学习日志 &#x1f4a1;每天关注iecne的作品&#xff0c;一起进步 &#x1f4aa;学C必看iecne 本文专栏&#xff1a;【C游戏引擎】. &#x1f433;希望大家多多支持&#x1f970;一起进步呀&#xff01; ✨前…

【Vue组件间通信】 全局事件总线、订阅与发布

目录 一、全局事件总线 作用 安装 组件使用案例 案例分析 组件一&#xff08;小明&#xff09; 组件二&#xff08;小红&#xff09; 效果展示 二、订阅与发布 安装 组件使用案例 案例分析 组件一&#xff08;小明&#xff09; 组件二&#xff08;小红&#xff…

Python爬虫之Web自动化测试工具SeleniumChrome handless

​ ​ 作者 : SYFStrive 博客首页 : HomePage &#x1f967; 上一篇续文传送门 &#x1f4cc;&#xff1a;个人社区&#xff08;欢迎大佬们加入&#xff09; &#x1f449;&#xff1a;社区链接&#x1f517; &#x1f4cc;&#xff1a;如果觉得文章对你有帮助可以点点关注…

Python流星雨代码

前言 用Python画场流星雨看看&#xff0c;源码见文末公众号哈。 流星类 def __init__(self): self.r ra.randint(50,100) self.t ra.randint(1,3) self.x ra.randint(-2000,1000) #流星的横坐标 self.y ra.randint(0,500) #流星…

出道即封神的ChatGPT,现在怎么样了?

从互联网的普及到智能手机&#xff0c;都让广袤的世界触手而及&#xff0c;如今身在浪潮中的我们&#xff0c;已深知其力。前阵子爆火的ChatGPT&#xff0c;不少人保持观望态度。现如今&#xff0c;国内关于ChatGPT的各大社群讨论&#xff0c;似乎沉寂了不少&#xff0c;现在怎…

Web自动化测试怎么做?Web自动化测试的详细流程和步骤

一、什么是web自动化测试 自动化&#xff08;Automation&#xff09;是指机器设备、系统或过程&#xff08;生产、管理过程&#xff09;在没有人或较少人的直接参与下&#xff0c;按照人的要求&#xff0c;经过自动检测、信息处理、分析判断、操纵控制&#xff0c;实现预期的目…

使用node命令提示: ‘node‘ 不是内部或外部命令,也不是可运行的程序

报错&#xff1a;使用node命令提示: ‘node‘ 不是内部或外部命令&#xff0c;也不是可运行的程序 原因&#xff1a;没安装node.js 或者 没配置好环境变量 情况1&#xff1a;安装node.js&#xff1a; 在官网下载 .msi 文件&#xff1a;Node.js 中文网 (nodejs.cn) 步骤 1 : 下…

使用Freemarker来生成pdf文件

2022-09-02 今天接到一个生成pdf的任务&#xff0c;并且web端要能下载&#xff1b;在网上也找了许多的工具如&#xff1a;itext等&#xff0c;感觉挺复杂的没那么好用&#xff0c;然后想起了之前使用Freemarker来生成world文档&#xff0c;挺好用的&#xff0c;然后调查发现也能…

【JavaWeb】重新认识 Servlet 的初始化 [ 回顾 Servlet ]

&#x1f947;作者 .29. 的✔博客主页✔ &#x1f947;记录JavaWeb学习的专栏&#xff1a;Web专栏 &#x1f947;向前走&#xff0c;不要回头。 您的点赞&#xff0c;收藏以及关注是对作者最大的鼓励喔 ~~ 重新认识Servlet的初始化一、回顾Servlet1.什么是Servlet2.Servlet规范…

设置背景图片大小的方法

背景图片大小设置 语法&#xff1a;background-size:宽度 高度&#xff1b;作用&#xff1a;设置背景图片大小取值&#xff1a; 取值场景数字px简单方便&#xff0c;常用百分比相当于当前盒子自身的宽高百分比contain包含&#xff0c;将背景图片等比例缩放&#xff0c;直到不…