微信小程序云开发入门

news2024/11/15 8:33:26

写在前面:

参考的课程是咸虾米老师在b站的课:2.2.在页面展现云数据库的内容_哔哩哔哩_bilibili

云开发官方文档:微信开放文档

1、什么是云开发?

用自己的话来说就是把服务器和后台都搭在腾讯开发的服务器上。

2、如何开通云开发?

打开微信开发者工具新建项目之后点击云开发,第一次开通有一个月免费试用,或者花19.9买一个月,现在好像是涨到39.9了还是多少我忘了。

3、云开发中如何建立数据库(表)?

然后再往相应的数据表中填数据

并且把权限给打开

4、云开发中如何和数据库相连?

参考一下官方文档:

step1、先获取数据库引用

step2、再连接数据库

getData(){
console.log(123);
db.collection("demolist");
//collection是要指定数据库的名字
},

查询操作:

使用get方法:

获取数据库数据方法一:

res 参数是成功回调函数的参数,包含从数据库获取的数据。

getData(){
db.collection("demolist").get({
  success:res=>{
    console.log(res);
  }
})
},

点击获取数据,这样就成功获得数据了

获取数据库数据方法二:(这种叫es6的promise写法)
db.collection("demolist").get().then(res=>{
  console.log(res);
})
},

查询特定条件:

加一个doc:

注意:doc中只能放id 

getData(){
db.collection("demolist").doc("34e8707565d9537300cd08be7802b145").get({
  success:res=>{
    console.log(res);
  }
})
},

此时打印台:

查询指定数据:

db.collection("demolist").where({author:"琳琳"}).get().then(res=>{
  console.log(res);
})
},

如何把查询到的数据在页面展示:

step1、首先在data中定义初始数据对象

  data: {
    dataObj:""
  },

step2、在方法里请求数据,this.setData({ dataObj: res.data }); 将获取到的数据 res.data 更新到页面的 dataObj 中。这样,一旦数据更新,与 dataObj 相关联的页面部分就会重新渲染,以反映最新的数据。

getData(){
db.collection("demolist").doc("34e8707565d9537300cd08be7802b145").get({
  success:res=>{
    // console.log(res);
this.setData({
  dataObj:res.data
})
  }
})
},

step3、在index.wxml中展示数据

<button type="primary" bindtap="getData">点击获取数据</button>
<view>{{dataObj.title}}-{{dataObj.author}}</view>

多条数据展示:

如果您有多条数据需要展示,因为数据库中的表内数据都是以数组的形式存储的,所以在wxml中需要用到wx:for,并且把之前的对象名改成item

<button type="primary" bindtap="getData">点击获取数据</button>
<view wx:for="{{dataObj}}">{{item.title}}-{{item.author}}</view> 

注意:所有在控制台手动添加的数据,用代码只有读的权限,没有删除修改的权限。

插入数据

通过表单添加数据,这时候您需要去了解一下form和button的官方文档。

step1、在index.wxml中写好样式表单

<form bindsubmit="btnSub">
<input name="title" placeholder="请输入标题"></input>
<input name="author" placeholder="请输入作者"></input>
<textarea name="content" placeholder="请输入内容"></textarea>
<button type="primary" form-type="submit">提交</button>
<button form-type="reset">重置</button>
</form>           

step2、在js中写方法,一共有三种方法

方法一:

//提交表单添加进数据库
btnSub(res){
  // var {title,author,content}=res.detail.value;
  var title=res.detail.value.title;
  var author=res.detail.value.author;
  var content=res.detail.value.content;
  db.collection("demolist").add({
    data:{
      title:title,
      author:author,
      content:content
    }
  }).then(res=>{
    console.log(res);
  })
},

方法二:

//提交表单添加进数据库
btnSub(res){
  var {title,author,content}=res.detail.value;
  db.collection("demolist").add({
    data:{
      title:title,
      author:author,
      content:content
    }
  }).then(res=>{
    console.log(res);
  })
},

方法三

//提交表单添加进数据库
btnSub(res){
 var resVlu=res.detail.value
  db.collection("demolist").add({
    data:resVlu
  }).then(res=>{
    console.log(res);
  })
},

输入数据再点提交,输出台有这样提示就算成功了。

再去数据库里看

更新数据操作

加入我们要修改第三条记录里的author

wxml代码:

<button type="primary" bindtap="updateData">更新一条数据</button>

js代码:

updateData(){
  db.collection("demolist").doc("97843aa265d9aa4e01dbed066e01ad37").update({
    data:{
  author:"蓬蓬"
    }
  }).then(res=>{
    console.log(res);
  })
},

