jQuery 實現微信掃碼添加聯系人

1.1 預期效果

根據報表表格中的信息生成二維碼名片，在手機通訊錄中掃描二維碼之後可以快速将聯系人添加到通訊錄中。

示例二維碼如下圖所示：

掃碼上面的二維碼添加聯系人的效果如下圖所示：

1.2 實現思路

實現此功能需要 jQuery 來獲取元素，報表設計時需要引入外部 JS 和 CSS 文件，生成二維碼是通過添加模板預覽 JS 事件實現的。

2.1 報表設計

新建模板，設計報表樣式，如像下圖所示：

B1~B8 單元格用於填寫聯系人的名片信息，将根據 B1~B8 單元格的内容生成二維碼。

C1 單元格用於顯示生成的二維碼，需要添加文本：<div class="qrcode" id="qrcode"></div>

2.2 引入 JS 和 CSS 文件

1）點擊下載 JS 文件：qrcode.js 

2）點擊下載 CSS 文件：qrcode.css

3）将下載好的兩個文件放置到：%FR_HOME%\webapps\webroot\help\css\路徑下，如下圖所示：

注：二維碼的大小在 CSS 文件中設置。

4）設計器菜單欄點擊模板>模板Web屬性，如下圖步驟引入 CSS 文件。

5）設計器菜單欄點擊模板>模板Web屬性，如下圖步驟引入 JS 文件。

2.3 生成二維碼

1）設計器菜單欄點擊模板>模板Web屬性，選擇爲該模板單獨設置，添加一個加載結束事件。如下圖所示：

JavaScript 代碼如下：

注：代碼中對應的值需要通過 jQuery 選擇器選取，詳細内容可以參考相關資料：jQuery 選擇器，如下圖所示

 var name, company, title, address, mobile, email, web, desc;
 $(function() {
name = "FN:" + $("#r-0-0 > td:nth-child(2)").text() + "\n";
company = "ORG:" + $("#r-1-0 > td").last().text() + "\n";
title = "TITLE:" + $("#r-2-0 > td").last().text() + "\n";
address = "WORK:" + $("#r-3-0 > td").last().text() + "\n";
mobile = "TEL:" + $("#r-4-0 > td").last().text() + "\n";
email = "EMAIL:" + $("#r-5-0 > td").last().text() + "\n";
web = "URL:" + $("#r-6-0 > td").last().text() + "\n";
desc = "NOTE:" + $("#r-7-0 > td").last().text() + "\n";
var info = "BEGIN:VCARD\n" + name + company + title + address + mobile + email + web + desc + "END:VCARD";
//console.log(info);
//生成二維碼
var qrcode = new QRCode("qrcode");
qrcode.makeCode(info);
    })
顯示代碼

2.4 效果預覽

保存報表，點擊分頁預覽，效果如 1.1節所示：

已完成模板可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分頁預覽JS實例\微信掃碼添加聯系人.cpt

點擊下載模板：微信掃碼添加聯系人.cpt

掃碼添加聯系人是支持在決策報表中實現的，但生成二維碼的 JS 代碼有所不同，需要在 JS 代碼外層加入：

setTimeout(function() {
	//代碼
}, 100);

決策報表中獲取表單單元格的值代碼如下：

$("#REPORT0").each(function(){  // 獲取表格table中，第幾個td的文本
    var t1 =$("#REPORT0").find('tr').eq(2).find('td').eq(1).text();
    alert("值:"+t1)
    })