Star
最新消息
-
2020.6.11
QRBTF React 组件发布！快在你的应用中引入 react-qrbtf 吧。访问项目。
-
2020.5.23
网站开源啦！点击访问 我们的 Github。期待你也来参与设计、开发！给个 Star 支持一下不？查看文章 QRBTF 开源啦！来写个二维码样式吧～。
+
2020.6.11
QRBTF React 组件发布！快在你的应用中引入 react-qrbtf 吧。 handleLink(e.target.href) } href='https://github.com/cpunisher/react-qrbtf' rel="noopener noreferrer" target="_blank">访问项目。
+
2020.5.23
网站开源啦！ handleLink(e.target.href) } href='https://github.com/ciaochaos/qrbtf' rel="noopener noreferrer" target="_blank">点击访问 我们的 Github。期待你也来参与设计、开发！给个 Star 支持一下不？查看文章 handleLink(e.target.href) } href='https://mp.weixin.qq.com/s/GFEMCWQu3e2qhTuBabnHmQ' rel="noopener noreferrer" target="_blank">QRBTF 开源啦！来写个二维码样式吧～。
2020.5.22
新增 C2 样式、下载计数（好像还不太稳定）、普通二维码上传、颜色选择、背景图片上传、输入提示、桌面端横向滚动提示。
为什么要做一个二维码生成器？
-
看这里，如何制作一个漂亮的二维码 这篇文章简要介绍了我们的初心与愿景。
+
看这里， handleLink(e.target.href) } href='https://mp.weixin.qq.com/s/_Oy9I9FqPXhfwN9IUhf6_g' rel="noopener noreferrer" target="_blank">如何制作一个漂亮的二维码 这篇文章简要介绍了我们的初心与愿景。
这个生成器的特别之处在哪里？
普通的二维码样式单一，不能与环境较好的融合。这一个生成器有着 丰富的参数化样式、基于 SVG 的二维码生成能力，在为我们提供精美样式的同时，不限制参数如数值、颜色、背景图片的选择，又因 SVG 有较好的拓展性，可以完美兼容矢量制图流程。
如何使用？
diff --git a/src/components/link/LinkButton.js b/src/components/link/LinkButton.js
index cff0741..6924dfa 100644
--- a/src/components/link/LinkButton.js
+++ b/src/components/link/LinkButton.js
@@ -1,9 +1,10 @@
import React from "react";
import PropTypes from 'prop-types'
import '../Qrcode.css';
+import {handleLink} from "../../utils/gaHelper";
const LinkButton = ({ href, value }) => (
-
+ handleLink(e.target.href) } href={href} rel="noopener noreferrer" target="_blank">
)
diff --git a/src/containers/app/InputText.js b/src/containers/app/InputText.js
index aa6c1aa..945337a 100644
--- a/src/containers/app/InputText.js
+++ b/src/containers/app/InputText.js
@@ -3,6 +3,7 @@ import {genQRInfo} from "../../actions";
import React, {useRef} from "react";
import {isPicture} from "../../utils/imageUtils";
import {decodeData} from "../../utils/qrcodeHandler";
+import {handleUpload} from "../../utils/gaHelper";
const InputText = ({dispatch}) => {
const textRef = useRef();
@@ -36,6 +37,7 @@ const InputText = ({dispatch}) => {
if (e.target.files.length > 0) {
const file = e.target.files[0];
if (isPicture(file)) {
+ handleUpload();
decodeData(file).then((res) => {
if (res) {
textRef.current.value = res.data;
diff --git a/src/containers/app/PartDownloadViewer.js b/src/containers/app/PartDownloadViewer.js
index d8a3d6f..337e230 100644
--- a/src/containers/app/PartDownloadViewer.js
+++ b/src/containers/app/PartDownloadViewer.js
@@ -3,6 +3,7 @@ import PartDownload from "../../components/app/PartDownload";
import {saveImg, saveSvg} from "../../utils/downloader";
import {getDownloadCount, increaseDownloadData, recordDownloadDetail} from "../../api/db";
import {getParamDetailedValue, outerHtml} from "../../utils/util";
+import {handleDownloadEvent} from "../../utils/gaHelper";
function saveDB(state, type, updateDownloadData) {
return new Promise(resolve => {
@@ -41,11 +42,13 @@ const mapStateToProps = (state, ownProps) => ({
onSvgDownload: () => {
saveSvg(state.value, outerHtml(state.selectedIndex));
saveDB(state, 'svg', ownProps.updateDownloadData);
+ handleDownloadEvent(state.value, 0);
},
onJpgDownload: () => {
return new Promise(resolve => {
saveImg(state.value, outerHtml(state.selectedIndex), 1500, 1500).then((res) => {
saveDB(state, 'jpg', ownProps.updateDownloadData).then(() => {
+ handleDownloadEvent(state.value, 1);
resolve(res)
});
});
diff --git a/src/containers/param/ParamUploadViewer.js b/src/containers/param/ParamUploadViewer.js
index 2e6e84d..688be1a 100644
--- a/src/containers/param/ParamUploadViewer.js
+++ b/src/containers/param/ParamUploadViewer.js
@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
import {changeParam} from "../../actions";
import ParamUpload from "../../components/param/ParamUpload";
import {isPicture, toBase64} from "../../utils/imageUtils";
+import {handleUpload} from "../../utils/gaHelper";
const mapStateToProps = (state, ownProps) => ({
rendererIndex: ownProps.rendererIndex,
@@ -15,6 +16,7 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
if (e.target.files.length > 0) {
const file = e.target.files[0];
if (isPicture(file)) {
+ handleUpload();
toBase64(file, 500, 500).then(res => {
dispatch(changeParam(ownProps.rendererIndex, ownProps.paramIndex, res))
})
diff --git a/src/utils/gaHelper.js b/src/utils/gaHelper.js
new file mode 100644
index 0000000..fc41e63
--- /dev/null
+++ b/src/utils/gaHelper.js
@@ -0,0 +1,41 @@
+import ReactGA from "react-ga";
+
+export function handleStyle(rendererName) {
+ ReactGA.event({
+ category: 'Style',
+ action: 'Switch',
+ label: rendererName
+ });
+}
+
+export function handleDownloadEvent(rendererName, value) {
+ ReactGA.event({
+ category: 'Style',
+ action: 'Download',
+ label: rendererName,
+ value: value
+ });
+}
+
+export function handleParam(rendererName, paramName) {
+ ReactGA.event({
+ category: 'Param',
+ action: rendererName,
+ label: paramName,
+ });
+}
+
+export function handleLink(link) {
+ ReactGA.event({
+ category: 'Link',
+ action: 'Click',
+ label: link,
+ });
+}
+
+export function handleUpload() {
+ ReactGA.event({
+ category: 'Upload',
+ action: 'Click',
+ });
+}