关于微信小程序云开发以及云开发实例展示

这篇具有很好参考价值的文章主要介绍了关于微信小程序云开发以及云开发实例展示。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文分享给使用微信云开发的同学

序言

首先,云开发是一种趋势,因为跨平台解决方案可以提高开发效率,减少开发成本。使用云开发,开发者无需关注服务器、网络和数据库等底层技术,可以专注于业务逻辑的开发,从而减少了开发和运维方面的投入。

云开发的优势

云开发的最大优点之一是架构的高度灵活性。云开发架构可以随着业务需求的变化而快速地适配和扩容,适用于各种规模的企业。其次,云开发的环境部署十分简单快速,企业只需要在云平台上构建自己的应用即可,省去了基础设施的架构和维护环节。此外,云开发还提供了高效、安全、可靠的数据存储和管理服务,支持多种类型的数据库和数据分析和挖掘功能,帮助企业实时洞察业务趋势。这一切可以使得企业在应付日益激烈的市场竞争时,更加快速、灵活地响应变化。

一、小程序云开发的组成

小程序云开发由四部分组成

  1. 云数据库
  2. 云函数
  3. 云存储
  4. 云托管

所有云开发开始之间都要创建云环境, 本文介绍云数据库和云函数, 下面就从创建云环境开始讲解。

二、创建云环境

  1. 打开微信开发者工具,选择要创建云环境的小程序,点击微信开发者工具中的云开发按钮.如下图
    关于微信小程序云开发以及云开发实例展示
  2. 打开云开发之后,会弹出创建云环境窗口,创建云环境之后进入云开发控制台,注意:新用户使用云环境会有一个月的免费体验哦!不要浪费啦
    关于微信小程序云开发以及云开发实例展示
  3. 创建成功, 进入到下图的界面你的云环境就创建成功了
    关于微信小程序云开发以及云开发实例展示

三、云数据库

云数据库提供高性能的数据库写入和查询服务。可以在云函数中读写数据,还可以通过云开发控制台对数据进行可视化的增、删、查、改等操作。微信小程序云开发所使用的数据库本质上就是一MongoDB数据库。MongoDB数据库是介于关系数据库和非关系数据库之间的产品:是非关系数据库中功能最丰富、最像关系数据库的。
数据库:默认情况下,云开发的函数可以使用当前环境对应的数据库。可以根据需要使用不同的数据库。对应MySQL中的数据库。
集合:数据库中多个记录的集合。对应MySQL中的表。
文档:数据库中的一条记录。对应MySQL中的行。
字段:数据库中特定记录的值。对应MySQL中的列。

3.1 创建集合, 在集合名称位置填写你要创建的集合名称并点击确定即可创建成功

创建集合对应Mysql中的就是创建表

关于微信小程序云开发以及云开发实例展示

3.2 向集合中添加记录

关于微信小程序云开发以及云开发实例展示

3.2.1 默认模式添加

默认模式可以可视化的添加记录

① 选择默认模式
② 文档ID也就是Mysql表中记录的ID, 在这个地方你可以自己手动编辑也可使由系统自动生成
③ 字段等同于Mysql中的表字段
④ 为字段对应的值的数据类型
⑤ 字段对应的值
⑥ 点击确定新增记录

关于微信小程序云开发以及云开发实例展示

3.2.2 JSON模式添加

JSON模式直接填入JSON格式的数据记录即可,

① 选择JSON模式
② JSON数据的ID对应默认模式中的ID,也可以不填写,不填写时自动生成。
③ 字段和对应的数值
④ 点击确定新增记录
关于微信小程序云开发以及云开发实例展示

3.3 编辑集合中的记录

① 在列表中选中你要修改的某条记录
② 点击编辑按钮进行编辑即可
关于微信小程序云开发以及云开发实例展示

3.4 删除集合中的记录

① 右键选中你要删除的记录
② 点击删除并点击确定即可删除
关于微信小程序云开发以及云开发实例展示

