手把手云开发一个小程序-(二)-uniclould的购买和默认库的使用

一,前言

因为平时喜欢记录一些文案,看小说或者上网冲浪的时候,遇到拍案叫绝的文字,就会截图保存下来,但是时间久了,手机里截图保留了很多,却不会再去看,想删除又舍不得,于是就想着自己开发个文案记录的小程序.自用的同时让有同样需求的人也能用.

目前已经把第一个版本开发完了,可以扫描二维码,进行体验,下图是体验的二维码和基本的操作指引.
请添加图片描述

上篇文章中,我们使用uniclould创建了一个小程序,并且了解了上传和发布小程序版本的具体步骤,这篇文章呢,将会继续讲解我们的小程序如何使用uniclould实现无后端的云开发。

一,购买云服务空间

点击进入uniclould云服务空间服务空间 - uniCloud (dcloud.net.cn)

新建服务空间,有阿里云和腾讯云两种,新人可以先使用阿里云的,因为阿里云的第一个月免费。只是服务厂商不一样,使用起来没啥差别的。

至于我,我不差钱,肯定选阿里云,主要就是图它少了个付款环节,方便省力(🐶)。

1.PNG

二,HBuilder中关联云服务器空间

在HBuilder中右键项目的云服务器文件夹。选择关联云服务器空间。然后就会出现下图的弹窗,上一步创建的云服务器空间就会出现在这里(没出现的话,需要等会或者刷新下):

2.PNG

三,默认生成的开源库uni-config-center

实际开发中很多插件/云函数/公共模块需要配置文件才可以正常运行,比如各种appkey、secret。存放在数据库里的话,拖累云函数性能,并且增加数据库请求。现在全部放在这里配置,让各个云对象/云函数想要使用时直接引入就行。

这个官网上讲得很详细,具体可以查看:uni-config-center 云配置中心 | uni-app官网 (dcloud.net.cn)

现在我只是简单讲讲怎么使用。

3.1,新建share-config/config.json文件

在该库下新建配置文件,写上我们需要用到的公共配置:

3.PNG

3.2,新建云对象

如下图,新建云对象,后续我会写云对象的使用,这里为了说明这个配置文件的使用,先简单使用云对象:

4.PNG

3.3,在云对象中引入配置文件

在我们新建了云对象之后,如果想要引入公共库中的文件,就可以如下图所示,在云对象文件夹上右键-管理公共类库,然后选择对应的公共类库,引入后会发现和我们平时开发的npm库一样,会在package.json中生成引用地址:

5.PNG

3.4,在云对象中使用配置文件

按照官网的写法,如下所示:

//myTestObj/index.obj.js
const createConfig = require('uni-config-center')
const shareConfig = createConfig({ // 获取配置实例
    pluginId: 'share-config' // 上文我们在common/uni-config-center下的插件配置目录名
})
const config = shareConfig.config() // 获取common/uni-config-center/share-config/config.json的内容
​
module.exports = {
  _before: function () { // 通用预处理器},
  /**
   * method1方法描述
   * @param {string} param1 参数1描述
   * @returns {object} 返回值描述
   **/
  
  method1(param1) {
    return {
      config
    }
  }
}

在这里,我创建了一个方法:methed1返回的结果就是这个参数配置。

3.5,在项目中使用云对象

后续会讲云对象的使用,这里我们把它理解为后端接口就行。既然现在后端接口创建完毕了,那么就可以去前端中调用这个接口。

在项目的pages/index页面代码中这样写:

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{title}}</text>
    </view>
  </view>
</template><script>
  export default {
    data() {
      return {
        title: 'Hello'
      }
    },
    onLoad() {
      this.testObj()
    },
    methods: {
      async testObj() { // 注意异步
        const myTestObj = uniCloud.importObject('myTestObj') // 导入云对象
        const res = await myTestObj.method1()
        console.log("获取到参数",res)
      },
    }
  }
</script>

主要是这两行代码;

const myTestObj = uniCloud.importObject('myTestObj') // 导入云对象
const res = await myTestObj.method1()

就是引入接口和调用接口的。获取到结果打印出来就是我们设置的配置。

