关于uni-app的cloud的使用

uni-app的cloud其实就是整合了阿里和腾讯云的serverless云开发,本文就不去具体介绍云开发的过程，仅仅是简单的记录下在uni-app中使用自带的cloud开发的过程

一、环境搭建

1、使用HBuilder创建一个项目并且启动云开发
2、创建的项目点击mainfest.json中是否有AppId(注意要先登录)
3、给当前的项目创建一个云服务空间
4、项目和云空间关联起来
5、项目中创建一个云函数
- 创建云函数目录
- 创建云函数
- 上传和部署

在这里插入图片描述

二、在`uni-app`中使用云函数

1、在vue文件中调用云函数

扫描二维码关注公众号，回复： 12825329 查看本文章

loginHandler() {
  uniCloud.callFunction({
    name:'login',
    data: {
      name: '水痕',
      age:18
    },
    success(res) {
      console.log('云函数成功',res);
    },
    fail(err) {
      console.log('云函数失败',err);
    }
  })
}

2、如果出现跨域的问题就要在云服务器上处理

三、使用云数据库

1、所谓的云数据库其实就是我们常规的momgodb数据的方式，用法也和mongodb很类似的
2、创建一个数据表
3、手动添加一条数据(注意点:必须使用双引号包括起来的)
4、编写云函数,查询出这条数据
5、运行这个函数(测试自己写的云函数可以采用上传并运行)

四、数据的增删改查操作

1、插入单条数据

'use strict';
const db = uniCloud.database();

exports.main = async (event, context) => {
      
      
	
	const collection = db.collection('user');
	const result = await collection.add({
      
      
		username: "hello",
		password: "123456",
		gender: "男"
	});
	console.log(JSON.stringify(result));
	return event
};

2、插入多条数据

'use strict';
const db = uniCloud.database();

exports.main = async (event, context) => {
      
      
	
	const collection = db.collection('user');
	const result = await collection.add([
		{
      
      
			username: "hello",
			password: "123456",
			gender: "男"
		},
		{
      
      
			username: "word",
			age: 20
		}
	]);
	console.log(JSON.stringify(result));
	return event
};

3、删除数据

'use strict';
const db = uniCloud.database();

exports.main = async (event, context) => {
      
      
	
	const collection = db.collection('user');
	const result = await collection.doc('6021fc69d6547d0001e681fb').remove();
	console.log(JSON.stringify(result));
	return event
};

4、使用update更新数据

'use strict';
const db = uniCloud.database();

exports.main = async (event, context) => {
      
      
	
	const collection = db.collection('user');
	const result = await collection.doc('6021fc69d6547d0001e681fa').update({
      
      
		name: '嘻嘻'
	});
	console.log(JSON.stringify(result));
	return event
};

5、使用set更新数据

'use strict';
const db = uniCloud.database();

exports.main = async (event, context) => {
      
      
	
	const collection = db.collection('user');
	const result = await collection.doc('6021fc69d6547d0001e681fa').set({
      
      
		name: '嘻嘻'
	});
	console.log(JSON.stringify(result));
	return event
};

6、update和set更新数据的区别
- set当遇到不存在的id的时候就会手动去创建一条新的数据
- update遇到不存在的id的时候不会去创建一条新的数据

7、根据Id查询一条数据

'use strict';
const db = uniCloud.database();

exports.main = async (event, context) => {
      
      
	
	const collection = db.collection('user');
	const result = await collection.doc('6021fc69d6547d0001e681fa').get();
	console.log(JSON.stringify(result));
	return event
};

8、根据其他字段来查询

'use strict';
const db = uniCloud.database();

exports.main = async (event, context) => {
      
      
	
	const collection = db.collection('user');
	const result = await collection.where({
      
      
		username: 'admin',
	}).get();
	console.log(JSON.stringify(result));
	return event
};

9、关于更多的聚合查询将在后期介绍

五、上传图片及文件

1、手动上传文件

2、在vue代码中实现上传文件

// 上传文件
uploadImgHandler() {
      
      
  // 使用uni提供的上传组件
  uni.chooseFile({
      
      
    count:1,
    success(res) {
      
      
      console.log('上传文件',res);
      const tempFilePath = res.tempFilePaths[0];
      const cloudPath = res.tempFiles[0].name;
      console.log(tempFilePath);
      console.log(cloudPath);
      // 上传到云端
      uniCloud.uploadFile({
      
      
        filePath: tempFilePath,
        cloudPath,
        success(res) {
      
      
          console.log('上传云端成功返回:',res);
          // 页面中使用res.fileID作为图片的地址
        },
        fail(err) {
      
      
          console.log('上传云端失败:',err);
        }
      })
    }
  })
}