客觀一點來說,實現分享功能的並不是我們,而是手機自帶了這些分享功能,但是需要我們在中間做一個橋梁,將分享的條件准備好,具體步驟如下
先拿分享到微信為例:
1.手機上自帶有分享到微信這個功能,但是分享到微信是需要二維碼的,所以我們所要做的工作就是在PC端或者移動端生成一個二維碼就行了。
js 有專門生成二維碼的庫:https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js 可以在bootcdn 上搜到
以cdn為例子,生成cdn的二維碼
var path = "https://www.bootcdn.cn/jquery/";
$("#qrcode").qrcode({
text: path, //設置二維碼內容
render: "table", //設置渲染方式
width: 256, //設置寬度,默認生成的二維碼大小是 256×256
height: 256, //設置高度
typeNumber: -1, //計算模式
background: "#ffffff", //背景顏色
foreground: "#000000" //前景顏色
}
);
其中#qrcode為一個盛放二維碼的容器,這個自己定義就行,目的就是為了讓二維碼有一個在前端頁面顯示的位置
這樣就已經完成了 掃描以后 手機上右上角有一個分享的功能 點擊就會有提示分享到微信了
2.分享到微博,空間
這個以分享到微博為例
//新浪微博分享部分
var ShareTip = function() {
}
//分享到騰訊微博
ShareTip.prototype.sharetoqq = function(content, url, picurl) {
var shareqqstring = 'http://v.t.qq.com/share/share.php?title=' + content + '&url=' + url + '&pic=' + picurl;
window.open(shareqqstring, 'newwindow', 'height=100,width=100,top=100,left=100');
}
//分享到新浪微博
ShareTip.prototype.sharetosina = function(title, url, picurl) {
var sharesinastring = 'http://v.t.sina.com.cn/share/share.php?title=' + title + '&url=' + url + '&content=utf-8&sourceUrl=' + url + '&pic=' + picurl;
window.open(sharesinastring, 'newwindow', 'height=400,width=400,top=100,left=100');
}
//分享到QQ空間
ShareTip.prototype.sharetoqqzone = function(title, url, picurl) {
var shareqqzonestring = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=' + title + '&url=' + url + '&pics=' + picurl;
window.open(shareqqzonestring, 'newwindow', 'height=400,width=400,top=100,left=100');
}
$(".a-weibo").click(function() {
var share1 = new ShareTip();
share1.sharetosina("從構建分布式秒殺系統聊聊限流特技", window.location.href, "");
})
調用一下現有的方法就可以了。
復制這些代碼 然后利用事件觸發這段腳本就可以了