派大星

vuePress-theme-reco 派大星    2021 - 2022
派大星 派大星
主页
博客
  • 前端
  • JavaScript文章
  • 三级目录
  • 笔记
  • 学习笔记
  • 页面
  • CSS
  • HTML
  • 技术
  • 技术文档
  • GitHub技巧
  • 技术笔记
  • 实用工具
  • Nodejs
  • 博客搭建
  • 更多
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • JavaScript
  • 浏览器&网络
  • 前端框架
  • 资源工具
  • 持续集成
  • 小程序
  • 杂谈
  • React
  • Mysql
  • 面试题
  • uniapp
  • 《ES6 教程》笔记
  • 《Git》学习笔记
  • 《JavaScript教程》笔记
  • 《React》笔记
  • 核心概念
  • 高级指引
  • Hook
  • 案例演示
  • 《TypeScript 从零实现 axios》
  • 初识 TypeScript
  • TypeScript 常用语法
  • ts-axios 项目初始化
  • ts-axios 基础功能实现
  • ts-axios 异常情况处理
  • ts-axios 接口扩展
  • ts-axios 拦截器实现
  • ts-axios 配置化实现
  • ts-axios 取消功能实现
  • ts-axios 更多功能实现
  • ts-axios 单元测试
  • ts-axios 部署与发布
  • 《Vue》笔记
  • 基础
  • 组件
  • 过渡&动画
  • 工具
  • 规模化
  • 可复用性&组合
  • 其他
  • Vuex
标签
时间轴
关于
author-avatar

派大星

272

文章

69

标签

主页
博客
  • 前端
  • JavaScript文章
  • 三级目录
  • 笔记
  • 学习笔记
  • 页面
  • CSS
  • HTML
  • 技术
  • 技术文档
  • GitHub技巧
  • 技术笔记
  • 实用工具
  • Nodejs
  • 博客搭建
  • 更多
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • JavaScript
  • 浏览器&网络
  • 前端框架
  • 资源工具
  • 持续集成
  • 小程序
  • 杂谈
  • React
  • Mysql
  • 面试题
  • uniapp
  • 《ES6 教程》笔记
  • 《Git》学习笔记
  • 《JavaScript教程》笔记
  • 《React》笔记
  • 核心概念
  • 高级指引
  • Hook
  • 案例演示
  • 《TypeScript 从零实现 axios》
  • 初识 TypeScript
  • TypeScript 常用语法
  • ts-axios 项目初始化
  • ts-axios 基础功能实现
  • ts-axios 异常情况处理
  • ts-axios 接口扩展
  • ts-axios 拦截器实现
  • ts-axios 配置化实现
  • ts-axios 取消功能实现
  • ts-axios 更多功能实现
  • ts-axios 单元测试
  • ts-axios 部署与发布
  • 《Vue》笔记
  • 基础
  • 组件
  • 过渡&动画
  • 工具
  • 规模化
  • 可复用性&组合
  • 其他
  • Vuex
标签
时间轴
关于

微信小程序实现微信登录以及云存储和云函数的使用

vuePress-theme-reco 派大星    2021 - 2022

微信小程序实现微信登录以及云存储和云函数的使用

派大星 2021-12-15 微信小程序

# 微信小程序实现微信登录

# 微信小程序提供了wx.getUserProfile()方法实现获取微信用户信息

wx.getUserProfile({
    desc:'告诉用户为何需要用户信息', //字符串不能超出限制 不然会报错
    success:(res)=>{
        //获取结果
        console.log(res)
    }
})

# 实现步骤:

# 1.为test绑定tap事件,在时间处理函数中调用该方法获取用户信息。

# 2.获取用户信息后,更新界面。

# 微信登录业务流程

用户通过微信提供的API执行登录业务,获取昵称和头像等用户信息。

一定要将用户信息存入自己家的数据库中。(mysql,云数据库)

id nickName avatarUrl
1 yuanwei https://xxxxxx
# 这样未来才可以对自己家的数据库中的用户信息进行管理(删、改、查)

# 实现步骤

# 1.创建一个新的云数据集合:users,用于存储用户信息

# 2.当微信登录成功后,执行”注册业务“,将用户信息存入到users集合中。

# 3.当下次登录时,提供了权限后,去自己家users集合中找一找有没有当前用户信息:

# 1.如果有,则直接获取最新信息,更新界面。
# 2.如果没有则想users集合中新增用户

# 实现修改头像功能

# 简易版实现流程
# 1.点击头像后,跳转到新的页面选择新头像图片。
wx.chooseImage()
# 2.选择完毕后,点击确定,获取选中的头像图片路径,更新界面。

# 标准版实现方式

想要随时可以看到以前修改过的头像,就必须将新头像存入数据库中,所以需要去一个可以随时访问的外链地址,将该地址存放到数据库才可以

# 1.将选择的图片上传到云存储空间,并获取访问地址。
# 2.将访问地址更新到云数据库中。userInfo.avatarUrl
# 3.下次登录时,直接访问users集合,拿到的路径就是最新的云存储头像路径,这样就可以访问到新头像了。

# 云存储

云开发提供了一块存储空间,提供了上传文件到云端、带权限管理的云端下载能力,开发者可以在小程序和云函数端通过API使用云存储功能

在小程序端可以分别调用wx.cloud.uploadFile和wx.cloud.downloadFile完成上传和下载文件的操作。

下面简单的几行代码,即可以实现小程序内让用户选择一张图片,然后上传到云端管理的功能:

wx.cloud.uploadFile({
    filePath:"本地文件路径",
    cloudPath:"云端文件路径(注意防止命名重复)",
    success:(res)=>{
        //...返回上传结果:包含访问地址
        console.log(res)
    }
    
})

# 云函数

云函数是一段运行在云端的代码,无需要管理,在开发工具内编译、一键上传即可以运行的后端代码。

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

# 使用云函数

# 1.在小程序开发工具中cloudFunction目录下,新建云函数。右键cloudFunction,设置云函数名称

# 2.编写云函数代码。

# 3.在小程序开发工具中一键部署云端。右键云函数文件夹,选择上传并部署:云端安装依赖。

# 4.在小程序端(使用wx.cloud.callFunction())进行云函数的调用。