四、云函数

云函数云开发为企业和开发者们提供的无服务器执行环境,可以在无需购买和管理服务器的情况下运行代码。只需使用平台支持的语言编写核心代码并设置代码运行的条件,即可使用

本文将讲解代码端部署云函数

4.1 创建云函数

① 右键文件夹中的cloudfunctions文件加
② 点击新建Node.js云函数
③ 在框内输入你要编写的云函数名称
④ 云函数代码编辑完成后右键选择你的云函数选择上传代码(云端安装依赖)
关于微信小程序云开发以及云开发实例展示

关于微信小程序云开发以及云开发实例展示
关于微信小程序云开发以及云开发实例展示

4.2 使用云函数

在你要调用云函数的位置输入一下代码调用已上传的云函数,并处理相应的逻辑

 wx.cloud.callFunction({
      name: '云函数名称',
      success: (res) => {
        console.log(res)
      }
    })

五、云开发实例—小程序实战

5.1 项目介绍

本项目是一个垃圾分类项目,利用图像识别技术、语音识别技术以及小程序云开发技术实现。主要页面为以下三个页面, 主要是使用云函数的位置是搜索页面

关于微信小程序云开发以及云开发实例展示关于微信小程序云开发以及云开发实例展示关于微信小程序云开发以及云开发实例展示

5.2 创建项目,创建云环境, 创建并导入垃圾分类数据集

关于微信小程序云开发以及云开发实例展示

关于微信小程序云开发以及云开发实例展示
关于微信小程序云开发以及云开发实例展示
关于微信小程序云开发以及云开发实例展示
关于微信小程序云开发以及云开发实例展示

5.3 创建及调用云函数代码

本项目用到多个云函数, 这里仅列举两个

① 热门搜索列表

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const db = cloud.database()
  try {
    return await db.collection('trash').orderBy('click_times', 'desc').limit(20).get()
  } catch (e) {
    console.error(e)
  }
}
  return new Promise(function (resolve, reject) {
    wx.cloud.callFunction({
      name: 'getHotItems',
      success: resolve,
      fail: reject
    })
  })

② 内容搜索列表

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()
exports.main = async (event, context) => {
  const db = cloud.database()
  try {
    return await db.collection('trash').where({
      name: db.RegExp
        ({
          regexp: event._txt,
          //从搜索栏中获取的value作为规则进行匹配。
          options: 'i'
          //大小写不区分
        })}).get()
  } catch (e) {
    console.error(e)
  }
}
  return new Promise(function (resolve, reject) {
    wx.cloud.callFunction({
      name: 'search',
      data: {
        _txt: that.data.inputTxt
      },
     success: resolve,
     fail: reject
    })
  })

5.4 项目上线—小程序体验

有兴趣的朋友可以到小程序中感受下云开发的魅力文章来源地址https://www.toymoban.com/news/detail-504498.html

