React blog project series 2 Article copy code, comments add emoticons
share function
Functional Requirements:
- There are three sharing buttons floating on the left side of the article details page
- The button icon becomes colored when the mouse is placed on it (you can use it
:hoverto implement it, so I won’t go into details) - Click the mouse on QQ or Weibo to jump to the sharing page
- Click the mouse on WeChat to display the QR code
- Responsive layout, floating on the left side of the mobile terminal becomes fixed at the bottom
QR code generation
For the WeChat sharing function, the user needs to scan the code. Here, the url needs to be generated as a QR code.
download dependencies
yarn add qrcodejs2
Component packaging
import QRCode from "qrcodejs2"
import {
useEffect } from "react"
const QrCode = ({
url }) => {
useEffect(() => {
creatQrCode()
})
const creatQrCode = () => {
let qrcode = new QRCode("qrcode", {
width: 108,
height: 108, // 高度
text: url, // 二维码内容
render: "canvas", // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
background: "#f0f", // 背景色
foreground: "#ff0", // 前景色
})
}
return (
<div id="qrcode"></div>
)
}
export default QrCode
function realization
import {
useState } from "react"
import './index.scss'
// 微信分享需要利用QrCode生成二维码供用户扫码
import QrCode from "../QrCode"
const Action = ({
item }) => {
// 当前需要分享的页面
const url = document.location.href
// 控制二维码的显示与隐藏
const [show, setShow] = useState(false)
const share = (type, item) => {
if (type === "qq") {
// qq分享
window.open( // 携带信息打开分享链接
"http://connect.qq.com/widget/shareqq/index.html?url=" +
encodeURIComponent(document.location.href) +
"&sharesource=qzone&title=" +
item.title +
"&summary= " +
item.bio
)
} else if (type === "weibo") {
// 微博分享
window.open(
"http://service.weibo.com/share/share.php?url=" +
encodeURIComponent(document.location.href) +
"?sharesource=weibo&title=" +
item.title
)
}
}
return (
<div className="article-action">
<div className="art-wrap flex flex-direction">
<div className="share">
<span>分享</span>
</div>
<div className="btn weibo" onClick={
() => share('weibo', item)} ></div >
<div className="btn qq" onClick={
() => share('qq', item)} ></div >
<div
className="btn wechat"
onClick={
() => share('wechat')}
onMouseEnter={
() => setShow(true)}
onMouseLeave={
() => setShow(false)}
></div >
</div >
{
show && (<QrCode className="code" url={
url}></QrCode>)} // 微信分享(需要扫码)
</div >
)
}
export default Action
responsive layout
The main idea is to @mediarewrite the style by judging that the current maximum width is 450px
@media (max-width: 450px) {
.article-action {
top: auto;
bottom: 0%;
left: -5px;
margin-left: 0;
z-index: 9999;
width: 100%;
height: 45px;
background: white;
.art-wrap {
height: 100%;
flex-direction: row;
justify-content: flex-end;
align-items: center;
.btn {
margin-right: 10px;
margin-bottom: 0;
}
}
}
}
Effect:
time conversion
export function parseTime (time, cFormat) {
if (arguments.length === 0) {
return null
}
// 没约定格式就返回年月日时分秒
const format = cFormat || "{y}-{m}-{d} {h}:{i}:{s}"
let date
if (typeof time === "object") {
date = time
} else {
if (("" + time).length === 10) time = parseInt(time) * 1000
// 因项目需要当时间错误或者空的时候显示 0000-00-00 00:00
if (time === 0 || !time) {
return "0000-00-00 00:00"
}
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay(),
}
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === "a") {
return ["日", "一", "二", "三", "四", "五", "六"][value]
}
if (result.length > 0 && value < 10) {
value = "0" + value
}
return value || 0
})
return time_str
}
export function getDateDiff (time) {
let minute = 1000 * 60
let hour = minute * 60
let day = hour * 24
let month = day * 30
let now = new Date().getTime()
time = new Date(time).getTime()
let diffValue = now - time
if (diffValue < 0) {
return
}
// 根据当前时间与给定时间的差值计算
let monthC = diffValue / month
let weekC = diffValue / (7 * day)
let dayC = diffValue / day
let hourC = diffValue / hour
let minC = diffValue / minute
if (monthC >= 1) {
return "" + parseInt(monthC) + "月前"
} else if (weekC >= 1) {
return "" + parseInt(weekC) + "周前"
} else if (dayC >= 1) {
return "" + parseInt(dayC) + "天前"
} else if (hourC >= 1) {
return "" + parseInt(hourC) + "小时前"
} else if (minC >= 1) {
return "" + parseInt(minC) + "分钟前"
} else return "刚刚"
}
Effect: (The returned data should be sorted from near to far according to time, and the back-end code will be changed later)
