网页请求腾讯云环境的云函数

a_靖2025-02-23 8:34

背景：uniapp，做一个管理后台

需求：在PC端网页请求云环境的云函数

npm

复制代码

npm install @cloudbase/js-sdk -S

在APP中，封装匿名登陆，因为未登录时无法请求云函数

app.vue

复制代码

<script>
	import Vue from 'vue'
	import cloudbase from "@cloudbase/js-sdk";
	export default {
		globalData: {
		},
		onLaunch(e) {
			const cloud = cloudbase.init({
				env: "cloudbase-你的云环境ID",
			})
			Vue.prototype.$cloud = cloud;
			let db = cloud.database();
			Vue.prototype.$db = db;

			// 初始化云开发
			Vue.prototype.$cloudInitPro = (env) => {
				return new Promise(async rr => {
					cloud.auth().getLoginState().then((loginStateR) => {
						let loginStatus =loginStateR ? true : false
						console.log('登录状态', loginStatus);
						rr(loginStatus)
					});
				})
			}

		}
	};
</script>

<style lang='scss'>
	.p_r {
		display: flex;
		flex-direction: row;
	}
</style>

组件index.vue调用云函数

复制代码

<template>
	<div class="hello">
			<button @click="navChatRoom" class="btn btn-primary">登录</button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				msg: ''
			}
		},
		async created() {
			this.$cloudInitPro().then(() => {
				this.$cloud.callFunction({
						name: 'turnover_get', // 对应云函数名
						data: {},
					})
					.then((ress) => {
						console.log('turnover_get----', ress)
					})
			})

		},
		methods: {
			navChatRoom() {
			}
		}
	}
</script>
<style scoped>
</style>