前端云原生之微信小程序云服务配置指南

 更新时间:2022年05月23日 10:59:11   作者:几何心凉  
前端边界又拓宽,走进火热的云原生云开发赛道,随着云原生时代的到来,各大厂纷纷上云,下面这篇文章主要给大家介绍了关于前端云原生之微信小程序云服务配置的相关资料,需要的朋友可以参考下

前言

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

创建使用云开发项目

  • 将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

设置增强编译

开启多账号调试

选择数量

确定后可以登录进行聊天

总结

到此这篇关于前端云原生之微信小程序云服务配置指南的文章就介绍到这了,更多相关微信小程序云服务配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 30个高逼格代码的JavaScript高级单行代码

    30个高逼格代码的JavaScript高级单行代码

    这篇文章中列出了一个系列的 30 个 JavaScript 单行代码,它们在使用 vanilla js(≥ ES6)进行开发时非常有用,它们也是使用该语言在最新版本中为我们提供的所有功能来解决问题的优雅方式,将它们分为以下5大类:日期、字符串、数字、数组、工具
    2023-08-08
  • webpack loader使用的安装配置

    webpack loader使用的安装配置

    这篇文章主要为大家介绍了webpack loader使用的安装配置详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • 利用ThreeJS实现孔明灯效果

    利用ThreeJS实现孔明灯效果

    这篇文章主要为大家详细介绍了如何利用Three.js实现3D圣诞节孔明灯效果,文中的示例代码讲解详细,感兴趣的小伙伴可以动手尝试一下
    2022-12-12
  • 微信小程序实现倒计时

    微信小程序实现倒计时

    这篇文章主要为大家详细介绍了微信小程序实现倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • webpack学习教程之publicPath路径问题详解

    webpack学习教程之publicPath路径问题详解

    这篇文章主要给大家介绍了webpack学习教程之publicPath路径问题的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-06-06
  • JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)

    JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)

    这篇文章主要介绍了JS实用技巧,包括常见的js屏蔽错误、div滚动条设置以及背景图片位置等,代码简洁易懂,非常实用,需要的朋友可以参考下
    2016-06-06
  • swtich/if...else的替代语句

    swtich/if...else的替代语句

    这篇文章主要介绍了swtich/if...else的替代语句的相关资料,需要的朋友可以参考下
    2015-08-08
  • js神秘的电报密码 哈弗曼编码实现

    js神秘的电报密码 哈弗曼编码实现

    这篇文章主要介绍了js神秘的电报密码 哈弗曼编码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • ES6解构赋值(数组,对象,函数)使用详解

    ES6解构赋值(数组,对象,函数)使用详解

    这篇文章主要介绍了ES6解构赋值(数组,对象,函数)使用详解,JavaScript 中最常用的两种数据结构是 Object 和 Array,解构操作对那些具有很多参数和默认值等的函数也很奏效,本文通过实例代码详细讲解需要的朋友可以参考下
    2022-11-11
  • 那些精彩的JavaScript代码片段

    那些精彩的JavaScript代码片段

    这篇文章主要为大家分享了一些精彩的JavaScript代码片段,大家喜欢的收藏一下
    2017-01-01

最新评论