看到console台报status:1就代表更新成功了。

如果是根据单个属性来修改的话那就是用where

修改作者名叫蓬蓬的人为nq

js代码:

updateData(){
  db.collection("demolist").where({author:"蓬蓬"}).update({
    data:{
  author:"nq"
    }
  }).then(res=>{
    console.log(res);
  })
},

这样就可以更新成功

update还可以新增数据,新增一个修改时间,posttime

如果您使用set,最后结果只会留下你更新代码里的那一项和id号,其他的全部都会被删掉,如果您有覆盖数据的需求可以用它。

删除

wxml代码:

<button type="primary" bindtap="delData">删除一条数据</button>

在demo1.js中最顶部还要加一个全局变量

// pages/demo1/demo1.js
const db=wx.cloud.database();
//在最外侧定义一个全局变量
var myVlu="";
Page({
  //获取输入的内容
  myIpt(res){
    var vlu=res.detail.value;
    myVlu=vlu
  },
  //删除记录
delData(){
  db.collection("demolist").doc(myVlu).remove(
    
  ).then(res=>{
    console.log(res);
  })
},

这样就可以完美删除一条记录了。

1

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

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

相关文章

HCIA-HarmonyOS设备开发认证V2.0-IOT硬件子系统-WatchDog

目录 一、 WATCHDOG 概述功能简介基本概念 二、WATCHDOG 模块相关API三、WATCHDOG HDF驱动开发3.1、开发步骤(待续...) 坚持就有收获 一、 WATCHDOG 概述 功能简介 看门狗&#xff08;Watchdog&#xff09;&#xff0c;又称看门狗计时器&#xff08;Watchdog timer&#xff0…

【AI数字人-论文】RAD-NeRF论文

文章目录 前言模型框架动态的NeRF前处理头部模型音频特征眼部控制头部总体表示 躯干模型loss 结果参考 【AI数字人-论文】AD-NeRF论文 前言 本篇论文有三个主要贡献点&#xff1a; 提出一种分解的音频空间编码模块&#xff0c;该模块使用两个低维特征网格有效地建模固有高维音…

关于Kinect 互动沙盘 深度图 Shader Graph 分层

把Kinect的深度图穿给Shader Graph using com.rfilkov.kinect; using UnityEngine; using UnityEngine.UI; public class GetDepthTex : MonoBehaviour { public Material Mat_SandTable; void Update() { Mat_SandTable.SetTexture("_MainTex"…

LabVIEW串口通信的激光器模块智能控制

LabVIEW串口通信的激光器模块智能控制 介绍了通过于LabVIEW的VISA串口通信技术在激光器模块控制中的应用。通过研究VISA串口通信的方法和流程&#xff0c;实现了对激光器模块的有效控制&#xff0c;解决了数据发送格式的匹配问题&#xff0c;为激光器模块的智能控制提供了一种…

Open CASCADE学习|几何数据结构

在几何引擎内一般把数据分成两类&#xff1a;几何信息与拓扑信息。二者可以完整地表达出实体模型&#xff0c;彼此相互独立、又互相关联。几何信息是指构成几何实体的各几何元素在欧式空间中的位置、大小、尺寸和形状信息。例如一条空间的直线&#xff0c;可以用两端点的位置矢…

019—pandas 计算实验仪器正常运行周期时长

需求&#xff1a; 对指定两个状态作为一个周期&#xff0c;并计算出周期内的差值&#xff0c;写到周期结束所在的行上。pandas 非常适合实现此类有着较为复杂逻辑的问题。 思路&#xff1a; 这个问题的难点是状态的不规律性&#xff0c;如何才能准确找出所有 T 和 C 的周期。…

python 打包 apk

转换之前python代码需要使用指定的框架才能转换&#xff0c;列如&#xff1a;kivy from kivy.app import App from kivy.uix.boxlayout import BoxLayout from kivy.uix.button import Buttonimport time import pyautogui import threadingstatus False# 这是一个将被线程执…

本博客工程源码总目录----方便你快速找到自己喜欢的项目

目录 1、前言2、本人项目总分类3、FPGA图像处理类项目-->快速查找3.1、图像采集-->MIPI视频类3.2、图像采集-->SDI视频类3.3、图像采集-->PAL视频类3.4、图像采集-->Cmeralink视频类3.5、图像转换-->LVDS视频转换3.6、图像缩放&#xff08;纯Verilog版本HLS版…

QEMU开发入门

1. 简介 QEMU&#xff08;Quick EMUlator&#xff09;是一个开源的虚拟化软件&#xff0c;它能够模拟多种硬件平台&#xff0c;并在这些平台上运行各种操作系统。QEMU可以在不同的主机架构之间进行虚拟化&#xff0c;例如x86、ARM、PowerPC、Risc-V等。QEMU是一个功能强大且灵…

【竞技宝jjb.lol】LOL:wayward奎桑提主宰团战 WE2-1力克IG

北京时间2024年2月24日&#xff0c;英雄联盟LPL2024春季常规赛继续进行&#xff0c;昨日共进行三场比赛&#xff0c;第二场比赛由IG对阵WE。本场比赛双方前两局战至1-1平&#xff0c;决胜局WE中期抓住IG失误后拿下大龙奠定胜局&#xff0c;最终WE2-1力克IG。以下是本场比赛的详…

二次元风格个人主页HTML源码

源码介绍 直接上传服务器压缩包解压就完事了&#xff0c;修改index.html内代码即可&#xff0c;注释写的很全&#xff0c;替换图片在文件夹img&#xff0c;只有前端&#xff0c;没有后台&#xff0c;大佬如果需要&#xff0c;可以自行添加后台。本源码非常适合个人工作室主页。…

利用psutil库检查脚本是否在运行

摘要 如果要判断某一脚本是否在运行&#xff0c;可以通过psutil库获取所有进程的cmdline&#xff0c;并判断指定的文件名是否在cmdline中。 目录 1.psutil库简介 2.检查代码及说明 2.1检查思路 2.2异常捕获 2.3执行方法 1.psutil库简介 psutil 是一个跨平台&#xff08;…

Optimization for Deep Learning

Notations: : model parameters at time step or : gradient at used to compute : momentum accumulated from time step to time step , which is used to cpmpute Optimization What is Optimization about? 找到一组参数&#xff0c;使得 最小&#xff0c;或者说是…

内容安全补充

第十一天 密码学 近现代加密算法 古典加密技术 --- 算法保密原则 近现代加密技术 --- 算法公开&#xff0c;密钥保密 对称加密算法&#xff0c;非对称加密算法 对称加密 --- 加密和解密的过程中使用的是同一把密钥。 所以&#xff0c;对称加密所使用的算法一定是一种双向…

概率基础——指数分布

概率基础——指数分布 介绍 指数分布是一种连续概率分布&#xff0c;描述了独立随机事件之间的时间间隔。它常被用来模拟随机事件的等待时间&#xff0c;例如到达下一位顾客的等待时间、设备故障的间隔时间等。指数分布具有无记忆性的特点&#xff0c;即在给定时间内没有发生…

*MYSQL--索引--内部原理

MYSQL的索引根据功能,主要有三大类型: 1.HASH索引 2.二叉树 3.BTREE索引 一:HASH索引 1.内部原理: 在设置了某列为索引列之后,并且开始或者将要在相应索引列创建数据的时候,系统通过某种算法 F(X) 自动计算出来一个十六进制的哈希值,这个哈希值能够对应相应的字段值 所以…

单片机51 输入和输出

一、IO口基本概念介绍 单片机的IO口&#xff08;Input/Output口&#xff09;是连接单片机与外部电路或设备的接口。单片机的IO口可以分为输入口和输出口两种&#xff0c;用于控制和监测外部设备的状态。 1. 输入口&#xff1a;单片机的输入口用于接收外部电路或设备的信号。输…

C++的string容器->基本概念、构造函数、赋值操作、字符串拼接、查找和替换、字符串比较、字符存取、插入和删除、子串

#include<iostream> using namespace std; #include <string> //string的构造函数 /* -string(); //创建一个空的字符串 例如: string str; -string(const char* s); //使用字符串s初始化 -string(const string& str); //使…

Linux安装jdktomcatMySQl一战完成

一、jdk安装具体步骤 1、查询是否有jdk java -version 2、进入opt目录 cd /opt/ 连接服务器工具 进入opt目录&#xff0c;把压缩文件上传 查询是否查询成功 进入解压到的目录 cd /usr/local/创建新文件夹 mkdir java 再回到opt目录进行解压 cd /opt 解压到刚刚创建的文…

springboot邮箱注册

1.准备工作 操作之前准备两个邮箱 我准备了网易邮箱和QQ邮箱&#xff0c;网易邮箱用来发送验证码&#xff0c;QQ邮箱用来做注册&#xff08;希望大家和我一样&#xff0c;不然可能会出错 &#xff09; 发送验证码的邮箱需要开启一些设置&#xff0c;否则不…