永久旅途-优快云博客

原创【Uniapp-Vue3】使用uniCloud.uploadFile上传图片到云存储

我们可以在res中获取返回的图片路径，并且在云存储库中能够看到保存的图像，名字为我们定义的cloudPath。我这里把所有上传的图像放在userAvatar文件中，又单独按照日期分类，把当前的时间戳作为图像名。当我们把button组件中的open-type改为“chooseAvatar”时，就能够选择图片。在打印出来的对象中可以看到该图片的临时路径，我们只需要把这个临时路径上传到云存储中就行。我们所有上传的图像都会被存储在cloudstorage文件夹中。所以我们可以把数据更新到数据库中。

2025-02-27 19:51:17 562

原创【Uniapp-Vue3】点击将内容复制到剪切板

当我们点击ID号的时候就会弹出弹窗“内容已复制”如：点击ID号将ID号复制到剪切板上。设置点击事件，并传入ID值。

2025-02-26 20:26:31 444

原创【Uniapp-Vue3】登录成功后获取当前用户信息并渲染到页面中

在uni-id-users.schema数据表中找到 "wx_openid" 字段，将下面的 "permission" 部分删除，后面需要完善相关权限的时候再加回来。我们能够在Storage中获取到用户的相关信息，但是我们会看到uni-id-pages-userInfo为空。引入user.js，在uni.login中传入登录成功的信息。我们通过userInfo就可以拿到获取过来的信息。我们再看Storage，用户信息就获取到了。并且我们会报“权限校验未通过”的错误。

2025-02-26 15:19:46 335

原创【Uniapp-Vue3】开发userStore用户所需的相关操作

在项目根路径下创建的stores文件夹中创建user.js文件。并将以下内容复制到user.js中。

2025-02-26 14:01:40 417

原创【Uniapp-Vue3】在uniapp中使用pinia的基本用法

/ 导入pinia。// 引入pinia。// 使用pinia。我们在counter.js中定义两个变量和一个函数，并进行导出。在需要使用的地方引入pinia，并使用函数接受导出的对象。在main.js中对pinia进行引入，使用和导出。我们可以直接当做正常的变量去使用。

2025-02-25 19:50:36 376

原创【uniapp-Vue3】beforeRegister在注册用户入库前设置初始用户

首先在uniCloud/cloudfunctions/common/uni-config-center/uni-id中创建hooks文件，再创建index.js文件。下面的例子中，在用户第一次自动登录的时候创建username字段，由“游客”+六位数组成。

2025-02-25 19:20:19 449

原创【Uniapp-Vue3】实现隐式自动注册登录及config配置

在微信公众平台中获取AppID和小程序密钥，如果没有生成过密钥就点击生成，如果忘记了就点击重置。右键cloudfunctions文件，点击“上传所有云函数...”在config.json中这个位置分配配置appid和密钥。重新运行微信小程序，如果生成了token，就说明配置完毕。在uni-id-users这个数据表中就会出现用户的信息。config.json的每一次更新都需要重新上传云函数。配置好config.json以后要进行字段的配置。

2025-02-25 14:29:29 643

原创【Uniapp-Vue3】导入uni-id用户体系

在uniCloud/cloudfunctions/common/uni-config-center中创建uni-id文件夹，再在下面创建config.json文件。我们在uniCloud下的uni-id用户体系下的云对象中找到引入云对象的代码，引入到App.vue中。在manifest.json中打开微信小程序配置，配置微信小程序的AppID和勾选上传代码时自动压缩。再点击旁边的微信登录，将接口形式中的代码也引入到App.vue中。在uniapp官网的uniCloud中下载uni-id用户体系。

2025-02-25 13:54:54 599

原创【Uniapp-Vue3】UniCloud云数据库获取指定字段的数据

如果我们不在get中添加{getOne:true}，在只获取到一个数据res.result.data将会是一个数组，如果一个元素我们还要放在数组中就会很麻烦，添加上就能直接拿到数据。db.collection("数据表").where({字段名1:数据, 字段名2:数据}).get({getOne:true})下面的例子中_id是数据的字段，id是一个变量，里面装的id具体的值。

2025-02-09 15:45:01 389

原创【Uniapp-Vue3】uniCloud获取数据时限制字段

我们在云数据库中的一条数据存储了相当多条字段，如果我们每次读取数据都将所有的字段全部读过来的话，开销就会非常大。db.collection("数据表名称").field("字段1, 字段2, 字段3").get();因此我们在读取数据的时候需要对字段进行限制，每条数据我们只读取需要的字段，就会减小开销。：_id这个字段不需要限制也会传过来，所以不需要对_id进行限制。

2025-02-06 16:32:02 380

原创【Uniapp-Vue3】z-paging插件组件实现触底和下拉加载数据

注意下载下载量最多的这个进入Hbuilder以后点击“确定”插件的官方文档地址： https://z-paging.zxlee.cn 在文档中向下滑动，会有使用方法。使用z-paging标签将所有的内容包起来配置标签中的属性在script标签中进行配置：1. 声明paging2. 在queryList函数中调用获取数据函数，并传入两个参数3. 在获取数据函数中限制获取数据的范围4. 使用paging去接受获取的数据5. try catch去处理数据获取错误

2025-02-06 09:29:19 654

原创【Uniapp-Vue3】使用uni.$emit和$on页面通讯实现发布成功即时更新数据

