uniapp使用微信小程序云开发实时聊天 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

uniapp使用微信小程序云开发实时聊天

发表时间:2020-9-25

发布人:葵宇科技

浏览次数:141

效果:

在这里插入图片描述

步骤一:对微信小程序

(1)创建微信云开发项目(2)创建云环境(后续将用到云环境ID)

在这里插入图片描述

(3)将云函数上传部署 (后续会用到云函数openid等)

在这里插入图片描述

(4)创建集合(示例counters集合)

在这里插入图片描述

步骤二:对uniapp 预实现操作微信云数据库

(1)创建uniapp项目 (2)并复制微信云开发项目的APPID到uniapp项目

在这里插入图片描述

(3)初始化云环境(在app.vue填写微信小程序创建云环境使用的云环境ID)

在这里插入图片描述

创建一个vue文件,尝试连接数据库

在这里插入图片描述
在这里插入图片描述
template代码

	<button type="default" @click="add()">添加</button>

js

	counterId: '',
				count: null,
				openid: "",
				queryResult: new Array(),
				onLoad() {
			//初始化云数据库
			wx.cloud.init({
				env: 'xyy-pzhy3'
			});
			
		},
		add() {
				const db = wx.cloud.database({
					env: 'xyy-pzhy3'
				})
				db.collection('counters').add({
					data: {
						count: 1
					},
					success: res => {
						// 在返回结果中会包含新创建的记录的 _id
						this.counterId = res._id;
						this.count = 1;
						console.log('[数据库] [新增记录] 成功,记录 _id: ', res._id)
					},
					fail: err => {
						wx.showToast({
							icon: 'none',
							title: '新增记录失败'
						})
						console.error('[数据库] [新增记录] 失败:', err)
					}
				})
			},

查看云数据库发现操作数据库成功,续聊天代码

下载项目

相关案例查看更多