【uniCloud】云对象的应用与提升

这篇具有很好参考价值的文章主要介绍了【uniCloud】云对象的应用与提升。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uniCloud简介:

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

优势:

从前端程序员的角度来说可以使用熟悉的 JavaScript 代码来轻松搞定后台整体业务,目前阿里云版本的仍可以免费使用,白嫖的事还是需要干一干的。

云对象入门:

云对象的出现使得我们从面向网络接口编程变成了面向对象编程,我们只关心对象的定义和操作,节省了实体类到 JSON 数据的转换,网络接口的编写。在调用的时候我们也只是想往常导入模块一样将这个云对象导入,后续的操作就是常见的对象操作了。

创建云对象的步骤:
1. 使用 HbuilderX 创建 uni-app 项目,并勾选启用uniCloud,注意勾选阿里云版本。
2. 创建云服务空间,需要我们跳转到 web 控制台自行创建:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v3dFZROB-1658392610547)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cf8f066993484b18880a6162d10e9b74~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)]

3. 关联云服务空间,当刷新到刚创建的云服务空间后就可以关联到项目了:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ObuG2nJ5-1658392610547)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ce6fdf6246534cc7ac75b7ffcee1aeb5~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)]

4. 右击项目中uniCloud-aliyun/cloudfunctions目录创建云对象:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Aqb9iNim-1658392610548)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/67c5abfd57c74344bf5463e8dad6b66a~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)]

5. 为新建的 todo 云对象添加一个 add 方法:

代码示例同官方文档

在这个函数中我们接收一个 title 和一个 content 字段,在判断两者均不为空的时候提示创建成功。

module.exports = {
    add(title, content) {
        title = title.trim()
        content = content.trim()
        if (!title || !content) {
            return {
                    errCode: 'INVALID_TODO',
                    errMsg: 'TODO标题或内容不可为空'
            }
        }
        // ...其他逻辑
        return {
            errCode: 0,
            errMsg: '创建成功'
        }
    }
} 
调用云对象的步骤:
1. 编写一个触发 add 的按钮,并在 add 函数中导入云对象“uniCloud.importObject(‘’)”;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WEPQLlQg-1658392610548)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9eb11b2b02ea43cc828377bb61cac810~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)]

2. HBuilderX 自动提示了我们刚才编写的云对象,我们选择即可;
3. 导入 todo 云对象后调用云对象内置的 add 函数,注意云对象函数的执行也属于异步操作;
methods: {
  async add() {
    const todo = uniCloud.importObject('todo');
    const res = await todo.add("php", "天下第一");
    uni.showToast({
      title: res.errMsg
    })
  }
} 
优化一下上面的代码:
  1. 导入云对象的代码只执行一次即可,所以提到外部;
  2. 使用async/await后要及时补充异常处理;
<script>
const todo = uniCloud.importObject('todo');
export default {
    data() {
        return {
                title: 'Hello'
        }
    },
    methods: {
        async add() {
            try {
                const res = await todo.add("php", "天下第一");
                uni.showToast({
                        title: res.errMsg
                })
            } catch (e) {
                uni.showToast({
                        title: '创建失败',
                        content: e.errMsg,
                        showCancel: false
                })
            }
        }
    }
}
</script> 
调试一把:
1. 将 uni-app 项目运行到内置浏览器:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zsFM5F3q-1658392610548)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fbc51872fc0943b583079faae3ffe128~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)]

2. 点击添加后在控制台就看到了发送到云对象的参数和返回的结果了:

注意:这里默认启动勾选的是连接本地云函数,在下面h5 运行控制台中可以切换为云端云函数(部署后切换)。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fP7HMpgR-1658392610548)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e581c92035f24570ac04e394218eaff2~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)]

总结特点:
  1. 使用云对象后逻辑更加清晰,这也是面向对象的一大特点吧;
  2. 代码更加的精简了,去除了以往的一些转换等操作;
  3. 由框架接管了统一的响应体规范,避免了接口联调的烦恼;
  4. HBuilderX 的优秀表现使得编写和调用云对象得到了更好的代码提示。
注意:

目前的云对象是不支持通过 URL 和定时执行的,以往我们开发的一些云函数很多情况需要支持这两种方式的调用,所以这个有所区别,官网显示后续会补充,一起期待吧~

云对象的拦截:

预处理器:

云对象内置了一个特殊的函数_before,它将在我们调用常规函数前优先执行,利用这样的特性,我们可以对云对象内的所有常规函数在执行前进行统一的拦截、鉴权、参数校验等。

