微信小程序云开发
2021/7/11 17:15:36
本文主要是介绍微信小程序云开发,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
微信小程序云开发
1、认识小程序开发
- 小程序·云开发是微信团队联合腾讯云推出的专业的小程序开发服务。
- 开发者可以使用云开发快速开发小程序、小游戏、公众号网页等,并且原生打通微信开放能力。
- 开发者无需搭建服务器,可免鉴权直接使用平台提供的API进行业务开发小程序
- 云开发又简称tcb,是微信官方给我们提供的基于腾讯云的云服务器。目前云开发包含:云数据库,云函数,云存储,云调用。后面章节会具体给大家讲解这几个。
- 官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html
2、微信开发者工具下载及安装
微信开发者工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
一路下一步即可
3、小程序的注册
小程序的注册:https://developers.weixin.qq.com/miniprogram/introduction/#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%B3%A8%E5%86%8C
正式使用更推荐注册一个公众号,自带小程序
4、云开发环境搭建
打开微信开发者工具,点击云开发,等待加载即可
5、云数据库
5.1、图形化界面操作
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gedVTdrI-1625987488433)(C:\Users\yoya\AppData\Roaming\Typora\typora-user-images\image-20210710212739551.png)]
5.2、云数据库快速入门
app.js
App({ onLaunch: function () { if (!wx.cloud) { console.error('请使用 2.2.3 或以上的基础库以使用云能力') } else { wx.cloud.init({ // env 参数决定接下来小程序发起的云开发调用(wx.cloud.xxx)会默认请求到哪个云环境的资源,如不填则使用默认环境(第一个创建的环境) // env:"ruoye-3gpfdl7g7c323196", traceUser: true, }) } } })
index.js
const app = getApp() Page({ data: { }, onl oad: function() { const db = wx.cloud.database() // es5 // db.collection("people").get({ // success(res){ // console.log("请求成功",res) // },fail(err){ // console.log("请求失败",err) // } // }) // es6 db.collection("people").get() .then(res=>{ console.log("请求成功",res) }) .catch(err=>{ console.log("请求失败",err) }) } })
数据库明明有数据库,返回为空?
data: [] errMsg: "collection.get:ok" __proto__: Object
5.3、数据库权限
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C1DXEzk3-1625987488436)(C:\Users\yoya\AppData\Roaming\Typora\typora-user-images\image-20210710212759595.png)]
修改权限后即可查询到数据
5.4、云数据库查询
5.4.1、全部查询
const db = wx.cloud.database() db.collection("people").get() .then(res=>{ console.log("请求成功",res) }) .catch(err=>{ console.log("请求失败",err) })
5.4.2、条件查询
const db = wx.cloud.database() db.collection("people").where({ name:"yoya" }).get() .then(res=>{ console.log("请求成功",res) }) .catch(err=>{ console.log("请求失败",err) })
5.4.3、查询单条数据
const db = wx.cloud.database() db.collection("people").doc().get() .then(res=>{ console.log("请求成功",res) }) .catch(err=>{ console.log("请求失败",err) })
errMsg: collection.doc:fail docId must not be empty; at collection.doc api;
需要填写参数_id
const db = wx.cloud.database() db.collection("people").doc("28ee4e3e60e97b612957365b71d7cafe") .get() .then(res=>{ console.log("请求成功",res) }) .catch(err=>{ console.log("请求失败",err) })
5.4.4、排序
asc增序,desc降序
const db = wx.cloud.database()db.collection("people") .orderBy("diamond","asc") .get() .then(res => { console.log("请求成功", res)}) .catch(err => { console.log("请求失败", err)})
5.4.5、分页
limit表每页条数
skip表跳过几条
const db = wx.cloud.database()db.collection("people") .limit(2) .skip(2) .get() .then(res => { console.log("请求成功", res)}) .catch(err => { console.log("请求失败", err)})
5.5.6、Command
比较操作符
- 大于:db.command.gt
- 大于等于:db.command.gte
- 小于:db.command.lt
- 小于等于:db.command.lte
- 在给定数组内:db.command.in
- 不在给定数组内:db.command.nin
- 等于:db.command.eq
- 不等于:db.command.neq
const db = wx.cloud.database()const _ = db.commanddb.collection("people") .where({ diamond:_.gt(60)}) .get() .then(res => { console.log("请求成功", res)}) .catch(err => { console.log("请求失败", err)})
逻辑操作符
- 与:and
- 或:or
- 非:not
- 全非:nor
const db = wx.cloud.database()const _ = db.commanddb.collection("people") .where(_.and([ { diamond:_.gt(60) }, { diamond:_.lt(100) }])) .get() .then(res => { console.log("请求成功", res)}) .catch(err => { console.log("请求失败", err)})}})
const db = wx.cloud.database()const _ = db.commanddb.collection("people") .where(_.or([ { diamond:_.lt(60) }, { diamond:_.gt(90) }])) .get() .then(res => { console.log("请求成功", res)}) .catch(err => { console.log("请求失败", err)})}
字段操作符
- 存在:exists
- 取余:mod
const db = wx.cloud.database()const _ = db.commanddb.collection("people") .where({ _openid: _.mod(50,0)}) .get() .then(res => { console.log("请求成功", res)}) .catch(err => { console.log("请求失败", err)})
const db = wx.cloud.database()const _ = db.commanddb.collection("people") .where({ diamond: _.exists(true)}) .get() .then(res => { console.log("请求成功", res)}) .catch(err => { console.log("请求失败", err)})
5.5、云数据库添加
const db = wx.cloud.database()db.collection("people").add({ data: { "diamond": 50, "name": "blingbling", "picture": "https://profile.csdnimg.cn/C/5/2/3_gyfghh", "type": "root", "openid": "oYoLp5O5e_J9xUCEXuFd5m1PoS34" }}) .then(res=>{ console.log("添加成功",res)}) .catch(err=>{ console.log("添加失败",err)})
database permission denied | errMsg: Permission denied
修改权限
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ebe8h34s-1625987488438)(C:\Users\yoya\AppData\Roaming\Typora\typora-user-images\image-20210710215732242.png)]
5.6、云数据库修改
const db = wx.cloud.database() db.collection("people") .doc("28ee4e3e60e9a75f296211f205f8f784") .update({ data: { "diamond": 75 } }) .then(res=>{ console.log("修改成功",res) }) .catch(err=>{ console.log("修改失败",err) })
5.7、云数据库删除
const db = wx.cloud.database() db.collection("people") .doc("28ee4e3e60e9a75f296211f205f8f784") .remove() .then(res=>{ console.log("删除成功",res) }) .catch(err=>{ console.log("删除失败",err) })
重复删除引发的问题,最好先查询在删除
errMsg: document.remove:fail Error: cannot remove document with _id 28ee4e3e60e9a75f296211f205f8f784, please make sure that the document exists and you have the corresponding Write permission; at document.remove api;
6、云函数
- 云函数即在云端(服务器端)运行的函数。在物理设计上,一个云函数可由多个文件组成,占用一定量的 CPU 内存等计算资源;各云函数完全独立;可分别部署在不同的地区。开发者无需购买、搭建服务器,只需编写函数代码并部署到云端即可在小程序端调用,同时云函数之间也可互相调用
- 一个云函数的写法与一个在本地定义的 JavaScript 方法无异,代码运行在云端 Node.js 中。当云函数被小程序端调用时,定义的代码会被放在 Node.js 运行环境中执行。我们可以如在 Node.js 环境中使用 JavaScript 一样在云函数中进行网络请求等操作,而且我们还可以通过云函数后端 SDK 搭配使用多种服务,比如使用云函数 SDK 中提供的数据库和存储 API 进行数据库和存储的操作,这部分可参考数据库和存储后端 API 文档
- 云开发的云函数的独特优势在于与微信登录鉴权的无缝整合。当小程序端调用云函数时,云函数的传入参数中会被注入小程序端用户的 openid,开发者无需校验 openid 的正确性因为微信已经完成了这部分鉴权,开发者可以直接使用该 openid
6.1、云函数快速入门
cloud.js
const cloud = require('wx-server-sdk') cloud.init({ // API 调用都保持和云函数当前所在环境一致 env: cloud.DYNAMIC_CURRENT_ENV }) // event 参数包含小程序端调用传入的 data exports.main = async (event, context) => { const wxContext = cloud.getWXContext() return { event, openid: wxContext.OPENID, appid: wxContext.APPID } }
local.js
wx.cloud.callFunction({ name:"login" }) .then(res=>{ console.log("云函数调用成功",res) }) .catch(err=>{ console.log("云函数调用失败",err) })
6.2、云函数获取数据
cloud.js
// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init({ // API 调用都保持和云函数当前所在环境一致 env: cloud.DYNAMIC_CURRENT_ENV }) // 云函数入口函数 exports.main = async (event, context) => { return cloud.database().collection("people").get() }
local.js
wx.cloud.callFunction({ name:"select" }) .then(res=>{ console.log("云函数调用成功",res) }) .catch(err=>{ console.log("云函数调用失败",err) })
6.3、云函数修改数据
cloud.js
// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init({ // API 调用都保持和云函数当前所在环境一致 env: cloud.DYNAMIC_CURRENT_ENV }) // 云函数入口函数 exports.main = async (event, context) => { return cloud.database().collection("people").doc("28ee4e3e60e97b612957365b71d7cafe").update({ data:{ name:"若耶" } }) }
local.js
wx.cloud.callFunction({ name:"select" }) .then(res=>{ console.log("云函数调用成功",res) }) .catch(err=>{ console.log("云函数调用失败",err) })
6.4、云函数传参
cloud.js
// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init({ // API 调用都保持和云函数当前所在环境一致 env: cloud.DYNAMIC_CURRENT_ENV }) // 云函数入口函数 exports.main = async (event, context) => { return event._id }
local.js
wx.cloud.callFunction({ name:"select", data:{ _id:"28ee4e3e60e97b612957365b71d7cafe" } }) .then(res=>{ console.log("云函数调用成功",res) }) .catch(err=>{ console.log("云函数调用失败",err) })
6.5、云函数修改数据
cloud.js
// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init({ // API 调用都保持和云函数当前所在环境一致 env: cloud.DYNAMIC_CURRENT_ENV }) // 云函数入口函数 exports.main = async (event, context) => { return cloud.database().collection("people").doc(event._id).remove() }
local.js
wx.cloud.callFunction({ name:"select", data:{ _id:"65af6a0060ea4e5d000268fc68055c3c" } }) .then(res=>{ console.log("云函数调用成功",res) }) .catch(err=>{ console.log("云函数调用失败",err) })
7、云存储
云存储提供高可用、高稳定、强安全的云端存储服务,支持任意数量和形式的非结构化数据存储,如视频和图片,并在控制台进行可视化管理。云存储包含以下功能:
- 存储管理:支持文件夹,方便文件归类。支持文件的上传、删除、移动、下载、搜索等,并可以查看文件的详情信息
- 权限设置:支持基础权限设置和高级安全规则权限控制
- 上传管理:在这里可以查看文件上传历史、进度及状态
- 文件搜索:支持文件前缀名称及子目录文件的搜索
- 组件支持:支持在 image、audio等组件中传入云文件 ID
7.1、上传图片
选择图片
chooseimg() { wx.chooseImage({ // 图片数量 count: 1, // 图片类型 sizeType: ['original', 'compressed'], // 图片来源 sourceType: ['album', 'camera'] }) .then(res => { console.log("选择成功", res) // tempFilePaths可以作为img标签的src属性显示图片 this.uploadimg(res.tempFilePaths[0]) }) .catch(err => { console.log("选择失败", err) }) },
上传图片
uploadimg(tempFilePath){ wx.cloud.uploadFile({ // 在云存储的路径 cloudPath: 'ruoye.png', // 要上传的文件路径 filePath: tempFilePath, }).then(res => { console.log("上传成功",res) }).catch(err => { console.log("上传失败",err) }) }
上传后返回的fileID可用作预览
7.2、上传视频
选择视频
choosevideo() { wx.chooseVideo({ sourceType: ['album', 'camera'], maxDuration: 60, camera: 'back' }).then(res => { console.log("选择成功", res) this.uploadvideo(res.tempFilePath) }) .catch(err => { console.log("选择失败", err) }) },
上传视频
uploadimg(tempFilePath){ wx.cloud.uploadFile({ // 在云存储的路径 cloudPath: 'ruoye.mp4', // 要上传的文件路径 filePath: tempFilePath, }).then(res => { console.log("上传成功",res) }).catch(err => { console.log("上传失败",err) }) }
上传后返回的fileID可用作预览
7.3、上传文件(聊天内的文件)
选择文件
choosefile() { wx.chooseMessageFile({ count: 10, type: 'all', }) .then(res => { console.log("选择成功", res) this.uploadfile(res.tempFiles[0]) }) .catch(err => { console.log("选择失败", err) }) },
上传文件
uploadfile(tempFiles) { wx.cloud.uploadFile({ // 在云存储的路径 cloudPath: tempFiles.name, // 要上传的文件路径 filePath: tempFiles.path, }).then(res => { console.log("上传成功", res) }).catch(err => { console.log("上传失败", err) }) }
7.4、文件下载
downloadfile(){ wx.cloud.downloadFile({ fileID:"cloud://ruoye-3gpfdl7g7c323196.7275-ruoye-3gpfdl7g7c323196-1306454473/ruoye/1555296384.jpeg" }) .then(res=>{ console.log("下载成功",res) }) .catch(err=>{ console.log("下载失败",err) }) }
pc端无法查看,要在移动端进行查看
7.5、打开下载的文件
下载文件
downloadfile() { wx.cloud.downloadFile({ fileID: "cloud://ruoye-3gpfdl7g7c323196.7275-ruoye-3gpfdl7g7c323196-1306454473/1_Java就业急训营2.0.pdf" }) .then(res => { console.log("下载成功", res) this.openfile(res.tempFilePath) }) .catch(err => { console.log("下载失败", err) }) },
打开文件
openfile(path){ wx.openDocument({ filePath: path }) .then(res => { console.log("打开成功", res) }) .catch(err => { console.log("打开失败", err) }) }
这篇关于微信小程序云开发的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-13微信小程序如何封装接口域名?-icode9专业技术文章分享
- 2024-11-13如何在微信小程序中实现直传功能?-icode9专业技术文章分享
- 2024-11-13如何在小程序的地图组件中添加标记和文字?-icode9专业技术文章分享
- 2024-11-13在微信小程序的地图组件中如何实现自定义标记和气泡?-icode9专业技术文章分享
- 2024-11-01微信小程序教程:零基础入门到实战
- 2024-11-01微信小程序全栈教程:从入门到实践
- 2024-10-31微信小程序怎么实现关注公众号功能-icode9专业技术文章分享
- 2024-10-30微信小程序cover-view,支持bindtap吗-icode9专业技术文章分享
- 2024-10-30微信小程序的cover-image支持bindtap吗-icode9专业技术文章分享
- 2024-10-30微信小程序web-view怎么设置高度?-icode9专业技术文章分享