微信小程序基础 - 19 （登录后用户头像的更新）

上传更新头像的业务流程：

1.客户端点击头像选择头像图片

wx.chooseImage()

2.将头像图片上传到服务器, 并且获取访问该头像图片的网络路径.

3.将该网络路径, 与当前用户绑定在一起存入数据库

4.在下次登录时, 获取到最新的头像路径, 就可以看到新头像了

云开发-云存储

云存储相当于网络云盘, 可以将本地文件上传存入云存储, 也可以在需要的时候从云存储空间将文件下载到本地.

通过小程序提供的API实现图片上传

wx.cloud.uploadFile()

云开发-云函数

云函数是在小程序端定义, 部署到云端, 在云端执行的函数. 可以将云函数当做是nodejs接口进行调用, 流程:

小程序使用相关API调用一个已经部署了的云函数.
执行相应云函数代码, 返回结果.
小程序端接收云函数返回的结果, 执行后续业务.

例如：编写一个云函数，部署到云服务器，在小程序端调用.

编写一个云函数

右键cloudFunctions, 选择新建Nodejs云函数即可. (起个云函数名)
部署到云服务器

右键云函数文件夹, 选择上传并部署(云端安装依赖).
在小程序端调用

wx.cloud.callFunction()

// pages/me/me.js
const db = wx.cloud.database({env: '......',
})Page({data: {nickname: '点击登录',avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',islogin: false},//点击头像，选择图片，更新头像路径到数据库tapAvatar() {if (!this.data.islogin) {return}wx.chooseImage({count: 1,success: (res) => {console.log(res)let temPath = res.tempFilePaths[0]this.setData({avatar: temPath})//将图片存到服务器（云存储）、更新到数据库中this.uploadFile(temPath)}})},//上传文件uploadFile(temPath) {//根据temPath，生成一个随机的图片名称，用于设置云端存储路径let ext = temPath.substring(temPath.lastIndexOf('.'))let cloudPath = 'img_' + Math.random() + extwx.cloud.uploadFile({filePath: temPath,cloudPath: cloudPath,success: (res) => {console.log(res)let fileId = res.fileIDthis.updateAvatar(fileId) //更新当前用户头像路径}})},//更新云数据库中，当前用户的头像路径updateAvatar(fileId) {//云函数，获取openidwx.cloud.callFunction({name: 'sum',data: {a: 1,b: 1}}).then(res => {console.log(res)let openid = res.result.openiddb.collection('users').where({_openid:openid}).update({data:{avatarUrl:fileId}}).then(res=>{console.log(res)}).catch(err=>{console.warn(err)})})   },
})

// 云函数入口文件   cloudfunctions/sum/index.js
const cloud = require('wx-server-sdk')cloud.init()// 云函数入口函数
exports.main = async (event, context) => {const wxContext = cloud.getWXContext()return {event,openid: wxContext.OPENID,appid: wxContext.APPID,unionid: wxContext.UNIONID,}
}

微信小程序基础 - 19 （登录后用户头像的更新）相关推荐

微信小程序手机号一键登录--获取用户手机号--微信小程序一键登录
前提:现在微信小程序登录我参考了几个大的公司的登录,基本分下面几种 1.微信用户一键登录,授权用户基本信息,不获取手机号 2.微信手机号一键登录,根据手机号去关联在其他平台数据,用手机号关联.然后再调 ...
微信小程序发布新版本，部分用户不能自动更新，需要删除小程序，重新搜索进入才能更新，老用户该怎么解决？
首先去官方文档了解了一下, 然后呢发现出现的弹窗会有延迟,为了解决这个问题,东拼西凑了一下 autoUpdate: function() {var self = this// 获取小程序更新机制兼容i ...
微信小程序如何获取高清用户头像
调用 wx.getUserInfo() 接口获取的用户头像地址类似: https://wx.qlogo.cn/mmopen/vi_32/IR5xyTwib2ichpKaCsVv3FLia8t0TF1h ...
微信小程序页面分享出去后用户无法通过分享页面返回首页bug解决方法
自定义Navigation | 微信开放文档本质就是设置一个变量isshare来判断是否是分享页面中进入的页面js-data中设置 isshare: 0,//不是分享页面进入 onShareApp ...
微信小程序的安全登录
一.微信小程序的安全登录让用户登录,标识用户和获取用户信息,以用户为核心提供服务,是大部分小程序都会做的事情.我们今天就来了解下在小程序中,如何做用户登录,以及如何去维护这个登录后的会话(Sessi ...
微信小程序--基础内容（详解）（一）
一.常用标签 1.view 标签 view 标签是一个块级元素,类似于 div(小程序里面没有div标签),里面可以放任何内容或者插值表达式,如下所示: <view>这是view标签< ...
小程序用户头像昵称获取规则调整公告及微信小程序基础库的问题
更新时间:2022年11月9日由于 PC/macOS 平台「头像昵称填写能力」存在兼容性问题,对于来自低于2.27.1版本的访问,小程序通过 wx.getUserProfile 接口将正常返回用户头 ...
微信小程序学习9：获取用户信息进行登录操作 wx.getUserProfile
微信小程序学习9:获取用户信息进行登录操作wx.getUserProfile 2021年4月份左右微信对获取用户的API进行了更改.使用wx.getUserInfo只能获取用户的匿名信息. 要获取用户 ...
微信小程序如何进行登录授权和获取用户信息
微信小程序如何进行登录授权和获取用户信息

微信小程序基础 - 19 （登录后用户头像的更新）

云开发-云存储

云开发-云函数

微信小程序基础 - 19 （登录后用户头像的更新）相关推荐

最新文章

热门文章

微信小程序 基础 - 19 （登录后用户头像的更新）

云开发-云存储

云开发-云函数

微信小程序 基础 - 19 （登录后用户头像的更新）相关推荐

最新文章

热门文章

微信小程序基础 - 19 （登录后用户头像的更新）

微信小程序基础 - 19 （登录后用户头像的更新）相关推荐