云开发WEB学习心得
Day1
部署一个简单的网页到静态网站托管
网站上小图标的显示
Day2
学习集成响应,完全使用云函数云接入能力构建可返回用户ip地址的网页页面
效果图如下
云函数
exports.main = async (event)=>{
var a=event["headers"]["x-real-ip"]
var b=event["headers"]["x-client-proto"]
var c=event["headers"]["host"]
var d="姓名:颖浩"+" "+"你的IP地址:"+a+" "+"当前的域名地址是:"+b+"://"+c
return d
}
需要在云函数添加http触发路径添加路径
Day3
实现了云函数(不能是http云接入形式)接入腾讯验证码
(具体效果:在网页中弹出腾讯云验证码,后台云函数验证是否是有效,并返回给页面提示)。
效果图如下
前端html很容易实现,app.callfunction调用云函数Day3
<body>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
</head>
<body>
<script src="//imgcache.qq.com/qcloud/tcbjs/1.7.0/tcb.js"></script>
<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
<script>
const app = tcb.init({
env: 'wang-d324f3',
})
let auth = app.auth();
let Cap = new TencentCaptcha('(APPID如下图示)',function(res){
var ticket=res.ticket
var randstr=res.randstr
console.log(ticket)
console.log(randstr)
app.callFunction({
name:'Day3',
data:{ticket,randstr}
}).then((res)=>{
console.log(res)
if(res.result.err_msg=="OK"){
alert('验证成功!')
}
else{
alert('验证失败!')
}
})
});
auth.anonymousAuthProvider().signIn().then(()=>{
Cap.show();
});
</script>
</body>
</body>
云函数那边挺难的,用来验证是否是有效
const tcb = require("@cloudbase/node-sdk");
const request = require('request');
const TCaptchaID = {
aid:'##########',//腾讯验证码项目aid
AppSecretKey:'#########'//腾讯验证码项目Secretkey
};
const app=tcb.init({
env: 'wang-d324f3'
})
const auth = app.auth()
let CallWeb = (obj) =>{
return new Promise((resolve, reject) => {
request({
url:'https://ssl.captcha.qq.com/ticket/verify?aid='+TCaptchaID.aid+'&AppSecretKey='+TCaptchaID.AppSecretKey+
'&Ticket='+obj.ticket+
'&Randstr=' + obj.randstr +
'&UserIP =' + obj.ip,
method:'GET'
}, (error, response, body) => {
if (error) {
reject(error);
}
resolve((typeof response.body === 'object') ? response.body : JSON.parse(response.body));
});
});
}
exports.main = async event => {
const ip = auth.getClientIP(); // string
return await CallWeb({
ticket:event.ticket,
randstr:event.randstr,
ip:ip
})
}
可以参考如下Http触发形式的腾讯验证码云函数代码:
https://github.com/TCloudBase/WEB-FILES/blob/master/cloudfunctions/functions/getFile/index.js
Day4
将教程范例(意见反馈平台DEMO)中的管理端部分的列表加载变成实时数据库监听形式触发。用户端列表加载云函数适配超过100条的场景,采用promise all的形式进行改造,使其可以支持超过100条。
Day5
将教程范例的cloudtohttp函数使用sdk的getTempFileURL进行替换。