前端云原生——微信小程序云服务配置

前端同样涉及云原生

    • 前言
    • 创建使用云开发项目
    • 搭建云环境
    • 测试云服务
      • 1. 获取openid(上传本地login云函数)
        • 1.1 创建部署login文件时报错
      • 2. 自定义sum函数并创建部署
      • 3. 上传图片
      • 4. 前端操作数据库
      • 5. 即时通信demo
  • 面试法宝

欢迎各位小伙伴们!
为大家推荐一款刷题神奇哦 点击链接访问牛客网
各大互联网大厂面试真题。从基础到入阶乃至原理刨析类面试题 应有尽有,赶快来装备自己吧!助你面试稳操胜券,solo全场面试官

前言

如今云原生已经非常火热,很多伙伴说我们前端领域涉及到云原生么?当然了!今天就来为大家介绍我们最直白的涉及到的云原生,就是我们微信小程序开发中的云函数云存储

创建使用云开发项目

在这里插入图片描述

  • 将AppID填入
  • 选择小程序云开发 创建即可
  • 成功后会为我们呈现一个实例
    在这里插入图片描述
  • 刚刚创建的云服务项目中 测试器中有以下错误
    在这里插入图片描述

搭建云环境

  • 点击上面的云开发 开通云开发
    在这里插入图片描述
  • 开始创建环境
    在这里插入图片描述
  • 环境名称自定义
  • 点击确定等待30秒
  • 搭建成功
    在这里插入图片描述
  • 成功后不能立即使用前面的错误仍然存在
  • 等待10分钟即可使用
  • 错误消失后 我们连接当前环境(选择我们刚刚配置的demo1)
    在这里插入图片描述

测试云服务

1. 获取openid(上传本地login云函数)

在这里插入图片描述

  • 点击获取openid 第一次点击时会报错
    在这里插入图片描述
  • 右键login文件夹 创建并部署
    在这里插入图片描述
    在这里插入图片描述
  • 成功后在云开发/云函数中可以看到
    在这里插入图片描述
  • 再次查看openid就可以看到了

1.1 创建部署login文件时报错

在这里插入图片描述

  • 可以通过自己在云函数中创建一个login
    在这里插入图片描述
  • 创建后再次上传进行覆盖即可

2. 自定义sum函数并创建部署

  • 点击新建云函数
    在这里插入图片描述

  • 创建云函数sum
    在这里插入图片描述

  • 云函数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,sum:100}
    }
    
  • 同样将sum进行部署
    在这里插入图片描述

  • 点击测试云函数
    在这里插入图片描述

3. 上传图片

  • 点击上传图片
    在这里插入图片描述
  • 上传成功 直接上传到云端
    在这里插入图片描述
  • 在云开发控制台/储存可以查看图片信息(可以直接使用图片的网络地址)
    在这里插入图片描述

4. 前端操作数据库

  • 打开云开发控制台
  • 创建集合(数据库)
    在这里插入图片描述
  • 为集合添加数据(更新数据 删除数据 查看数据都是相同操作)
    在这里插入图片描述
  • 将上面的注释代码取消注释
  • 点击新增记录
    在这里插入图片描述
  • 就在在集合中添加数据
    在这里插入图片描述
  • 1是系统自己创建id
  • 2是系统自己创建的用户的信息openid
  • 3是代码中的信息

5. 即时通信demo

  • 添加集合名称为chatroom
    在这里插入图片描述
  • 设置增强编译
    在这里插入图片描述
  • 开启多账号调试
    在这里插入图片描述
  • 选择数量
    在这里插入图片描述
  • 确定后可以登录进行聊天

面试法宝

很多伙伴找到我询问面试题,问我针对于前端有没有比较体系化的面试题总结,今天就给大家推荐这款面试法宝
点击链接直达

https://www.nowcoder.com/link/jihexinliang260

就是我们的牛客网,各大互联网大厂面试真题。从基础到入阶乃至原理刨析类面试题 应有尽有,赶快来装备自己吧!助你面试稳操胜券,solo全场面试官
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/248484.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

45天带你玩转Node(第一天)初探Node.js

45天带你玩转Node 粉丝要求博主系统的写一篇关于Node.js的学习资料,但其实我们的Node.js知识点并不少,所以博主为大家搭建了一个专栏,为了方便大家系统的学习Node.js,大家记得订阅哦!虽然我们的Node.js还很年轻&#…

【转载】 安卓版手机微信如何清理微信空间

在手机微信的使用过程中,随着手机微信使用的时间越长,手机微信占用的空间越大,其实手机微信存储了很多聊天记录包括图片、视频等大文件信息,此时如果手机存储空间比较紧张,可以使用微信自带的清理工具对手机微信空间进…

45天带你玩转Node(第二天)走进Node.js

45天带你玩转Node 粉丝要求博主系统的写一篇关于Node.js的学习资料,但其实我们的Node.js知识点并不少,所以博主为大家搭建了一个专栏,为了方便大家系统的学习Node.js,大家记得订阅哦!虽然我们的Node.js还很年轻&#…

深入Vue原理_数据响应式

欢迎各位小伙伴们! 为大家推荐一款刷题神奇哦 点击链接访问牛客网 各大互联网大厂面试真题。从基础到入阶乃至原理刨析类面试题 应有尽有,赶快来装备自己吧!助你面试稳操胜券,solo全场面试官 数据响应式响应式是什么如何实现数据响…

python scipy样条插值函数大全(interpolate里interpld函数)