我们有一个页面A，我们在A中可以上传一条数据，但是数据在页面B进行展示。uni.$emit("事件名称", 发送数据);想要实现A中上传数据后页面B中立刻更新数据。uni.$on("事件名称", (e)=>{

2025-02-06 08:54:17 916

原创【Uniapp-Vue3】从uniCloud中获取数据

let res = await db.collection("数据表名称").get();db.collection("数据表名称").get();// 获取数据失败逻辑。// 获取数据成功逻辑。let 函数名 = async () => {

2025-02-05 19:44:25 391

原创【Uniapp-Vue3】Unicloud根据表结构将数据添加到数据库

let res = await db.collection("数据表名称").add(数据);我们输出一下返回的res结果，如果成功存储数据库，errCode将为0。// 存储成功的逻辑。// 对数据进行处理的逻辑。db.collection("数据表名字").add({触发onSubmit函数后数据表中就会新增一条数据。// 存储失败的逻辑。// 成功失败都会执行的逻辑。let 函数名 = async ()=>{

2025-02-05 19:27:47 561

原创【Uniapp-Vue3】创建DB schema数据表结构

右键uniCloud文件下的database文件，点击“新建DB schema”，选择模板，修改文件名，点击“创建”创建完成后会出现对应的文件，进入该文件进行配置。对文件中的必填选项，用户权限，字段进行配置。其中的一些属性可以在下面文档中进行查询。

2025-02-05 09:16:18 658

原创【Uniapp-Vue3】创建unicloud服务空间并关联

推荐使用阿里云，输入“服务空间名称”，如果只是学习可以选择免费或者按量计费，注意免费只能开启一个。再次右键uniCloud文件，选择“关联云服务空间或项目” ，选中服务空间，点击“关联”右键uniCloud文件，点击“打开uniCloud Web控制台”想要在项目中使用Unicloud需要在创建项目时启用Unicloud。点击“新建服务空间”，没有登录先进行登录。购买完成后会显示“正在初始化...”等待十分钟后变为“正常”就可以使用了。

2025-02-05 08:45:40 290

原创【Uniapp-Vue3】iconfont图标库的使用

uni-icons custom-prefix="iconfont" type="代码" ></uni-icons>点击添加至项目，可以选中项目进行加入，也可以点击文件加号创建一个新的项目并添加。打开iconfont.css文件，将红色框选部分删除，对箭头部分进行修改。在项目的static文件下创建fonts文件，将这两个文件粘贴进来。先在iconfont图标库中将需要的图标加入购物车。加入以后会来到如下界面，点击下载至本地。将.css和.ttf文件进行复制。双击打开下载的.zip文件。

2025-02-04 09:11:05 505

原创【Uniapp-Vue3】解决uni-popup弹窗在安全区显示透明问题

我们在使用uni-popup时，如果想要给弹出内容添加一个背景颜色，我们会发现在安全区域是不显示该背景颜色的。首先根据如下的目录结构找到uni-popup.vue文件。在该文件中找到bottom配置，将红箭头所指代码注释掉。下面的安全区域就没有了，但是还没解决完。

2025-02-01 12:29:54 960

原创【Uniapp-Vue3】获取用户状态栏高度和胶囊按钮高度

在项目目录下创建一个utils文件，并在里面创建一个system.js文件。

2025-02-01 12:15:41 700

原创【Uniapp-Vue3】uni-icons的安装和使用

进入到如下页面中，点击“点击下载&安装”。点击“下载插件并导入HBuilder”，如果没有登录就登陆一下网页中会打开Hbuilder，进入Hbuilder以后，选择需要使用该插件的项目进行安装。点击确定，没有登录就再登录一下。下载完成以后就会在项目目录中出现“uni_modeules”文件。

2025-01-23 15:12:36 1360 1

原创【Uniapp-Vue3】点击回到顶部

页面滚动使用如下API：// 其他参数})

2025-01-23 14:52:52 629

原创【Uniapp-Vue3】下拉刷新

我们在刷新之前需要先清空原来的数据，在请求新的数据。刷新操作是完成了，但是刷新的图标还存在。所以我们要在请求的时候关闭这个刷新的图标。

2025-01-23 14:48:20 600

原创【Uniapp-Vue3】触底加载更多

如果我们只是在onReachBottom生命周期函数中再次获取请求，会发现数据并没有叠加，只是原来的数据被覆盖了。数据的条数没有变化，依旧是十条，但不是原来的十条了。

2025-01-23 14:15:20 1313

原创【Uniapp-Vue3】图片lazy-load懒加载

一次请求图片的数量减少了很多，只有当我们浏览到新的图片才会发送新的图片请求。图片懒加载是指当预览到某张图片的时候才发送请求获取该图片。在没有开启懒加载的时候，所有的图片都会一次性请求完毕。

2025-01-23 11:35:34 599 1

原创【Uniapp-Vue3】previewImage图片预览

如果我们想要实现点击一张图片放大，并能够左右滑动，就要使用previewImage这个API。我们先编写一个点击图片的事件，并传递当前点击图片的下标，也就是第几张图片。点击图片就能进入预览模式，并且能够左右滑动预览路径组中的其他图片。current:xxx, // 当前图片下标。urls是图片的路径组，current就是刚才传递的参数。urls:xxx, // 图片路径组。

2025-01-23 11:24:57 639