到了这里,关于关于微信小程序云开发以及云开发实例展示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 什么是云开发?小程序实例超详细演示~

    学习视频 : 八分钟读懂云开发_哔哩哔哩_bilibili 小姐姐带你30分钟创建并上线小程序项目【云开发实战】_哔哩哔哩_bilibili 参考资料 : 微信开放文档 (qq.com) 云开发_百度百科 (baidu.com) 推荐阅读 : 云原生推动全云开发与实践 - 知乎 (zhihu.com) 云开发 - 腾讯云 (tencent.com) 项目源码

    2024年02月09日
    浏览(37)
  • vue实现微信小程序,代码实例以及如何调试

    要调试 Vue 实现的微信小程序,您需要使用微信开发者工具进行调试。以下是一个简单的 Vue 实现的微信小程序的代码示例,以及如何使用微信开发者工具进行调试的步骤。 要调试代码,请按照以下步骤操作: a. 在微信开发者工具中,选择“开发”选项卡。 b. 在“开发”选项

    2024年02月11日
    浏览(28)
  • uniapp中开发小程序使用ref获取dom实例,一直显示undefined,竟然发现是这个原因!

    小程序是不能使用getElementById之类的dom api,所以考虑使用ref来获取dom元素,但事实上并不是如此,绑定ref后并没有输出我想要的dom元素。 既然console.log(this.$refs.iRef)为undefined,会不会this.$refs也是undefined?然而this.$refs是有值的,就是没有iRef,那么到底是为什么? 会不会是需要

    2024年02月11日
    浏览(32)
  • 微信小程序关于wxs语法、以及能否引入js中的方法(不能调用)

    页面中使用wxs 或者  参考:WXS | 微信开放文档 wxs能引入外部js文件吗 | 微信开放社区 微信小程序中的WXS语法 1、WXS 中不支持let和const,不支持箭头函数。 2、变量命名必须符合下面两个规则: 首字符必须是:字母(a-zA-Z),下划线(_) 剩余字符可以是:字母(a-zA-Z),下划

    2024年02月06日
    浏览(48)
  • 关于微信小程序的基础开发与创建

    开发环境搭建 工具下载 微信web开发者工具 推荐下载稳定版,并根据自己的电脑选择下载对应的版本进行安装 注册账号 微信公众平台 点击小程序图标,注册小程序开发者账号 创建第一个实验项目 小程序后台 完成注册后,即可登陆小程序后台,在自己的小程序后台对小程序

    2024年02月02日
    浏览(55)
  • 基于微信小程序的作品集展示的设计与开发(源码+lw+部署文档+讲解等)

    💗 博主介绍 :✌新人博主,工作经验两年+、专注于Java、小程序技术领域和毕业项目实战✌💗 🌟文末获取源码+数据库🌟 感兴趣的可以先收藏起来,还有大家在毕设选题,项目以及论文编写等相关问题都可以给我留言咨询,希望帮助更多的人 基于微信小程序的作品集展示平

    2024年02月04日
    浏览(39)
  • 微信小程序-关于新版隐私协议接口wx.onNeedPrivacyAuthorization的适配解读以及实现代码

    代码插件已集成,即插即用, 五分钟集成进项目, 免费下载 ,欢迎大家交流  微信小程序用户隐私保护协议弹窗插件下载 官方公告地址:关于小程序隐私保护指引设置的公告 | 微信开放社区 1、首先看一下这个网址,里边包含涉及到的隐私的接口,这些接口都要适配一下,否则将会

    2024年02月10日
    浏览(40)
  • 【微信小程序】博客小程序,静态版本(三)设计和开发首页、个人关于页

    【微信小程序】博客小程序,静态版本(一)准备工作 【微信小程序】博客小程序,静态版本(二)引入 lin-ui 组件、设计和开发文章页 【微信小程序】博客小程序,静态版本(三)设计和开发首页、个人关于页 李老板又来催更了,万般 “求求” 我之下,继续开始开发。

    2024年02月10日
    浏览(39)
  • 微信小程序-关于新版隐私协议接口wx.onNeedPrivacyAuthorization getPrivacySetting requirePrivacyAuthorize的适配解读以及实现代码

    代码插件已集成,即插即用, 五分钟集成进项目, 免费下载 ,欢迎大家交流  微信小程序用户隐私保护协议弹窗插件下载 官方公告地址:关于小程序隐私保护指引设置的公告 | 微信开放社区 1、首先看一下这个网址,里边包含涉及到的隐私的接口,这些接口都要适配一下,否则将会

    2024年02月10日
    浏览(32)
  • 关于微信小程序原生组件与uniApp混合开发过程遇到的问题与解决方式

    前言: 在实际开发过程中,尤其是小程序的开发,我们常常会遇到一些在文档中解决不了的问题,在这里,我就浅谈一下我遇到的一些问题 1.小程序的构建框架是uni-app,却突然被要求用原生的微信小程序代码来开发,到最后要整合到uni-app里面 这个整合问题,uni-app官网就有

    2024年02月05日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包