后端
创建应用
- 注册云开发 CloudBase；
- 进入云开发控制台，新建环境，请按需配置环境；
环境名称自由填写，推荐选择计费方式包年包月。推荐创建上海环境，因为无需额外配置地域。
- 进入环境 - 登录授权，启用“匿名登录”；
- 进入环境 - 安全配置，将博客网址添加到“WEB安全域名”；
- 进入数据库，新建数据库集合，命名 talks，权限设置为“所有用户可读，仅管理员可写”。
扫码进入公众号，输入命名绑定：
1
| /bber bber,https://你的云函数 HTTP 访问地址/bb
|
部署云函数
- 新建云函数
函数名称 bber（可自定义），进入 函数代码 编辑，复制 index.js。
-
点击“文件 - 新建文件”，复制 package.json 代码丢入 package.json，点击 保存并安装依赖。
-
进入环境 - HTTP 访问服务，新建，路径与云函数名匹配，复制链接备用。
部署首页广播
- 新建云函数
bber-talk。
- 编辑
index.js，添加以下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
'use strict';
const tcb = require("@cloudbase/node-sdk");
const app = tcb.init({ env: tcb.SYMBOL_CURRENT_ENV })
const db = app.database()
const path = require('path')
const fs = require('fs')
exports.main = async (event, context) => {
const talksCollection = db.collection('talks')
const CreateTime = Date.now()
const resCount = await talksCollection.count()
let Count = resCount.total
await talksCollection.where({}).orderBy("date", "desc").limit(9).get().then((res) => {
console.log("总数："+Count)
let dataJson = {code: 0,count: Count,data: [],msg: `成功`}
for(var i=0;i<res.data.length;i++){
var obj = {
date: res.data[i].date,
content: res.data[i].content,
from: res.data[i].from
};
dataJson.data.push(obj);
}
let contentJson = JSON.stringify(dataJson,null,'\t')
console.log(contentJson)
let ws = fs.createWriteStream('/tmp/bber'+CreateTime+'.json', { autoClose: true });
ws.write(contentJson, 'utf8')
app.uploadFile({
cloudPath: 'json/bber.json',
fileContent: fs.createReadStream('/tmp/bber'+CreateTime+'.json')
}).then((res) => {
ws.on('finish', function () {
console.log('ok')
});
})
})
}
|
- 新建并编辑
package.json，添加以下内容：
1
2
3
4
5
6
7
8
| {
"name": "bber-talk",
"version": "1.0.0",
"main": "index.js",
"dependencies": {
"@cloudbase/node-sdk": "^2.4.4"
}
}
|
点击 保存并安装依赖。
- bber 云函数添加异步代码：
170 行左右，取消 index.js 的注释。
1
2
3
4
5
6
|
try {
await app.callFunction({name: 'bber-talk'}, { timeout: 300 })
} catch (e) {
console.log('开始异步转存json')
}
|
- 发一条哔哔。
进入云存储 - json–bber.json，详情 – 下载地址，得到类似下面格式地址：
1
| https://6262-bb-f5c0f-1252354806.tcb.qcloud.la/json/bber.json
|
问题
哔哔短路 400/404：
进入腾讯云云开发 - 数据库 - talks - 添加文档：
手动添加一条哔哔内容：
- 字段：content
- 类型：string
- 值：“test”
回到微信公众号，发送一条哔哔，就一切正常。
回到数据库，把 test 那条删掉，不然会出现 BUG。
前端
在 [root]/source/bb/ 目录创建 index.md，添加如下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| ---
title: 哔哔
date: 2022-6-27
---
<div id="speak"></div>
<script type="text/javascript" src="https://www.casecori.top/js/ispeak-bber-md.min.js" charset="utf-8" ></script>
<script>
ispeakBber
.init({
el: '#speak', // 容器选择器
name: 'CasecoRI', // 显示的昵称
envId: 'bber-6gqg8l6o2909aed6', // 环境 id
region: 'ap-shanghai', // 腾讯云地址，默认为上海
limit: 10, // 每次加载的条数，默认为 5
loadingImg: '/img/ld.gif',
avatar: 'https://cdn.casecori.top/gh/cystee/om/favicon.png',
fromColor:'rgb(245, 150, 170)', // 下方标签背景颜色 默认 rgb(245, 150, 170)
dbName:'talks' // 数据的名称，默认 talks，避免有人的命名不是这个，所以加入此配置字段。
})
.then(function() {
// 哔哔加载完成后的回调函数，你可以写你自己的功能
console.log('哔哔加载完成')
})
</script>
|
在 [root]/source/_data/ 目录创建 widget.yml，添加如下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| bottom:
- class_name: latestBB
name: 最新哔哔
icon: fas fa-bolt
html: |
<div class="swiper-container swiper-container-aside">
<div class="swiper-wrapper swiper-weapper-aside"></div>
</div>
<span>更多哔哔详见首页顶部。</span>
<script>
window.kkBBConfig = {
limit: 9,
blog:'/bb/',
api_url:
'https://6262-bber-6gqg8l6o2909aed6-1304849434.tcb.qcloud.la/json/bber.json'
}
</script>
<script src="https://cdn.casecori.top/npm/butterfly-bber-swiper/dist/index.min.js"></script>
|
按需修改，访问你的博客，大功告成。
微信