scipy样条插值 scipy样条插值1、样条插值法是一种以可变样条来作出一条经过一系列点的光滑曲线的数学方法。插值样条是由一些多项式组成的,每一个多项式都是由相邻的两个数据点决定的,这样,任意的两个相邻的多项式以及它们的导数(不包括仇阶导…

EKS独领风骚

前言 随着公司的逐渐发展,开拓了更加多的子项目与小程序,这些都需要进行宣传,但是管理以及部署新的应用是一个繁琐的工程,部署麻烦而且更新业务的时候非常不方面。尤其面向用户的时候,体验感很差。于是想要使用docker…

Linux进程管理之ps的使用

主题Linux进程管理之ps工具的使用 一ps工具的介绍 ps: process state 进程状态ps - report a snapshot of the current processesLinux系统各进程的相关信息均保存在/proc/PID目录下的各文件中 默认显示的内容很少 [rootcentos65 ~]# psPID TTY TIME CMD2018 pts/0 …

openstack Q版部署-----安装报错问题

1、实例开机提示找不到磁盘Booting from Hard Disk... GRUB. 开启 CPU 虚拟化支持。 将计算节点 nova.conf 配置修改如下即可: [libvirt] cpu_mode none virt_type qemu重启服务 systemctl restart libvirtd.service openstack-nova-compute.service 2、错误: 超过…

深入Vue原理_双向数据绑定(视图/数据)

欢迎各位小伙伴们! 为大家推荐一款刷题神奇哦 点击链接访问牛客网 各大互联网大厂面试真题。从基础到入阶乃至原理刨析类面试题 应有尽有,赶快来装备自己吧!助你面试稳操胜券,solo全场面试官 文章目录数据的变化反应到视图命令式操…

大厂直通车【C认证】踵磅来袭

欢迎各位小伙伴们! 首先为大家推荐一款刷题神奇哦 点击链接访问牛客网 各大互联网大厂面试真题。从基础到入阶乃至原理刨析类面试题 应有尽有,赶快来装备自己吧!助你面试稳操胜券,solo全场面试官 你还在以为CSDN仅仅是一个简简单单…

深入Vue原理_全面剖析发布订阅模式

文章目录发布订阅模式优化优化思路思考理解发布订阅模式(自定义事件)收集更新函数触发更新函数6.5 总结总结写在最后本期推荐欢迎各位小伙伴们! 为大家推荐一款刷题神奇哦 点击链接访问牛客网 各大互联网大厂面试真题。从基础到入阶乃至原理刨析类面试题 应有尽有&a…

web前端发展历程

总览前端发展史前言浏览器的发展史走进前端HTMLCSSjavaScript小前端时代大前端时代写在最后前言 目前在IT公司中前端的岗位越来越成为不可或缺的,前端的地位也愈见明显,很多学校已经体系的传授前端课程,众多培训机构也将前端知识作为了主流课…

修改wordpress上传文件大小限制

1. 登陆wordpress使用的数据库,切换到使用的database 2. 操作如下: > select meta_key from wp_sitemeta; > select meta_key,meta_value from wp_sitemeta where meta_keyfileupload_maxk; 修改为20M: > update wp_sitemeta set meta_value204…

php的符号的排序大小

转载于:https://www.cnblogs.com/cjjjj/p/10433334.html

浅谈 HTTP 和 HTTPS

很多前端伙伴问题有没有体系的面试题? 今天为大家推荐一款刷题神奇哦 点击链接访问牛客网 各大互联网大厂面试真题。从基础到入阶乃至原理刨析类面试题 应有尽有,赶快来装备自己吧!助你面试稳操胜券,solo全场面试官 浅谈 HTTP 和 …

Ubuntu 搭建 GitLab 笔记 ***

简介 GitLab 社区版可以提供许多与 GitHub 相同的功能,且部署在属于自己的机器上,我们会因为网络及其他一些问题而不便使用 GitHub ,这时部署一个 GitLab 是最好的选择。 下载 GitLab 并安装 我的环境是 Ubuntu 16.04 下进行部署操作。 GitLa…

在浏览器输入URL到页面展示发生了什么?

输入URL后查询缓存DNS服务器TCP三次握手HTTP协议包浏览器处理HTML文档TCP 和 UDP 的区别写在最后很多前端伙伴问题有没有体系的面试题? 今天为大家推荐一款刷题神奇哦 点击链接访问牛客网 各大互联网大厂面试真题。从基础到入阶乃至原理刨析类面试题 应有尽有&#…

iOS 高级去水印,涂鸦去水印

目前在研究一下图像的处理,看了一下相关的软件,比如:《去水印大师》,究竟去水印是怎么处理的呢?看图分析。 一共是三个功能:快速去水印、高级去水印、涂鸦去水印 快速去水印:暂时没找到好的处理…

Failed to execute goal maven-gpg-plugin 1.5 Sign

问题描述&#xff1a; 解决办法&#xff1a;跳过maven-gpg-plugin <build> <pluginManagement><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-gpg-plugin</artifactId><configuration&g…

一文搞懂this指向

前言 那你说一下 js 中的 this 指向吧&#xff01;这句话已经成为面试官口中的高频面试题&#xff0c;作为前端开发的我们&#xff0c;你真的搞懂了 this 指向了吗&#xff1f;快来跟我一起来查漏补缺吧&#xff01;通过几个小案例让大家更能直白的理解 this 指向。 很多前端伙…