├── docs
    ├── demo.md
    ├── release.md
    ├── typecho.md
    ├── .vuepress
    │   ├── components
    │   │   └── bbtalk.vue
    │   └── config.js
    ├── thanks.md
    ├── README.md
    └── quick-start.md
├── .gitignore
├── README.md
├── src
    ├── utils
    │   ├── index.js
    │   ├── urlToLink.js
    │   └── timeAgo.js
    ├── index.js
    └── view
    │   ├── index.js
    │   └── App.vue
├── SECURITY.md
├── .npmignore
├── .github
    ├── PULL_REQUEST_TEMPLATE.md
    └── workflows
    │   └── docs.yml
├── dist
    └── index.html
├── LICENSE
├── webpack.config.js
└── package.json


/docs/demo.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 示例页面
3 | ---
4 | # 这是个demo
5 | 
6 | <bbtalk />
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | Thumbs.db
3 | db.json
4 | *.log
5 | node_modules/
6 | .deploy*/
7 | docs/.vuepress/dist
8 | deploy.sh
9 | func/


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # BBtalk.JS
 2 | 
 3 | 详细教程请移步 [使用文档](https://bb.js.org/) 
 4 | 
 5 | ## 🎉特性
 6 | - 手机发送
 7 | - 方便引用
 8 | 
 9 | 
10 | 
11 | 


--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
1 | import timeAgo from './timeAgo'
2 | import urlToLink from './urlToLink'
3 | 
4 | export {
5 |     timeAgo,
6 |     urlToLink
7 | }


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import { render } from './view'
2 | 
3 | async function init (options = {}) {
4 |      
5 |      render(options) 
6 | }
7 | 
8 | export { init }


--------------------------------------------------------------------------------
/docs/release.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: 更新日志
 3 | ---
 4 | ### `v0.1.6` `2021.01.11`
 5 | * 新增 配置项`pageSize`默认`10`
 6 | 
 7 | ### `v0.1.5` `2021.01.07`
 8 | 
 9 | * 修改 再翻翻 按钮样式
10 | 
11 | 


--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
1 | # Security Policy
2 | 
3 | Thanks for reporting a a security problem.
4 | 
5 | To report a security issue, please [open an issue](https://github.com/BBtalkJS/BBtalk/issues/new)
6 | 


--------------------------------------------------------------------------------
/src/view/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | 
 4 | const render = (options = {}) => {
 5 |   Vue.prototype.$bbtalk = options
 6 |   return new Vue({
 7 |     render: h => h(App)
 8 |   }).$mount(options.el || '#bbtalk')
 9 | 
10 | }
11 | 
12 | export {
13 |   render
14 | }
15 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | *.lock
 2 | *.log
 3 | .DS_Store
 4 | .babelrc
 5 | .editorconfig
 6 | .eslintignore
 7 | .eslintrc.js
 8 | .github
 9 | .gitignore
10 | .npmignore
11 | _config.js
12 | dist/*.txt
13 | dist/index.html
14 | docs
15 | node_modules
16 | public
17 | src
18 | stats.json
19 | webpack.config.js
20 | deploy.sh


--------------------------------------------------------------------------------
/docs/typecho.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: 在 HEXO 中使用
 3 | ---
 4 | 
 5 | :::tip Cuteen 
 6 | Cuteen3  [Typecho-Cuteen3 主题哔哔适配](https://www.heson10.com/posts/58339.html)
 7 | 
 8 | Cuteen4 [Typecho Cuteen4 哔哔页面适配](https://www.heson10.com/posts/57231.html)
 9 | ::: 
10 | > 如需其他主题适配，请移步[issues](https://github.com/BBtalkJS/BBtalk/issues/new) 


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | # What kind of change does this PR introduce? (check at least one)
 2 | 
 3 | - [ ] Bugfix
 4 | - [ ] Feature
 5 | - [ ] Code style update
 6 | - [ ] Other, please describe:
 7 | 
 8 | Does this PR introduce a breaking change? (check one)
 9 | 
10 | - [ ] Yes
11 | - [ ] No
12 | 
13 | If yes, please describe the impact and migration path for existing applications:
14 | 
15 | Other information:
16 | 


--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <title>bbtalk</title>
 6 | </head>
 7 | 
 8 | <body>
 9 | 
10 |   <div id="bbtalk"></div>
11 |   <script src="./bbtalk.js"></script>
12 |   <!--
13 | <script src="https://cdn.jsdelivr.net/npm/bbtalk@0.1.3/dist/bbtalk.min.js"></script>
14 | 
15 |   -->
16 |   <script>
17 |     bbtalk.init({
18 |       appId: "0KzOX4vC7Jsk6vzUGNeEiUaI-gzGzoHsz",
19 |       appKey: "HwCiWuxfpvKiLm4teCUgTIba",
20 |       serverURLs: 'https://bbapi.heson10.com',
21 |       pageSize: 5
22 |     })
23 |   </script>
24 | 
25 | </body>
26 | 
27 | </html>


--------------------------------------------------------------------------------
/src/utils/urlToLink.js:
--------------------------------------------------------------------------------
 1 | 
 2 |   function urlToLink(str) {
 3 |     //增加发图片功能
 4 |     var re = /\bhttps?:\/\/(?!\S+(?:jpe?g|png|bmp|gif|webp|gif))\S+/g;
 5 |     var re_forpic = /\bhttps?:\/\/.*?(\.gif|\.jpeg|\.png|\.jpg|\.bmp|\.webp)/g;
 6 |     str = str.replace(re, function (website) {
 7 |       return "<a href='" + website + "' target='_blank'> <i class='iconfont icon-lianjie-copy'></i>链接 </a>";
 8 |     });
 9 |     str = str.replace(re_forpic, function (imgurl) {
10 |       return "<img src='" + imgurl + "'  /> ";
11 |     });
12 |     return str;
13 |   }
14 | 
15 | export default urlToLink


--------------------------------------------------------------------------------
/.github/workflows/docs.yml:
--------------------------------------------------------------------------------
 1 | name: Docs
 2 | 
 3 | on: [push]
 4 | 
 5 | jobs:
 6 |   publish-docs:
 7 |     runs-on: ubuntu-latest
 8 |     steps:
 9 |       - name: Checkout
10 |         uses: actions/checkout@master
11 | 
12 | 
13 |       - name: vuepress-deploy
14 |         uses: jenkey2011/vuepress-deploy@ecff9f2
15 |         env:
16 |           ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
17 |           TARGET_REPO: BBtalkJS/BBtalkJS.github.io
18 |           TARGET_BRANCH: master
19 |           BUILD_SCRIPT: yarn && yarn docs:build
20 |           BUILD_DIR: docs/.vuepress/dist
21 |           CNAME: bb.js.org
22 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/bbtalk.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="bbtalk"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   mounted() {
 8 |     function addScript(url) {
 9 |       var s = document.createElement("script");
10 |       url.indexOf("appId") == -1 ? (s.src = url) : (s.innerHTML = url);
11 |       document.body.appendChild(s);
12 |     }
13 |     addScript('https://cdn.jsdelivr.net/npm/bbtalk@0.1.5/dist/bbtalk.min.js')
14 |     addScript(`
15 |     bbtalk.init({
16 |       appId: "0KzOX4vC7Jsk6vzUGNeEiUaI-gzGzoHsz",
17 |       appKey: "HwCiWuxfpvKiLm4teCUgTIba",
18 |       serverURLs: 'https://bbapi.heson10.com'
19 | 
20 |     })
21 |     `);
22 |   }
23 | };
24 | </script>


--------------------------------------------------------------------------------
/docs/thanks.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: 鸣谢
 3 | ---
 4 | 
 5 | ## BBtalk 的前世今生
 6 | 
 7 | :::tip 按时间顺序
 8 | [Github项目：废话胶囊](https://github.com/daibor/nonsense.fun) 最初项目地址
 9 | 
10 | [保卫表达：用后端 BaaS 快速搭建专属无点赞评论版微博——b言b语](https://sspai.com/post/60024) 最初版
11 | 
12 | [《哔哔点啥，换个舒服的姿势》](https://bearye.cn/archives/488) 公众号单用户发文源码
13 | 
14 | [「哔哔点啥」微信公众号](https://immmmm.com/bb-by-wechat/) 二次折腾，变为公众号多用户发布。
15 | 
16 | [Hexo-bb 插件，通过手机微信随时随地发表碎片化思想](https://www.heson10.com/posts/25624.html) 哔哔 HEXO 版本插件出炉。
17 | 
18 | [黑石哔哔支持微信直发图片功能](https://www.heson10.com/posts/61220.html) 再次折腾，微信公众号能直接发图。
19 | 
20 | [「哔哔点啥」微信公众号 2.0](https://immmmm.com/bb-by-wechat-pro/) 哔哔「腾讯 CloudBase」版。
21 | 
22 | :::
23 | 
24 | > 收录一切关于哔哔的文章，欢迎[PR](https://github.com/BBtalkJS/BBtalk/edit/main/docs/thanks.md)
25 | 


--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | home: true
 3 | heroImage: https://7.dusays.com/2021/01/06/fa6c411a0c660.png
 4 | actionText: 快速上手 →
 5 | actionLink: /quick-start/
 6 | features:
 7 | - title: 📲随时发送
 8 |   details: 拿出手机即可发送碎片化思想，并同步博客显示。
 9 | - title: 🤞使用方便
10 |   details: 简略的 html 片段即可实现，且理论上支持任何框架或单独页面。
11 | - title: 🎁操作简单
12 |   details: 微信端直接发送文字、表情以及图片，并支持外链图片。
13 | footer: MIT Licensed | Copyright © 2020-2021 Heson
14 | sidebar: false
15 | ---
16 | <center>
17 | 
18 | 项目地址：[https://github.com/BBtalkJS/BBtalk](https://github.com/BBtalkJS/BBtalk)
19 | 
20 | ![stars](https://img.shields.io/github/stars/BBtalkJS/BBtalk)
21 | ![down](https://img.shields.io/npm/dm/bbtalk.svg)
22 | ![npm](https://img.shields.io/npm/v/bbtalk.svg)
23 | ![language](https://img.shields.io/badge/language-JavaScript-red)
24 | 
25 | </center>
26 | 


--------------------------------------------------------------------------------
/docs/.vuepress/config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   title: 'BBtalk 中文文档',
 3 |   description: '利用手机微信随时随地发布碎片化思想，基于 Leancloud。',
 4 |   head: [ // 注入到当前页面的 HTML <head> 中的标签
 5 |     //  ['link', { rel: 'icon', href: '/logo.jpg' }],  增加一个自定义的 favicon(网页标签的图标)
 6 |   ],
 7 |   markdown: {
 8 |     lineNumbers: false // 代码块显示行号
 9 |   },
10 |   themeConfig: {
11 |     lastUpdated: true,
12 |     nav: [ // 导航栏配置
13 |       { text: '更新日志', link: '/release' },
14 |       { text: '鸣谢', link: '/thanks' },
15 |       { text: '示例页面', link: 'https://www.heson10.com/bb/' }
16 |     ],
17 |     sidebarDepth:3,
18 |     editLinks: true,
19 |     editLinkText: '在 GitHub 上编辑此页',
20 |     sidebar: [
21 |       ['/quick-start', '快速上手']
22 | 
23 |     ],
24 |     logo: 'https://7.dusays.com/2021/01/06/fa6c411a0c660.png',
25 |     // 假定是 GitHub. 同时也可以是一个完整的 GitLab URL
26 |     repo: 'BBtalkJS/BBtalk',
27 |     docsDir: 'docs',
28 |     // 假如文档放在一个特定的分支下：
29 |     docsBranch: 'main'
30 |     // 默认是 false, 设置为 true 来启用
31 |   }
32 | };


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Heson
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const VueLoaderPlugin = require('vue-loader/lib/plugin')
 2 | const webpack = require('webpack')
 3 | const path = require('path');
 4 | const version = require('./package.json').version
 5 | // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; 
 6 | // const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 7 | const banner =
 8 |   'BBtalk v' + version + '\n' +
 9 |   '(c) 2020-' + new Date().getFullYear() + ' Heson\n' +
10 |   'Released under the MIT License.\n' +
11 |   'Last Update: ' + (new Date()).toLocaleString()
12 | 
13 | 
14 | module.exports = {
15 |   module: {
16 |     rules: [
17 |       { test: /\.vue$/, loader: 'vue-loader' },
18 |       { test: /\.css$/, use: ['style-loader', 'css-loader'] }
19 |     ]
20 |   },
21 |   entry: './src/index.js',
22 |   output: {
23 |     filename: 'bbtalk.js',
24 |     path: path.resolve(__dirname, 'dist'),
25 |     library: 'bbtalk'
26 |   },
27 |   devServer: {
28 |     contentBase: path.join(__dirname, "dist"),
29 |     compress: true,
30 |     port: 9000
31 |   },
32 |   plugins: [
33 |     new webpack.BannerPlugin(banner),
34 |     new VueLoaderPlugin()
35 |     // new BundleAnalyzerPlugin(),
36 | 
37 |   ]
38 | };
39 | 
40 | 
41 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bbtalk",
 3 |   "version": "0.1.6",
 4 |   "description": "通过微信发布碎片化思想同步至博客。",
 5 |   "main": "./dist/bbtalk.js",
 6 |   "scripts": {
 7 |     "dev": "webpack-dev-server",
 8 |     "start": "webpack-dev-server --open",
 9 |     "test": "echo \"Error: no test specified\" && exit 1",
10 |     "build": "webpack",
11 |     "docs:dev": "vuepress dev docs",
12 |     "docs:build": "vuepress build docs"
13 |   },
14 |   "keywords": [],
15 |   "author": "Heson",
16 |   "license": "MIT",
17 |   "devDependencies": {
18 |     "css-loader": "^5.0.1",
19 |     "style-loader": "^2.0.0",
20 |     "uglifyjs-webpack-plugin": "^2.2.0",
21 |     "vue-loader": "^15.9.6",
22 |     "vue-template-compiler": "^2.6.12",
23 |     "vuepress": "^1.7.1",
24 |     "vuepress-theme-reco": "^1.6.1",
25 |     "webpack": "^4.44.1",
26 |     "webpack-bundle-analyzer": "^4.3.0",
27 |     "webpack-cli": "^3.3.12",
28 |     "webpack-dev-server": "^3.11.1"
29 |   },
30 |   "dependencies": {
31 |     "leancloud-storage": "^4.5.3",
32 |     "vue": "^2.6.11"
33 |   },
34 |   "repository": "git+https://github.com/BBtalkJS/BBtalk.git",
35 |   "bugs": {
36 |     "url": "https://github.com/BBtalkJS/BBtalk/issues"
37 |   },
38 |   "homepage": "https://github.com/BBtalkJS/BBtalk#readme"
39 | }
40 | 


--------------------------------------------------------------------------------
/src/utils/timeAgo.js:
--------------------------------------------------------------------------------
 1 |  //友好地显示时间
 2 |  function timeAgo(dateTimeStamp) { 
 3 |      
 4 |     var result = '' 
 5 |     var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示 
 6 |     var hour = minute * 60; 
 7 |     var day = hour * 24; 
 8 |     var week = day * 7; 
 9 |     var month = day * 30; 
10 |     var now = new Date().getTime(); //获取当前时间毫秒 
11 |     var diffValue = now - dateTimeStamp; //时间差 
12 |     if (diffValue < 0) { 
13 |         return; 
14 |     } 
15 |     var minC = diffValue / minute; //计算时间差的分，时，天，周，月 
16 |     var hourC = diffValue / hour; 
17 |     var dayC = diffValue / day; 
18 |     var weekC = diffValue / week; 
19 |     var monthC = diffValue / month; 
20 |     if (monthC >= 1 && monthC <= 3) { 
21 |         result = " " + parseInt(monthC) + " 月前" 
22 |     } else if (weekC >= 1 && weekC <= 3) { 
23 |         result = " " + parseInt(weekC) + " 周前" 
24 |     } else if (dayC >= 1 && dayC <= 6) { 
25 |         result = " " + parseInt(dayC) + " 天前" 
26 |     } else if (hourC >= 1 && hourC <= 23) { 
27 |         result = " " + parseInt(hourC) + " 小时前" 
28 |     } else if (minC >= 1 && minC <= 59) { 
29 |         result = " " + parseInt(minC) + " 分钟前" 
30 |     } else if (diffValue >= 0 && diffValue <= minute) { 
31 |         result = "刚刚" 
32 |     } else { 
33 |         var datetime = new Date(); 
34 |         datetime.setTime(dateTimeStamp); 
35 |         var Nmonth = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1; 
36 |         var Ndate = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate(); 
37 |         result = Nmonth + "-" + Ndate 
38 |     } 
39 |     return result; 
40 | } 
41 | 
42 | 
43 | export default timeAgo


--------------------------------------------------------------------------------
/docs/quick-start.md:
--------------------------------------------------------------------------------
 1 | ## 📃前言
 2 | :::tip 什么是BBtalk？
 3 | BBtalk 利用手机微信发布碎片化思想同步至博客，基于 Leancloud。
 4 | :::
 5 | 
 6 | ### 🎁特性
 7 | - 支持微信端文字及图片消息发送
 8 | 
 9 | > 当前为初步版本，后续功能请见[开发计划](/quick-start.html#💡开发计划)
10 | ## 🚀快速使用
11 | ### 在 Hexo Volantis 主题使用
12 | Volantis 目前支持 BBtalk ，请查看[hexo-theme-volantis/_config.yml](https://github.com/volantis-x/hexo-theme-volantis/blob/master/_config.yml#L618-L623)
13 | ```yml
14 |   # BBtalk https://bb.js.org
15 |   bbtalk:
16 |     js: https://cdn.jsdelivr.net/npm/bbtalk@0.1.5/dist/bbtalk.min.js # BBtalk.js
17 |     appId: xxxxxx # your appID
18 |     appKey: xxxxx # your appKEY
19 |     serverURLs: https://xxxxxx # Request Api 域名
20 | ```
21 | 
22 | ## 🎨开始使用
23 | ### Leancloud 创建存储空间
24 | :::warning 提示
25 | 
26 | **🌍 建议使用国际版的 LeanCloud**
27 | 
28 | 因为国际版的 LeanCloud 不需要绑定**备案域名**，所以推荐使用国际版。
29 | :::
30 | 
31 | 1. 前往 [LeanCloud 国际版](https://LeanCloud.app/)，注册账号。
32 | 2. 注册完成之后根据 LeanCloud 的提示绑定手机号和邮箱。
33 | 3. 绑定完成之后点击`创建应用`，应用名称随意，接着在`存储`→`结构化数据`中创建 `class`，命名为 `content`。
34 | 4. 点击刚刚创建的`content` Class，点击`添加列`并创建名称为`content`的`列`。
35 | 5. 在菜单栏中找到`设置`→ `应用 keys`，记下来 `AppID` 、 `MasterKey` 和`Request 域名（api）` ，各个数据一般为以下形式：
36 |     ```html
37 |     AppID: Y5IDwC47czJFXXXXXXSlU44Y-MdYXbMMI
38 |     MasterKey: qgrJ3nRwXXXXXXwwnVfj0uaQ
39 |     Request 域名: https://AppID前八位.api.lncldglobal.com
40 |     ```
41 | ### 关注微信公众号
42 |   ![黑石哔哔](https://picup.heson10.com/img/upyun/2020/10/bbbbb.png)
43 |   
44 |   按照公众号的提示的命令进行绑定：
45 | 
46 |   ```
47 |   //leancloud:您的AppID,您的MasterKey,https://您的 Request 域名
48 |   ```
49 |   > `黑石哔哔`已支持绑定至腾讯云cloudbase，通过`//tcb:apiKey,apiUrl`进行绑定，前端页面正在重构，敬请期待。
50 | ### CDN引用
51 | ::: tip 提示
52 | 如果您使用的博客主题不支持 BBtalk，并且您不知道如何引入 BBtalk，您可以[在 Github 提交适配请求](https://github.com/BBtalkJS/BBtalk/issues/new)
53 | :::
54 | ```html
55 | <!-- 存放哔哔的容器 -->
56 | <div id="bbtalk"></div>
57 | <!-- 引用 bbtalk -->
58 | <script src="https://cdn.jsdelivr.net/npm/bbtalk@0.1.5/dist/bbtalk.min.js"></script>
59 | <script>
60 | bbtalk.init({
61 |   appId: "Y5IDwC47czJFXXXXXXSlU44Y-MdYXbMMI",
62 |   appKey: "qgrJ3nRwXXXXXXwwnVfj0uaQ",
63 |   serverURLs: 'https://AppID前八位.api.lncldglobal.com'
64 | })
65 | </script>
66 | ```
67 | > 建议使用 CDN 引入 BBtalk 的用户在链接地址上锁定版本，以免将来 BBtalk 升级时受到非兼容性更新的影响。
68 | 
69 | ## 🔧可选配置项
70 | ### el
71 | 类型:`String`
72 | 
73 | 默认值:`bbtalk`
74 | 
75 | 必要性: `false`
76 | 
77 | > BBtalk 的初始化挂载器。
78 | 
79 | ### pageSize
80 | 类型:`Number`
81 | 
82 | 默认值:`10`
83 | 
84 | 必要性:`false`
85 | 
86 | > 每页显示哔哔条数。
87 | 
88 | ## 💡开发计划
89 | BBtalk 现在仍处于开发阶段，这里有一些目前还不支持、但已经在计划中的特性：
90 | 
91 | - BBtalk 样式优化及多样化可变配置
92 | - 支持微信表情转义
93 | - 支持Markdown 
94 | - 存储基于`腾讯CloudBase`云数据库（2.0版本）
95 | > 需更多功能支持，请[提出需求](https://github.com/BBtalkJS/BBtalk/issues/new)
96 | 
97 | 
98 | 


--------------------------------------------------------------------------------
/src/view/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <main id="app">
  3 |     <p class="tip">共计发送 {{ count }} 条说说</p>
  4 |     <div class="timenode" v-for="item in contents" v-cloak>
  5 |       <div class="meta">
  6 |         <p>
  7 |           <time v-bind:datetime="item.attributes.time">{{
  8 |             item.attributes.time
  9 |           }}</time>
 10 |         </p>
 11 |       </div>
 12 |       <div class="body">
 13 |         <p v-html="item.attributes.content"></p>
 14 |       </div>
 15 |     </div>
 16 |     <div class="load-ctn">
 17 |       <a class="btn" v-on:click="loadMore" v-if="contents" v-cloak>再翻翻</a>
 18 |       <p class="tip" v-else>别急，加载呢</p>
 19 |     </div>
 20 |   </main>
 21 | </template>
 22 | 
 23 | 
 24 | <script>
 25 | import { urlToLink, timeAgo } from "../utils";
 26 | const AV = require("leancloud-storage");
 27 | var { Query } = AV;
 28 | var query;
 29 | export default {
 30 |   data() {
 31 |     return {
 32 |       count: 0,
 33 |       page: 0,
 34 |       contents: [],
 35 |     };
 36 |   },
 37 |   methods: {
 38 |     getContent(page) {
 39 |       if (this.contents.length == 0) {
 40 |         AV.init({
 41 |           appId: this.$bbtalk.appId,
 42 |           appKey: this.$bbtalk.appKey,
 43 |           serverURLs: this.$bbtalk.serverURLs,
 44 |         });
 45 | 
 46 |         query = new AV.Query("content");
 47 |       }
 48 |       var pageSize = this.$bbtalk.pageSize
 49 |       const _this = this;
 50 | 
 51 |       query
 52 |         .descending("createdAt")
 53 |         .skip(page * (pageSize || 10))
 54 |         .limit(pageSize || 10)
 55 |         .find()
 56 |         .then(
 57 |           function (res) {
 58 |             if (res.length == 0) {
 59 |               alert("之前好久没哔哔过了");
 60 |             } else {
 61 |               let resC = res;
 62 |               resC.forEach((i) => {
 63 |                 let dateTmp = new Date(i.createdAt);
 64 |                 i.attributes.time = timeAgo(dateTmp);
 65 |                 i.attributes.content = urlToLink(i.attributes.content);
 66 |                 _this.contents.push(i);
 67 |               });
 68 |             }
 69 |           },
 70 |           function (error) {
 71 |             console.log(error);
 72 |           }
 73 |         );
 74 | 
 75 |       query.count().then(
 76 |         function (count) {
 77 |           _this.count = count;
 78 |         },
 79 |         function (error) {
 80 |           console.log(error);
 81 |         }
 82 |       );
 83 |     },
 84 |     loadMore() {
 85 |       this.getContent(++this.page);
 86 |     },
 87 |   },
 88 |   mounted() {
 89 |     this.getContent(this.page);
 90 |   },
 91 | };
 92 | </script>
 93 | 
 94 | 
 95 | <style>
 96 | @font-face {
 97 |   font-family: "iconfont";
 98 |   src: url("//at.alicdn.com/t/font_1755564_z4mhxbw13mq.eot?t=1586882866168");
 99 |   /* IE9 */
100 |   src: url("//at.alicdn.com/t/font_1755564_z4mhxbw13mq.eot?t=1586882866168#iefix")
101 |       format("embedded-opentype"),
102 |     /* IE6-IE8 */
103 |       url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALcAAsAAAAAB2gAAAKPAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCfgqCUII8ATYCJAMMCwgABCAFhG0HQBuEBsiuMRkynL4YFCHtLKs4b+k7/80U8DwHIB6+xtr7u3vniDZI6tmnkyDS8NC5iFgJlE7pTPcO8e5b+803aYQy8YtH1JPKyZzY3ttb1EonioVGSBAiRJp4JV9cFppCxLpe2z8sUs37O4QEDFRM0lFeAw4XN6bQPG06zTG8DRwHFOBeGEVWIjE+mP8wduVFPCbQNK4ktN8/OgFJhbEqEFemLkEyFVcUVqoL1ZKDRbyIqafb9AA8+9+PX41IklQyY+PBSZ8KnR+9iBx0OxZcp8PxvGDHyFgACnFY6j8QCfMLIppKPmoCrGtW8OG/y0eufLX/8AiJqDKa22AGWpMzUth6p6aARySQQRUUL4AnSBmuyvIwPdbz21OX5ybO5duOJifaLl6cvkrd1HR7kWEy6yikff29PvgO17V/Tf/9f/oN3PDqz22a719IYlZJHQetpLY08MV6fwFDrF0B6F4XyB3/FyEEnZnU2XGtVwHvpxtA1d6pftKB4AcoWo4U1QQbiiy35Xow27whbwK2NNFlhAc99zeOtM4S6ikFQ1IzhqxuglAoC6ho2UBV3Raa5g0cbxnCRURpYM4pQOh3h6TXG7J+j4RCeULFqFdU9UcETYfRdGHLVJjpHk6SIBXlTTQV5mmWS6SD1jHSVx2JJ1U+a4p4YKawvrSSLQ2QR3yMLcGa3hBCQ40zF/vBc+Q4DH3OLFJExRDCb64un5S9qaIwF9L2cEQiEBWSbUImBePR3PFCOvf5MUS3yiHhNR0VySmEC5jTo7qKWgvCgN5r1XEtrwTW6BoEQYM0HONC/cBLHDPPIL98noUohAqjR7uvWVV1HlVbfWV+o/t8J6DJOJ4jRY6idmVKnmVS1q8tK8zfBAAA")
104 |       format("woff2"),
105 |     url("//at.alicdn.com/t/font_1755564_z4mhxbw13mq.woff?t=1586882866168")
106 |       format("woff"),
107 |     url("//at.alicdn.com/t/font_1755564_z4mhxbw13mq.ttf?t=1586882866168")
108 |       format("truetype"),
109 |     /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
110 |       url("//at.alicdn.com/t/font_1755564_z4mhxbw13mq.svg?t=1586882866168#iconfont")
111 |       format("svg");
112 |   /* iOS 4.1- */
113 | }
114 | #app img {
115 |   display: block;
116 | }
117 | .iconfont {
118 |   font-family: "iconfont" !important;
119 |   font-size: 16px;
120 |   font-style: normal;
121 |   -webkit-font-smoothing: antialiased;
122 |   -moz-osx-font-smoothing: grayscale;
123 | }
124 | 
125 | .icon-lianjie:before {
126 |   content: "\e6a3";
127 | }
128 | 
129 | .icon-lianjie-copy:before {
130 |   content: "\e6a4";
131 | }
132 | 
133 | /* bb样式 */
134 | div.timenode {
135 |   position: relative;
136 | }
137 | div.timenode:before,
138 | div.timenode:after {
139 |   content: "";
140 |   z-index: 1;
141 |   position: absolute;
142 |   background: rgba(68, 215, 182, 0.5);
143 |   width: 2px;
144 |   left: 7px;
145 | }
146 | div.timenode:before {
147 |   top: 0px;
148 |   height: 6px;
149 | }
150 | div.timenode:after {
151 |   top: 26px;
152 |   height: calc(100% - 26px);
153 | }
154 | div.timenode:last-child:after {
155 |   height: calc(100% - 26px - 16px);
156 |   border-bottom-left-radius: 2px;
157 |   border-bottom-right-radius: 2px;
158 | }
159 | div.timenode .meta,
160 | div.timenode .body {
161 |   max-width: calc(100% - 24px);
162 | }
163 | div.timenode .meta {
164 |   position: relative;
165 |   color: var(--color-meta);
166 |   font-size: 0.875rem;
167 |   line-height: 32px;
168 |   height: 32px;
169 | }
170 | div.timenode .meta:before,
171 | div.timenode .meta:after {
172 |   content: "";
173 |   position: absolute;
174 |   top: 8px;
175 |   z-index: 2;
176 | }
177 | div.timenode .meta:before {
178 |   background: rgba(68, 215, 182, 0.5);
179 |   width: 16px;
180 |   height: 16px;
181 |   border-radius: 8px;
182 | }
183 | div.timenode .meta:after {
184 |   background: #44d7b6;
185 |   margin-left: 2px;
186 |   margin-top: 2px;
187 |   width: 12px;
188 |   height: 12px;
189 |   border-radius: 6px;
190 |   transform: scale(0.5);
191 |   transition: all 0.28s ease;
192 |   -moz-transition: all 0.28s ease;
193 |   -webkit-transition: all 0.28s ease;
194 |   -o-transition: all 0.28s ease;
195 | }
196 | div.timenode .meta p {
197 |   font-weight: bold;
198 |   margin: 0 0 0 24px;
199 | }
200 | div.timenode .body {
201 |   margin: 4px 0 16px 24px;
202 |   padding: 16px;
203 |   border-radius: 8px;
204 |   background: var(--color-block);
205 |   display: inline-block;
206 | }
207 | div.timenode .body:empty {
208 |   display: none;
209 | }
210 | div.timenode .body > *:first-child {
211 |   margin-top: 0.25em;
212 | }
213 | div.timenode .body > *:last-child {
214 |   margin-bottom: 0.25em;
215 | }
216 | div.timenode .body .highlight {
217 |   border: 1px solid #e4e4e4;
218 | }
219 | div.timenode:hover .meta {
220 |   color: var(--color-text);
221 | }
222 | div.timenode:hover .meta:before {
223 |   background: rgba(255, 87, 34, 0.5);
224 | }
225 | div.timenode:hover .meta:after {
226 |   background: #ff5722;
227 |   transform: scale(1);
228 | }
229 | div.timenode .body {
230 |   margin: 0 0 0 24px;
231 |   padding: 16px;
232 |   border-radius: 8px;
233 |   background: #f6f6f6;
234 |   display: inline-block;
235 | }
236 | #app .load-ctn a{padding:8px 18px;background:#eaeded;border-radius:6px;color:#333}
237 | #app .load-ctn  {padding-top:30px;cursor:pointer;}
238 | </style>


--------------------------------------------------------------------------------