后处理器:

另一个与之相对的后处理器函数是_after,我们可以利用后处理器来对响应的结果进行再加工处理。

案例改造:

我们对上面的案例进行改造,添加预/后处理器,记录 add 函数的执行时间,并将这个时间返回到 h5。

module.exports = {
    _before: function() {
        this.startTime = Date.now();
    },
    async add(title, content) {
        await new Promise((resolve) => {
            setTimeout(() => {
                    resolve();
            }, 100)
        })
        return {
            errCode: 0,
            errMsg: '创建成功'
        }
    },
    _after(error, result) {
        if (error) {
            throw error
        }
        result.timeCost = Date.now() - this.startTime
        return result
    }
} 

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-exl9QboA-1658392610549)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5f59cab1cc4844419b4c0366fb4807b0~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)]

云对象的调用:

  1. 客户端调用;
  2. 云函数/云对象内调用;
  3. 跨服务空间调用。

前面的两种方式是一样的,我们已经在客户端调用过两次了,这里我们看一下如何跨服务空间调用。

跨服务卡空间调用:
  1. 客户端均支持阿里云和腾讯云两种方式;
  2. 云端调用仅支持腾讯云;
  3. 跨腾讯云服务空间调用的前提是同账号下。

下面的示例就是切换到指定空间的方式,拿到服务空间对应的对象后的操作是一样的:

const mycloud = uniCloud.init({
    provider: 'aliyun', // aliyun、tencent
    clientSecret: '', // aliyun 必须配置
    spaceId: '', // 服务空间ID
})
const todo = mycloud.importObject('todo');
const res = await todo.add('title demo', 'content demo') 

备注: 云对象的参数在阿里云服务空间支持 1M 大小,腾讯云服务空间支持 6M 大小,我们还是要尽可能优化请求参数,避免大数据传输。

交互 UI 控制:

我们发现上面的示例执行的时候有一套内置的加载 UI,一起看看怎么回事。

不喜欢我要关闭:

我们在导入云对象的时候可以通过指定第一个选项参数来控制关闭这套 UI 的展示:

uniCloud.importObject('todo', {
    customUI: true // 配置为 true 取消自动展示的交互提示界面
}) 
还行微调一下吧:

我们可以对默认 UI 进行参数的微调,执行提示的文案、是否使用遮罩层、错误信息展示的方式、是否需要展示重试按钮。

uniCloud.importObject('todo', {
    customUI: false, // 是否取消自动展示的交互界面。默认为false,配置为true时取消自动展示的交互提示界面,以下配置均不再生效
    loadingOptions: { // loading相关配置
        title: '加载中...', // 显示的loading内的提示文字。默认值为:加载中...
        mask: true // 是否使用透明遮罩,配置为true时不可点击页面其他内容。默认值为:true
    },
    errorOptions: { // 错误界面相关配置
        type: 'modal', // 错误信息展示方式,可取值:modal(弹框,默认)、toast(toast消息框)。默认值为:modal
        retry: false // 是否展示重试按钮,仅在type为modal时生效。用户点击重试按钮时将重新请求调用的方法,默认为false
    }
}) 

总结:

uniCloud的服务器与客户端交互的方式有云函数、云对象、clientDB三种方式,但云对象的推出就将云函数抛到了一边,我们除了有数据库操作的时候优先使用 clientDB 的方式外,当我们遇到不宜在前端公开的业务逻辑的编写优先采用云对象。

这一篇我们从云服务空间的创建、云对象的创建、云对象的调用、云对象的统一拦截处理、云对象的 UI 控制等几个方便介绍的它的使用,我们在实际编写的时候也要调研对应服务空间的特点和支持的情况,就比如说我想使用 puppeteer 在云端事件网页截图,就受服务空间大小的限制无法使用。文章来源地址https://www.toymoban.com/news/detail-808380.html

