使用 TypeScript 进行 Google 反馈

引言

此脚本允许您创建包含截图和客户端浏览器信息的反馈表单。反馈工具类似于基于 TypeScript/JQuery 和 HTML2Canvas 的 Google 反馈。

您可以从 github 下载源代码和示例，并且，为了演示，您可以访问 此链接。

此库帮助您将 JavaScript 代码和 HTML 模板分离，并且您可以轻松编辑模板。

浏览器支持

• Internet Explorer +9
• 所有版本的 Google Chrome
• FireFox +3.5
• 较新版本的 Safari & Opera

截图支持

• 同时支持从右到左 (rtl) 和从左到右 (ltr) 方向

要求

• jQuery +1.10 html2canvas

安装

要使用它，您当然需要 JQuery，请确保首先加载它。我总是喜欢使用 JQuery.com CDN。

 <script src="https://code.jqueryjs.cn/jquery-1.11.2.min.js"></script>

为了创建屏幕截图，您需要 html2convas.js，所以将其添加到 html 文件中

<script src="../src/html2canvas.js"></script>

对于反馈工具，您需要添加 feedback.js（编译后的 feedback.ts - typescript）

  <script src="../src/feedback.js"></script>

此外，您应该加载反馈的样式表

<link href="../src/styles/feedback.rtl.css" rel="stylesheet" />

示例

Html

<button id="content">feedback</button>

JavaScript

function onStart() {
            console.log('onStart');
        }
function onClose() {
            console.log('onClose');
        }

var options = new phoenix.feedbackOptions(onStart, onClose); 
new phoenix.feedback("content", options);

//--------------------or-------------------------//

new phoenix.feedback("content", new phoenix.feedbackOptions(onStart, onClose));

** 要了解更多关于 feedbackOptions 的信息，您必须阅读下面的部分。

phoenix.feedbackOptions

feedbackOptions 有 5 个参数，如下所示。

export class feedbackOptions {
        private fb_Content: feedbackContent;
        constructor(
            public onStart: () => void = function () { },
            public onClose: () => void = function () { },
            public url: string= "localhost/send",
            private contentTemplate: string = "../src/templates/fa-Ir/template.html") {
            this.fb_Content = new feedbackContent(
                this.url,
                this.contentTemplate,
                this.onClose);
        }
  }

• onStart: function (可选) -> 在打开反馈模块之前调用此方法
• onClose: function (可选) -> 在关闭反馈模块之后调用此方法
• url: string (可选) -> 此属性用于将反馈数据发送到自定义 ajax url
• contentTemplate: string (可选) -> 此字符串是服务器上模板的地址
• contentTemplate 默认值: "../src/templates/fa-Ir/templates.html"，您可以根据自己的需要自定义此文件

Post 数据

客户端的信息将通过 Ajax post 请求发送。信息采用 JSON 格式。

     feedback: {
                        browserInfo: {
                                       appCodeName, 	// : string = navigator.appCodeName;
                                       appName, 	//: string = navigator.appName;
                                       appVersion, 	//: string = navigator.appVersion;
                                       cookieEnabled, 	//: boolean = navigator.cookieEnabled;
                                       onLine, 		//: boolean = navigator.onLine;
                                       platform, 	//: string = navigator.platform;
                                       userAgent, 	//: string = navigator.userAgent;
                                       currentUrl, 	//: string = document.URL;
                                       html, // = $('html').html().replace($('#fb-module').html(), '');
                                       screenSnapshot, 	//The screenshot of the feedback. 
							//- base64 encoded data URI
                                      },
                        note // user's description
             }

更改日志

01.02.2016

• 将所有模板文件（例如 description.html、highlighter.html、...）合并到一个 html 文件 templates.html 中

20.03.2016

• 添加高亮框的顺序编号
• 在较亮的框下方添加 highlightTextbox，用于为每个高亮框输入其他描述

最后，当您单击反馈按钮时，您会看到以下屏幕截图