TCB系列学习文章——搭建你的第一个web端云开发（三）

原创

F颜

修改于 2020-06-28 10:57:58

1.2K0

修改于 2020-06-28 10:57:58

文章被收录于专栏：跟颜哥学习云开发跟颜哥学习云开发

准备工作

1、务必 创建云开发环境，获得环境 ID；

2、安装 Node.js；

3、安装 Cloudbase CLI 云开发脚手架。

npm install -g @cloudbase/cli
//本人遇到了问题
//无法加载文件 C:\nodejs\node_global\cloudbase.ps1，因为在此系统上禁止运行脚本。
//如果出现以上问题请管理员身份运行powerShell后执行set-ExecutionPolicy RemoteSigned

4、登录云开发控制台

这里需要特别注意，若已在微信开发者工具开通云开发环境，并且希望可以和web端使用同一个环境，在登录控制台的时候，请选择微信公众号登录

如若是想要开通新的，或者纯web端使用的云环境，可以直接微信扫码登录。

5、配置安全域名

6、开启匿名登陆

7、如果想连页面服务也丢在微信服务器，那也可申请静态网站托管

开通后，在项目根目录执行命令可以上传网站文件，更多详情请参考静态网站托管

cloudbase login //先登录
cloudbase hosting:deploy //再上传

2、开始测试是否能正常访问

创建项目目录(my-cloudbase-app)
在目录下创建文件index.html与cloudbaserc.json

//cloudbaserc.json
{
	"envId": "dev-abcdefg"// 此处填入您的环境ID
}

//index.html
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>测试web云开发</title>
</head>
<body>
	Hello Cloudbase!
	<script src="https://imgcache.qq.com/qcloud/tcbjs/1.3.5/tcb.js"></script>
	<script>
		const app = tcb.init({
			env: 'dev-abcdefg'  // 此处填入您的环境ID
		});
		app.auth().signInAnonymously().then(() => {
			alert('登录云开发成功！')
		});
	</script>
</body>
</html>

在项目根目录执行npx serve启动服务，查看执行结果

如若失败，请检查准备工作是否有哪里忘记配置了

3、使用云函数

1、创建云函数

1、如果是使用的微信小程序开发者工具创建的环境，可以在微信开发者工具内创建云函数，请参考上一篇文章

2、云开发控制台创建云函数(不可编辑)

3、本地开发云函数并使用Cloudbase CLI 脚手架提交云函数

在项目根目录创建functions目录
创建云函数目录(sum)并在云函数目录下创建文件index.js和package.json
写好云函数代码，参考如下格式(跟微信开发者自动生产的云函数格式一致)
先使用cloudbase login登录授权后项目根目录提交云函数代码cloudbase functions:deploy sum -e <env-id>，<env-id>是你的环境id

测试代码如下

//package.json
{
  "name": "sum",//写你刚创建的云函数名称(目录名称)
  "version": "1.0.0",
  "main": "index.js"
}

//index.js
exports.main = async (event,context) =>{//你的云函数入口
  console.log(event)
  console.log(context)
  return {
    sum: event.a + event.b
  }
}

2、调用云函数

const app = tcb.init({//只要初始化一次就好啦
  env: 'dev-abcdefg'  // 此处填入您的环境ID
});
app.callFunction({
	name: "sum",// 云函数名称
	data: {a: 1,b:2}//// 传给云函数的参数
}).then( res => {
	console.log(res);
}).catch( err =>{
	console.log(err);
});

4、使用云数据库

1、先创建数据集。

2、再使用数据集

const app = tcb.init({//只要初始化一次就好啦
  env: 'dev-abcdefg'  // 此处填入您的环境ID
});
app.auth();//需要先授权,也是授权一次就可以啦

const db = tcb.database()//创建云数据库对象
const db_test = db.collection('test')//获取数据集对象
db_test.add({//对test数据集进行添加操作
  data: {a:1,b:2,c:3},//要添加的数据
}).then((res)=>{//调用成功
  console.log(res);
}).catch((err)=>{//调用失败
  console.log(err);
});

3、执行后结果

{//返回结果
  id: "5535aeeb5ef325d7003ac3093d427efc",//数据库添加数据时自动生成的主键id
  requestId: "20b63f2a3d967"//调用id，用于查日志
}

{//数据库执行结果
  _id:'5efaaa445ef2b86000446afe05b0956b',//自动生成的主键
  _openid:'abcdefghijklmnopqrstuvwxyz',//操作人微信openid
 ...,//这里是你自己保存的数据
}

5、使用云储存

1、文件上传

const app = tcb.init({//只要初始化一次就好啦
  env: 'dev-abcdefg'  // 此处填入您的环境ID
});
app.uploadFile({
    cloudPath: "/a/filename",// 云端路径
    filePath: document.getElementById('file').files[0]// 需要上传的文件，File 类型
}).then((res) => {//上传成功
    console.log(res.fileID)// 返回文件 ID
});

2、文件预览和文件下载

app.getTempFileURL({
    fileList: [
        'cloud://a/b/c',
        'cloud://d/e/f'
    ]
}).then((res) => {
    // fileList 是一个有如下结构的对象数组
    // [{
    //    fileID: 'cloud://webtestjimmy-5328c3.7765-webtestjimmy-5328c3-1251059088/腾讯云.png', // 文件 ID
    //    tempFileURL: '', // 临时文件网络链接
    //    maxAge: 120 * 60 * 1000, // 有效期
    // }]
    console.log(res.fileList)
});

总结

web端开发真的不如小程序端开发方便。
特别建议不要在官网直接开通web端云开发，不能用于小程序端。在微信开发者工具端开通可以同时用于web端，并且可以直接在微信开发者工具进入管理台和进行云开发，非常方便。
云开发脚手架个人觉得做的还不够成熟，是不是应该考虑给主流前端开发工具开发插件(VS Code和Hbuider X等等)。
可以实现和小程序工用一个云开发环境和库，记住不要在网站申请，去开发者工具开通云开发就对了。
大致和微信小程序开发一致，除了授权略微有点麻烦。
注意事项请参考第二篇小程序开发。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

serverless