到了这里,关于【uniCloud】云对象的应用与提升的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 【C++】STL 算法 ① ( STL 算法相关头文件 | 函数对象 / 仿函数 简介 | 函数调用操作符 | 重写函数调用操作符的类 | 函数对象 与 普通函数区别 )

    标准模板库 STL 算法 都定义在 algorithm , numeric 和 functional 三个头文件中 ; 使用 STL 标准模板库 算法时 , 导入上述 3 个头文件 , 导入时根据需求导入即可 , 不必都导入 ; algorithm 头文件 是 3 个 STL 算法头文件中 包含算法最多的一个 , 包含常用的 : 比较算法、交换算法、查找算法

    2024年01月16日
    浏览(42)
  • 常量对象 只能调用 常成员函数

    //函数声明 void ReadRanFile(CString szFilePath); const CFvArrayCString GetPanelGrade() const { return m_fvArrayPanelGrade; } //在另一个文件中调用ReadtRanFile这个函数 const CFsJudConfig psJudConfig = m_pFsDefJudge-GetJudConfig(); psJudgeConfig.ReadRanFile(szFilePath);   //报错!! 报错内容:cannot convert \\\'this\\\' pointer from  \\\' co

    2024年02月12日
    浏览(29)
  • 【uniapp关联unicloud,阿里云云服务空间】unicloud本地调试服务启动失败:当前项目未关联unicloud服务空间,请调整后重新运行,已解决

    最近开发app项目,很多都是第一次上手 1、在Hbuider中运行项目,出现如下提示 2、项目根目录下已有uniCloud文件夹 3、如果云开发环境未创建,可以右击项目,选择创建uniCloud云开发环境 4、创建好的目录如下,index.js中是getPhoneNumber,uniapp调用一键登录时需要用到 5、右击uniCl

    2024年02月08日
    浏览(34)
  • 使用uniapp+unicloud部署微信小程序

    在HbuiderX创建项目时选择vue3+启用unicloud  选择关联云服务  创建免费云服务,步骤就不详细介绍了。  创建云数据库,根据需求修改权限(增、删、改、查,默认是false),创建结构,name、age、sex等  回到HbuiderX,更新远程数据库  下载后可以查看json文件,和之前在控制台设

    2024年02月10日
    浏览(27)
  • vivo手机如何隐藏应用 vivo手机隐藏应用方法

    如今很多手机都推出的隐藏应用功能,而这个功能,则是让别人看不到你下载的相关应用程序,但有些vivo用户不知道自己手机有没有这个功能,那么,vivo手机如何隐藏应用?下面来看看vivo手机隐藏应用方法。 vivo手机如何隐藏应用 vivo手机隐藏应用方法 1、在手机设置中点击【

    2024年02月15日
    浏览(27)
  • 基于uniapp+unicloud开发的手机备忘录小程序

    注:该小程序是我的一个课设作品,现在发出来供大家学习参考,如有不好的地方,欢迎指正。 1、注册账号 在unicloud官网注册一个账号:https://unicloud.dcloud.net.cn/login 2、创建云空间: 点击右上角创建云空间; 本小程序的云空间名字为:memo,默认选择阿里云即可。 3、登录

    2024年02月09日
    浏览(29)
  • 提升应用性能的关键步骤——UniApp性能优化策略与技巧详解

    「作者主页」 :雪碧有白泡泡 「个人网站」 :雪碧的个人网站 chatgpt体验地址 描述:代码压缩和混淆是常用的性能优化手段。通过减小JavaScript、CSS和HTML文件的大小,可以降低加载时间和网络传输。 解释: 在构建UniApp应用时,确保开启代码压缩和混淆选项。 使用工具(如

    2024年02月03日
    浏览(25)
  • uniapp unicloud 使用阿里云api 图像分割之服饰分割

    一开始 我是按照 阿里云的文档 先用 https请求 和 Typescript 先引入 然后进行一系列操作 文档链接: https请求: https://help.aliyun.com/document_detail/311645.html Typescript: https://next.api.aliyun.com/api-tools/sdk/imageseg?version=2019-12-30language=nodejs-tea 但是不知道什么原因 老是报如下 错误 我以为是

    2024年02月10日
    浏览(25)
  • python入门基础(13)--类、对象、全局函数,类内部调用

        面向过程的编程语言,如C语言,所使用的数据和函数之间是没有任何直接联系的,它们之间是通过函数调用提供参数的形式将数据传入函数进行处理。 但可能因为错误的传递参数、错误地修改了数据而导致程序出错,甚至是崩溃。当需要修改或维护程序时要从程序提供

    2024年02月08日
    浏览(31)
  • uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法

    方法1:在pages.json 原生小程序也可以采用类似的方法去掉顶部,让头部变透明 小程序页面顶部导航栏navigationBar如何隐藏、变透明?_你挚爱的强哥的博客-CSDN博客 小程序顶部的白色背景条就不见了,直接变透明,只剩下右上角的胶囊按钮。 https://s-z-q.blog.csdn.net/article/details/13

    2024年02月13日
    浏览(35)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包