这里需要注意的是我们把项目运行到微信开发者工具时,命令行窗口的右上角会有个连接本地云函数的选项,这个要勾选。因为现在我们的云函数/云对象都是放置在本地的,并没有上传到服务器中。

6.PNG

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/151753.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【教3妹学编程-算法题】最长奇偶子数组

3妹&#xff1a;2哥&#xff0c;你有没有看到新闻&#xff0c; 网红快乐小赵去世了。 2哥 :啊&#xff1f; 这么突然 3妹&#xff1a;是啊&#xff0c; 伤心&#xff0c;以前还特别喜欢他的作品&#xff0c;幽默搞笑。 2哥&#xff1a;哎&#xff0c;人有悲欢离合&#xff0c; …

Open3D 进阶(17)间接平差拟合二维直线

目录 一、算法原理二、代码实现三、结果展示本文由CSDN点云侠原创,原文链接。 一、算法原理 见:PCL 间接平差法拟合二维直线。 二、代码实现 import numpy as np import open3d as o3d import matplotlib.pyplot as plt

关于数据mysql ->maxwell->kafka的数据传输

个人名片&#xff1a; &#x1f405;作者简介&#xff1a;一名大三在校生&#xff0c;热爱生活&#xff0c;爱好敲码&#xff01; \ &#x1f485;个人主页 &#x1f947;&#xff1a;holy-wangle ➡系列内容&#xff1a; &#x1f5bc;️ tkinter前端窗口界面创建与优化 &…

鸿蒙原生应用开发-折叠屏、平板设备服务卡片适配

一、多设备卡片适配原则 为不同尺寸的卡片提供不同的功能 在卡片开发过程中请考虑适配不同尺寸的设备&#xff0c;特别是在折叠屏和平板设备上&#xff0c;设备屏幕尺寸的变化直接影响了卡片内容的展示。请发挥想象力设计具有自适应能力的卡片&#xff0c;避免在卡片内容不做…

git clone:SSL: no alternative certificate subject name matches target host name

git clone 时的常见错误&#xff1a; fatal: unable to access ‘https://ip_or_domain/xx/xx.git/’: SSL: no alternative certificate subject name matches target host name ‘ip_or_domain’ 解决办法&#xff1a; disable ssl verify git config --global http.sslVe…

[Jenkins] Docker 安装Jenkins及迁移流程

系统要求 最低推荐配置: 256MB可用内存1GB可用磁盘空间(作为一个Docker容器运行jenkins的话推荐10GB) 为小团队推荐的硬件配置: 1GB可用内存50 GB 可用磁盘空间 软件配置: Java 8—无论是Java运行时环境&#xff08;JRE&#xff09;还是Java开发工具包&#xff08;JDK&#xff…

前端 react 面试题 (一)

文章目录 vue与react的区别。react的生命周期有哪些及它们的作用。setState是同步的还是异步的。如何更新数据后&#xff0c;立刻获取最新的dom或者更新后的数据。使用回调函数&#xff1a;在生命周期方法中处理&#xff1a; 函数式组件和class组件的区别。class组件函数式组件…

【5G PHY】5G SS/PBCH块介绍(三)

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 本人就职于国际知名终端厂商&#xff0c;负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作&#xff0c;目前牵头6G算力网络技术标准研究。 博客…

C/C++ 实现获取硬盘序列号

获取硬盘的序列号、型号和固件版本号&#xff0c;此类功能通常用于做硬盘绑定或硬件验证操作&#xff0c;通过使用Windows API的DeviceIoControl函数与物理硬盘驱动程序进行通信&#xff0c;发送ATA命令来获取硬盘的信息。 以下是该程序的主要功能和流程&#xff1a; 定义常量…

使用 Redis 构建轻量的向量数据库应用:图片搜索引擎(二)

本篇文章我们来继续聊聊轻量的向量数据库方案&#xff1a;Redis&#xff0c;如何完成整个图片搜索引擎功能。 写在前面 在上一篇文章《使用 Redis 构建轻量的向量数据库应用&#xff1a;图片搜索引擎&#xff08;一&#xff09;》中&#xff0c;我们聊过了构建图片搜索引擎的…

