草庐IT

个人微信小程序云开发总结心得

讷言丶 2023-09-01 原文

文章之前:

先附上通过微信小程序云开发做出的两个小程序,有兴趣的朋友可以微信扫码进去看看,欢迎登录学习

框架采用移动端常用UI: Vant
微信云开发官方文档:微信开发文档
相关的npm包导入方法可以看看前期一篇博文:微信小程序如何使用pubsub-js实现组件间实时通信以及如何搭建Vant框架>>详解

一、微信云开发基本概念


官方:
微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务。
开发者可以使用云开发快速开发小程序、小游戏、公众号网页等,并且原生打通微信开放能力。
开发者无需搭建服务器,可免鉴权直接使用平台提供的 API 进行业务开发


在开发中,自己主要使用了云开发的三个云开发基础能力(数据库、云函数、存储):
1、云数据库
这是一个JSON数据库,比之SQL对于一个前端来说操作数据更为简单,只要有一一些前端基础都能看懂这种数据
2、云函数
云函数的写法和写nodejs是一样的,只是相关的一些调用内置方式有出入,对照官方文档来写云函数相信对大多数前端来说应该是轻松加愉快。

简单示例:

// 云函数入口文件
const cloud = require('wx-server-sdk') //导入云函数入口文件
cloud.init()
const db = cloud.database();//连接云数据库
// 云函数入口函数
exports.main = async (event, context) => {
//使用collection()方法发起请求,传入的是数据库集合名称,通过get()请求得到数据
 const {data} = await db.collection("login_duration").get()
 //当调用此云函数时,返回data数据
 return {
  data
 }
}

写到这里也插一句,云函数的默认请求数据数量上限为100条,而小程序端的请求数据量上限为20条
3、云存储
顾名思义,就是存储文件的一个位置,类似于云盘,也相当于服务器,存入的相关文件可以通过对应的链接访问到。这个就不多说了,很简单的东西

二、小程序端 / 前端

官方文档:微信小程序基础指南

前端位置主要需要记住的个人觉得就是页面的生命周期钩子函数了,在实际开发中微信小程序会默认为我们的页面JS添加上相应的默认生命周期函数以及页面需要使用的基础数据data(修改基础的data数据我们直接 使用 this.setData()方法就可以了),
请看示例,这就是当我们在app.json中建好页面后开发者工具自动生成的JS文件(不得不说考虑很周到,另外,做为最开始执行的JS文件,app.js中单独有一个 ,onLaunch() 生命周期钩子函数,用于用户进入小程序就会执行的函数,可以应用在获取用户的登录时间或初始化请求等作用中)。

// pages/test/test.js
Page({

 /**
  * 页面的初始数据
  */
 data: {

 },

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad(options) {

 },

 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady() {

 },

 /**
  * 生命周期函数--监听页面显示
  */
 onShow() {

 },

 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide() {

 },

 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload() {

 },

 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh() {

 },

 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom() {

 },

 /**
  * 用户点击右上角分享
  */
 onShareAppMessage() {

 }
})

另外就是页面中的json文件,这个文件一般没怎么用,除非在你当前这个页面中有需要该页面单独使用的相关组件或方法;还有一个wxml文件,这个相当于我们的HTML文件,但是也有差别的,我们可以在这个文件中填入和JS中data对应对应的数据来让数据 “动起来”(this.setData()修改data数据)
使用双大括号(插值表达式) {{ }} 来填入对应的变量。有需要的时候也可以填入一些基本的JS语法,一般都是三元表达式一类的简单语法。

三、小程序端 / 云函数 增删改查 数据库

增删改查的方法小程序端和云函数端的写法都是一致的,唯一不同的位置是初始化云开发的方式不一样。小程序端直接 wx.cloud.init(),而云函数 const cloud = require('wx-server-sdk') ;cloud.init() 多了一个导入方法前面也说过了。另外需要注意的是小程序端和云函数的获取数据库数据上限不一样(小程序端20条,云函数端100条,且单次返回的数据不能大于1M)

1、小程序端 数据库增、删、改、查以及前端分页显示

官方文档:
1、增删改查初始化
2、相关API
3、相关操作符

以下只简单介绍一下自己在开发过程中使用到的API,更详细的请移步上方官方文档 2(相关API),同时也欢迎在评论区留言大家一起学习共同进步。

关键方法:add(data:{})
请看示例:

const db = wx.cloud.database()
db.collection("login").add({
                  data: {data:"新增一条数据"}
               })

关键方法:remove()
请看示例:

const db = wx.cloud.database()
const _ = db.command()
//删除时一般都需要构造删除条件,where中传入的对象就是一个删除条件
db.collection("login").where({
                     _id: _.eq(id),
                     _openid
                  }).remove()

