草庐IT

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

敲代码的小吉米 2023-04-15 原文

小程序云开发介绍

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

获取云数据操作

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 代表降序排列(从大到小)

有关微信小程序云开发的具体使用教程的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri,根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序,它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重,我想提高压缩级别,因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗?是否有另一个允许指定压缩级别的Ruby库? 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法? - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  4. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇,就使用ruby​​onrails自动化单元测试而言,你们正在做什么?您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您?git中的预提交Hook?只是手动调用?我完全理解测试,但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的,并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您? 最佳答案 不确定您到底想听什么,但是有几个级别的自动代码库控制:在处理某项功能时,您可以使用类似autotest的内容获得关于哪些有效,哪些无效的即时反馈。要确保您的提

  5. ruby - 在 Ruby 中使用匿名模块 - 2

    假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外,还有什么方法可以访问C和m中的其他内容?我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)?如何在使用完匿名模块后将其删除,使其定义的常量不再存在? 最佳答案 三个答案:是的,使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于

  6. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封,在我看来soap请求没有正确的命名空间。任何人都可以建议我

  7. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声? - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点?我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等),但我确实想创建一个输出文件。

  8. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗?当我运行compasswatch时,它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行?文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们?我自己编译的.sass文件编译成compiled/t

  9. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  10. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库,所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

随机推荐