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

前言

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

创建使用云开发项目

在这里插入图片描述

  • 将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全场面试官
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

评论 152 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:鲸 设计师:meimeiellie 返回首页

打赏作者

几何心凉

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值