关键方法:update(data:{})
请看示例:

const db = wx.cloud.database()
db.collection("login").where({_id: _.eq(id)}.update({
                  data: {data:"修改一条数据"}
               })

关键方法:where({})
查询方法较多,下面的示例只是给了其中最简单的一种方法,构建查询的多种方式建议参考官方文档:构建查询条件
请看示例:

const db = wx.cloud.database()
const _ = db.command()
db.collection("community").where({
            _id: _.eq(id),
         }).get().then(res =>{
      console.log(res.data)
      }).catch(err =>{
      console.log(err)}
      )

分页 关键方法:skip(index) / limit(number)
数据库分页获取的方法主要使用的是skip,该方法传入索引号,返回从该索引号往后的数据(小程序端20条,云函数 100条);limit( )用于返回数据中需要数量,传入一个数值,该数值用于控制返回数据数量的多少,使用的范围以及场景比之skip()少了很多。
同样的,在他们之前也可使用where()构建查询条件
请看示例:

const db = wx.cloud.database()
//从数据库中第十条开始查询,只需要返回5条数据
db.collection("login").skip(10).limit(5).get().then(res =>{
	console.log(res.data);
}).catch(err =>{
console.log(err)
})

2、云函数 数据库增、删、改、查

云函数对数据库的增删改查基本能力是相同的,不同的位置在于云函数端的权限更大,可以修改其它用户的信息以及云开发初始化不同。因为和小程序端都相差无几,这里就只对删除做一个示例,其它的请大家自己去测试一下吧。

  • 云函数
//云函数名称为新建Node.js云函数时的名称
//此处测试名称为:remove
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database();
// 云函数入口函数
exports.main = (event, context) => {
   try {
      db.collection("community").where({
         _id:event._id
      }).remove(res=>{
         result = res.errMsg
      }) 
      return true     
   } catch (err) {
      console.log(err)
      return false
   }
}
  • 小程序端调用云函数
let _id = e.target.dataset.id
wx.cloud.callFunction({
   name: "remove", //云函数名称,名称千万不能错,不然调用无效
   data: { _id },
   success: (res) => {
      console.log('remove success');
      console.log(res);
    },
  fail: (err) => {
     console.log('remove fail');
     console.log(err);
   }
})

四、其它需要注意的地方

  1. 小程序端的增删改查只能应用与单独的用户,什么意思呢?举个例子大家应该就明白了:假如我做为管理员我想在小程序中删除一个用户,删除该用户时,需要用到该用户的 _openid(小程序中每个用户独有的id,相当于现实生活中的身份证号),但是在小程序端只能获取使用自己个人的 _openid,因此这个使用就需要使用云函数来做对应的操作了,这是小程序端使用数据库增删改查和云函数端增删改查需要注意的一个地方。
  2. limit () 在小程序端默认及最大上限为 20,在云函数端默认及最大上限为 1000
  3. 有的人需要使用把后台数据库进行可视化的,这个时候可以考虑使用CMS内容管理,进入方式为:微信开发者工具 > 云开发 > 更多 > 内容管理 ,在内容管理页面开通后台可视化数据库管理,通过该方式,可以直接获得一个后台管理系统,通过该系统可以用户可以直接对数据库进行增删改查
    ,很适用于非开发人员使用,使用场景为客户开发的小程序,客户需要个人对数据库进行增删改查。

最后

本次总结暂时到这个位置,后期学习过程中也会持续更新,感谢您的观看。如有不足支持敬请批评指正,感激不尽。

希望本篇博文能在微信小程序开发方面对您有所帮助

有关个人微信小程序云开发总结心得的更多相关文章

  1. SPI接收数据异常问题总结 - 2

    SPI接收数据左移一位问题目录SPI接收数据左移一位问题一、问题描述二、问题分析三、探究原理四、经验总结最近在工作在学习调试SPI的过程中遇到一个问题——接收数据整体向左移了一位(1bit)。SPI数据收发是数据交换,因此接收数据时从第二个字节开始才是有效数据,也就是数据整体向右移一个字节(1byte)。请教前辈之后也没有得到解决,通过在网上查阅前人经验终于解决问题,所以写一个避坑经验总结。实际背景:MCU与一款芯片使用spi通信,MCU作为主机,芯片作为从机。这款芯片采用的是它规定的六线SPI,多了两根线:RDY和INT,这样从机就可以主动请求主机给主机发送数据了。一、问题描述根据从机芯片手

  2. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  3. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  4. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  5. Simulink方法总结和避坑指南(一)——Simulink入门与基本调试方法 - 2

    文章目录一、项目场景二、基本模块原理与调试方法分析——信源部分:三、信号处理部分和显示部分:四、基本的通信链路搭建:四、特殊模块:interpretedMATLABfunction:五、总结和坑点提醒一、项目场景  最近一个任务是使用simulink搭建一个MIMO串扰消除的链路,并用实际收到的数据进行测试,在搭建的过程中也遇到了不少的问题(当然这比vivado里面的debug好不知道多少倍)。准备趁着这个机会,先以一个很基本的通信链路对simulink基础和相关的debug方法进行总结。  在本篇中,主要记录simulink的基本原理和基本的SISO通信传输链路(QPSK方式),计划在下篇记

  6. Ubuntu20.04系统WineHQ7.0安装微信 - 2

    提供3种Ubuntu系统安装微信的方法,在Ubuntu20.04上验证都ok。1.WineHQ7.0安装微信:ubuntu20.04安装最新版微信--可以支持微信最新版,但是适配的不是特别好;比如WeChartOCR.exe报错。2.原生微信安装:linux系统下的微信安装(ubuntu20.04)--微信适配的最好,反应最快,但是微信版本只到2.1.1,版本太老,很多功能都没有。3.深度deepin-wine6安装微信:ubuntu20.04+系统deepin-wine6安装新版微信--综合比较好,当前个人使用此种方法1个月,微信版本3.4;没什么大问题,尚可。一、WineHQ7.0安装微信

  7. 微信小程序订餐系统 - 2

    对传统的餐饮商家来说,小程序很好地解决了餐厅线下线上连接的问题,在引流获客、节约人力、营销宣传、塑造会员体系、改善消费体验等方面都有很大帮助。小程序点餐可以帮助餐饮企业节省一大把人力开支。一个包含扫码点单、菜品管理、优惠券推送、外卖配送的小程序,商家花几万元就能完成开发测试并投入。商家为什么要开通“扫码点餐”1.解决服务员不够用的问题。2.不怕顾客跑单漏单。3.在微信就能管理菜品、查看营业额。4.订单小票显示顾客桌号和已点菜品。5.可在“附近的小程序”找到您的门店。如今餐饮业常用的三种经营模式:1堂食点单模式客人通过小程序堂食点单。商家可以在微信扫码点餐小程序管理后台根据自己店内情况来设置不同

  8. 最新版人脸识别小程序 图片识别 生成二维码签到 地图上选点进行位置签到 计算签到距离 课程会议活动打卡日常考勤 上课签到打卡考勤口令签到 - 2

    技术选型1,前端小程序原生MINA框架cssJavaScriptWxml2,管理后台云开发Cms内容管理系统web网页3,数据后台小程序云开发云函数云开发数据库(基于MongoDB)云存储4,人脸识别算法基于百度智能云实现人脸识别一,用户端效果图预览老规矩我们先来看效果图,如果效果图符合你的需求,就继续往下看,如果不符合你的需求,可以跳过。1-1,登录注册页可以看到登录页有注册入口,注册页如下我们的注册,需要管理员审核,审核通过后才可以正常登录使用小程序1-2,个人中心页登录成功以后,我们会进入个人中心页我们在个人中心页可以注册人脸,因为我们做人脸识别签到,需要先注册人脸才可以进行人脸比对,进

  9. threejs 720/360全景工具开发心得 - 2

    前言最近做了一个720全景工具,有很多开发人员觉得全景图很简单,github上也有很多全景图的源码,但当实际使用的时候会发现有很多坑,还达不到真正意义上的商用级别,下面我会把我们开发这个项目遇到的一些坑和解决方案都梳理处理,已经发布到线上https://720.h5ds.com/工具简介:H5-720全景(简称H5-720)是一款基于threejs+h5的全景图制作工具,用户可上传全景图片制作全景图,H5-720可以预设按钮,添加元素,添加热点,添加特效,添加多种交互方式,一键开启重力感应,VR眼镜支持,PC端制作后可以适配多端查看。什么是全景图?在这之前,简单的介绍下全景图,可以360度无死

  10. 微信小程序切换云环境 - 2

    在开发微信小程序的时候,我们可能需要开发环境和测试环境,或者其他环境,下面是切换环境的方法。首先需要明确的是:前端的页面代码是不区分环境的,环境的区分指的是云函数、云数据库、云存储这些。1、更改云函数的使用云环境这里我们从cloud1更改为test-cloud,这个改完是没有用的,因为在前端代码指定了使用的云环境。cloudfunctions文件和miniprogram文件虽然都在一个目录下,但是这两个没有直接联系。2、在evList.js中添加自己云环境evList.js存储了云环境列表,这里把test-cloud加到这个列表里,需要填写envId和alias,参照cloud1写就行。3、更

随机推荐