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

2020-06-28 10:57:58 浏览数 (1)

准备工作

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

2、安装 Node.js；

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

代码语言：javascript复制
npm install -g @cloudbase/cli
//本人遇到了问题
//无法加载文件 C:nodejsnode_globalcloudbase.ps1，因为在此系统上禁止运行脚本。
//如果出现以上问题请管理员身份运行powerShell后执行set-ExecutionPolicy RemoteSigned
错误详情和处理方式错误详情和处理方式

4、登录云开发控制台

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

选择这里登陆，才能进入小程序端的云开发环境控制台选择这里登陆，才能进入小程序端的云开发环境控制台

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

可以看到已经在小程序端配置的云环境可以看到已经在小程序端配置的云环境

5、配置安全域名

点击配置本地开发ip和端口号点击配置本地开发ip和端口号

6、开启匿名登陆

开启匿名登录方式开启匿名登录方式

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

可以将页面放到静态网站托管服务上。可以将页面放到静态网站托管服务上。

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

代码语言：javascript复制
cloudbase login //先登录
cloudbase hosting:deploy //再上传

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

  1. 创建项目目录(my-cloudbase-app)
  2. 在目录下创建文件index.html与cloudbaserc.json
代码语言：javascript复制
//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 脚手架提交云函数

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

测试代码如下

代码语言：javascript复制
//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、调用云函数

代码语言：javascript复制
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、再使用数据集

代码语言：javascript复制
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、执行后结果

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

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

5、使用云储存

1、文件上传

代码语言：javascript复制
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、文件预览和文件下载

代码语言：javascript复制
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)
});

总结

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

0 人点赞