微信小程序-云开发3云函数、云存储

文章目录

什么是云函数
初始化云函数
编写云函数
- 云函数获取数据
- - 云函数获取open-id
  - 云函数获取数据
  - 云函数获取数据和数据库调用数据的对比
- 数据库数据批量导入或导出
- 云函数修改数据
- 云函数删除数据
- 传递参数到云函数
云存储
- 云存储图片
- - 文件上传
  - 使用图片
  - - 上传图片
    - 给列表添加图片

本文为视频笔记，接上一篇https://blog.csdn.net/weixin_44544406/article/details/124009425，视频为编程小石头云开发教程。

什么是云函数

云函数是一段运行在云端的代码，无需管理服务器，在开发工具内编写、一键上传部署即可运行后端代码。

小程序内提供了专门用于云函数调用的 API。开发者可以在云函数内使用 wx-server-sdk 提供的 getWXContext 方法获取到每次调用的上下文（appid、openid 等），无需维护复杂的鉴权机制，即可获取天然可信任的用户登录态（openid）。

初始化云函数

1、创建一个文件夹cloud与pages平行
2、在project.json配置云函数

编写云函数

云函数获取数据

云函数获取open-id

1、传统写法

2、用promise方法写then和catch

云函数获取数据

云函数只要有变动，就要重新部署，否则云函数不生效
在cloud文件夹下创建getData的云函数文件
getData-index.js
在云函数里指定使用哪个云环境

// 云函数入口文件
const cloud = require('wx-server-sdk')wx.cloud.init({env:'cloud1-0gk6wlxu714dbe3e'//云开发环境id})// 云函数入口函数
exports.main = async (event, context) => {return cloud.database().collection('goods').get()
}

或者
提倡第二种

// 云函数入口文件
const cloud = require('wx-server-sdk')wx.cloud.init({env:cloud.DYNAMIC_CURRENT_ENV//云开发环境id})// 云函数入口函数
exports.main = async (event, context) => {return cloud.database().collection('goods').get()
}

云函数获取数据和数据库调用数据的对比

Page({onLoad(){//云函数的调用wx.cloud.callFunction({name:'getData'}).then(res=>{console.log('成功',res)this.setData({openid:res.result.openid})}).catch(res=>{console.log('失败',res)})//数据库调用wx.cloud.database().collection('goods').get().then(res=>{console.log('成功',res)}).catch(res=>{console.log('失败',res)})}})

数据库数据批量导入或导出

导出(比如导出将数据为json）

导入

云函数能展示100条数据，而数据库本地操作只能返回20条

云函数修改数据

本地小程序直接调用数据库修改会有问题
只能修改自己创建的数据，别人创建的数据没有办法修改
如何解决这个问题，可以用云函数解决
cloud文件夹下新建update

// 云函数入口文件
const cloud = require('wx-server-sdk')wx.cloud.init({env:cloud.DYNAMIC_CURRENT_ENV//云开发环境id})// 云函数入口函数
exports.main = async (event, context) => {return cloud.database().collection('goods').doc(id).update({data:{price:event.price}})}

在调用云函数界面

//调用云函数更新商品价格
update(){wx.cloud.callFunction({name:'update'//云函数文件名data:{id:id,price:parseInt(price)}
})
.then(res=>{console.log('调用云函数成功',res)
this.gedetail()//再更新一下数据
})
.catch(res=>{console.log('调用云函数失败',res)
})
}

云函数删除数据

云函数文件

// 云函数入口文件
const cloud = require('wx-server-sdk')wx.cloud.init({env:cloud.DYNAMIC_CURRENT_ENV//云开发环境id})// 云函数入口函数
exports.main = async (event, context) => {return cloud.database().collection('goods').doc(event.id).remove()}

在调用云函数界面

//调用云函数更新商品价格
shanchu(){wx.cloud.callFunction({name:'update'//云函数文件名data:{id:id}
})
.then(res=>{console.log('删除成功',res)
this.gedetail()//再更新一下数据
})
.catch(res=>{console.log('删除失败',res)
})
}
else if(res.cancel==true){console.log('用户点击了取消')
}

传递参数到云函数

云函数文件

// 云函数入口文件
const cloud = require('wx-server-sdk')wx.cloud.init({env:cloud.DYNAMIC_CURRENT_ENV//云开发环境id})// 云函数入口函数
exports.main = async (event, context) => {return event.a+event.b}

在调用云函数界面

//调用云函数做加法
onLoad(){wx.cloud.callFunction({name:'add'//云函数文件名data:{a:1,b:1}
})
.then(res=>{console.log('加法成功',res)
this.gedetail()//再更新一下数据
})
.catch(res=>{console.log('加法失败',res)
})
}

云存储

云存储图片

文件上传

1、点击云开发-存储
2、上传或者拖拽图片
3、点击文件名称

使用图片

上传图片

参考微信官方文档
上传文件 https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html
wx.chooseImage(Object object)
上传文件到云存储空间
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/storage/uploadFile/client.uploadFile.html
wx.cloud.uploadFile

新建文件夹yuncunchu
yuncunchu.js

// pages/yuncunchu/yuncunchu.js
Page({//上传图片第一步，选择图片choose(){let that=thiswx.chooseImage({count: 1,//可以选择多少图片sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],//设置图片来源success (res) {// tempFilePath可以作为img标签的src属性显示图片const tempFilePaths = res.tempFilePathsthat.uploadimg(res.tempFilePaths[0])}})},//上传图片的第二步：直接上传到云存储uploadimg(temFile){wx.cloud.uploadFile({cloudPath: 'example.png',filePath: temFile, // 文件路径}).then(res => {// get resource IDconsole.log('上传成功')console.log(res.fileID)}).catch(error => {// handle errorconsole.log('上传失败')})}
})

yuncunchu.wxml

<button biandtap="choose">选择图片</button>

给列表添加图片

把图片拖拽到云存储上面，要新建数据，添加字段img

demo.js

Page({onLoad(){wx.cloud.database().collection('goods').get().then(res=>{console.log('请求成功',res)}).catch(res=>{console.log('请求失败',res)})}
})

demo.wxml

 <view class="list" wx:for="{{list}}"><view style="display:flex"><image  class="img" src="{{item.img}}"></image><view class="txt">{{item.namem}}</view></view></view>