產品在原有的頁面上增加了一個二維碼分享功能,調試階段加上之后也沒啥事,后來多加了些參數,結果微信掃不出來了。沒辦法把二維碼的大小設置大了些之后,便可以掃了,但頁面布局就完蛋了,最后只好使用popover來實現了。
- 增加分享超鏈接
<a class="btn btn-link active">分享</a>
- 在超鏈標簽上實現popover
$('#shareLink').popover({
trigger: 'manual',
html: 'true',
// 本來這里是打算用funciton提供已生成二維碼的DIV,結果獲取不到生成的二維碼
content: '<div id="qrcode" style="width: 160px; height: 160px;"></div>',
animation: false,
placement: 'left'
}).on("mouseenter", function () {
var self = this;
$(this).popover("show");
// 只有show之后,popover的content才出現在dom中,此時才能生成二維碼
$(".popover #qrcode").qrcode({
width: 160,
height: 160,
render: 'canvas',
// 這里實際是個動態url,把代碼簡化了
text: 'http://www.baidu.com
});
$(this).siblings(".popover").on("mouseleave", function () {
$(self).popover('hide');
});
}).on("mouseleave", function () {
var self = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(self).popover("hide")
}
}, 100);
})