深度学习入门(第二天)——走进深度学习的世界 神经网络模型

反向传播计算方法 简单的例子&#xff1a; 如何让 f 值更小&#xff0c;就是改变x、y、z&#xff0c;而损失函数也是这样&#xff0c;那么我们分别求偏导&#xff0c;则能得出每个值对结果的影响 链式法则 梯度是一步一步传的 复杂的例子&#xff1a; 神经网络整体架构 类生…

浪涌防护器件要选对,布局布线更重要!|深圳比创达电子EMC(上)

浪涌测试&#xff0c;作为最常见的EMC抗干扰测试项目之一&#xff0c;基本上是家用消费电子必测的项目&#xff1b;其测试目的是为了验证产品在承受外部的浪涌冲击时能否正常工作。 一、浪涌冲击产生机理及其防护设计 浪涌冲击主要包括雷击浪涌冲击、电力系统内部的开关噪声冲…

假如我是AI Agent专家,你会问什么来测试我的水平

1. 假如我是AI Agent专家&#xff0c;你会问什么来测试我的水平 作为AI Agent专家&#xff0c;您可能需要回答一系列关于AI代理的设计、实现和优化方面的问题。以下是一些可能的问题&#xff1a; AI代理的基本原理&#xff1a;AI代理的基本工作原理是什么&#xff1f;它们如何…

requests库进行HTTP请求时,有时需要传递cookies参数

在使用requests库进行HTTP请求时&#xff0c;有时需要传递cookies参数。但是&#xff0c;requests库的cookies参数只能接受CookieJar对象&#xff0c;而不能接受字典等其他类型的cookies。 在requests库中增加对字典类型的cookies支持&#xff0c;使其能够接受字典类型的cooki…

linux高级篇基础理论二(详细文档、LAMP、SHELL、sed正则表达式)

♥️作者&#xff1a;小刘在C站 ♥️个人主页&#xff1a; 小刘主页 ♥️不能因为人生的道路坎坷,就使自己的身躯变得弯曲;不能因为生活的历程漫长,就使求索的 脚步迟缓。 ♥️学习两年总结出的运维经验&#xff0c;以及思科模拟器全套网络实验教程。专栏&#xff1a;云计算技…

Coder OSS Enterprise 2.3.3 Crack

Coder OSS Enterprise是一个开源开发平台&#xff0c;旨在简化开发人员的编码流程。该平台专为企业级组织设计&#xff0c;具有针对大规模软件开发运营量身定制的功能。 首先&#xff0c;该软件提供了一个云环境&#xff0c;允许开发人员在任何地方使用任何设备处理他们的代码。…

Vue中el与data的两种写法

想必大家对Vue中的el与data并不陌生&#xff0c;接下来&#xff0c;让我为大家介绍一下el与data的两种写法吧&#xff01; 一、el的两种写法 1.new Vue时候配置e1属性。 2.先创建Vue实例&#xff0c;随后再通过vm.$mount(#root)指定el的值 <!DOCTYPE html> <html l…

结构工程师软件 Naviate Core MEP for Revit 3.4 Crk

Naviate Fabrication - 先进的建模和制造命令&#xff0c;可提高 VDC 设计师、细节设计师和承包商的生产力和收入。 Naviate MEP - 通过 MEP 工程师和设计师的建模和参数提高效率 导航架构 Naviate Architecture 完全集成到 Revit 平台中&#xff0c;增强了 BIM 提供的协作可能…

工业除尘器笔记

工业除尘器用于对工业生产产生的有害气体和粉尘进行吸附。相关标准的制定最早可以追溯到1960年代以前。注意&#xff0c;本文的附录包含一起完整的工业除尘器事故的分析和定责过程。相关事故分析定责文档源头摘自上海市政府网站。 在产品设计行业和关联下游行业&#xff0c;在…

java--俄罗斯方块

一、先看一下游戏运行时的画面 二、代码部分 1. Cell.java Cell.java&#xff1a; package demo1;import java.awt.image.BufferedImage; import java.util.Objects;/* 编写小方块类属性&#xff1a;行、列、每个小方格的图片方法&#xff1a;左移一格、右移一格、下落一格 …
最新文章