【uni-app】uni-app之云开发uniCloud跨全栈开发笔记总结,包括一个 schema自动生成代码小案例(附详细截图)

1- 前言


本文主要讲解如何使用uni-app 和 uniCloud 云开发,实现小案例,不需要后端,来实现全栈开发。

2- 概念


2.1 什么是uni-app

uni-app 是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。

具体内容可见 uni-app官方网址

2.2 什么是uniCloud

uniCloud 是 DCloud 联合阿里云、腾讯云,为开发者提供的基于 serverless 模式和 js 编程的云开发平台。

具体内容可见 uniCloud官方网址

2.3 uniCloud 的价值

本段摘自官方网址

  • 对于程序员,从此你又get一个新技能,用熟悉的js,轻松搞定前后台整体业务。
  • 对于开发商:
    1. 开发成本大幅下降、开发效率大幅提升、上线和迭代速度大幅提速;
    2. 如果你是新创公司,将无需雇佣php或java等服务器工程师,每年至少节省几十万;
    3. 如果你已拥有掌握php和js的全栈,那么改用新的技术栈,一样可以大幅提升开发效率、降低成本;
    4. 你只需专注于你的业务,其他什么服务器运维、弹性扩容、大并发承载、防DDoS攻击,全都不需要操心;
    5. 除了开发成本,云资源租用成本也将大幅下降
    6. 如果不发布Web版,你将不需要购买备案域名。小程序和App可以免域名使用服务器;

uniCloud为每个开发者提供一个免费服务空间,让你也可以拥有自己的服务器

在这里插入图片描述

3- 快速上手


3.1 创建uniCloud项目

在HBuilderX里新建项目,选择启用uniCloud,可勾选阿里云,点击创建

在这里插入图片描述

3.2 创建和绑定服务空间

  • 一个服务空间对应一整套独立的云开发资源,包括数据库、存储空间、云函数等资源。服务空间之间彼此隔离。

  • 每个服务空间都有一个全局唯一的space ID。

  • 通过 HBuilderX 中管理服务空间,包括新建服务空间和关联服务空间

在 uniCloud 目录右键菜单中创建服务空间

  1. 在uniCloud文件夹后,点击右键,选择关联云服务空间或项目,点击新建,选择关联;

在这里插入图片描述

  1. 然后会跳转,此时我们创建服务空间;

在这里插入图片描述

3.3 云函数

  • 云函数即在云端(服务器端)运行的函数。
  • 从 HBuilderX 3.4起,新增了云函数的扩展版,云对象。
  • 开发者无需购买、搭建服务器,只需编写代码并部署到云端即可在客户端(App/Web/小程序等)调用,同时云函数之间也可互相调用。
  • 一个云函数的写法与一个在本地定义的 JavaScript 方法无异,代码运行在云端 Node.js 中。当云函数被客户端调用时,定义的代码会被放在 Node.js 运行环境中执行。
  1. 在cloudfunctions文件夹,右键单击,新建云函数;

在这里插入图片描述

  1. 目录结构如下;

在这里插入图片描述

  1. 上传并部署

在这里插入图片描述

  1. 云函数编写 (event前端传递data函数,return是返回给前端的数据)

在这里插入图片描述

  1. 页面调用

在这里插入图片描述

3.4 云数据库

uniCloud提供了一个 JSON 格式的文档型数据库。顾名思义,数据库中的每条记录都是一个 JSON 格式的文档。

在这里插入图片描述

  1. 创建云数据库,自己给数据表起个名称;

在这里插入图片描述

  1. 添加记录;

在这里插入图片描述

  1. 添加数据(新增数据)

在这里插入图片描述

  1. 修改表结构

在这里插入图片描述
在这里插入图片描述

  1. 下载表结构

在这里插入图片描述

3.5 前端部分

  1. 安装插件uni-ui,在插件市场搜索导入;

在这里插入图片描述

  1. 渲染页面(展示前端数据)

collection=" " 集合(填入表的数据)

在这里插入图片描述

  1. 运行项目—>连接云函数

在这里插入图片描述

  1. 页面结构

    • index.vue
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值