博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
如何实现网页分享到微信,微博,空间
阅读量:4974 次
发布时间:2019-06-12

本文共 1778 字,大约阅读时间需要 5 分钟。

客观一点来说,实现分享功能的并不是我们,而是手机自带了这些分享功能,但是需要我们在中间做一个桥梁,将分享的条件准备好,具体步骤如下

先拿分享到微信为例:

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, "");

})

调用一下现有的方法就可以了。

复制这些代码 然后利用事件触发这段脚本就可以了

 

转载于:https://www.cnblogs.com/shuangjiang/p/9524588.html

你可能感兴趣的文章
React躬行记(13)——React Router
查看>>
前端利器躬行记(1)——npm
查看>>
前端利器躬行记(2)——Babel
查看>>
前端利器躬行记(6)——Fiddler
查看>>
Intellij Idea新建web项目(转)
查看>>
用JAVA编写浏览器内核之实现javascript的document对象与内置方法
查看>>
centos iptables
查看>>
unity3d 移动与旋转 2
查看>>
寻找二叉查找树中比指定值小的所有节点中最大的那个节点
查看>>
如何设置输入框达到只读效果
查看>>
RT3070 USB WIFI 在连接socket编程过程中问题总结
查看>>
MIS外汇平台荣获“2013年全球最佳STP外汇交易商”
查看>>
LeetCode 题解之Add Digits
查看>>
hdu1502 , Regular Words, dp,高精度加法
查看>>
SpringBoot在idea中的热部署配置
查看>>
MyEclipse连接SQL Server 2008数据库的操作方法
查看>>
JS验证图片格式和大小并预览
查看>>
laravel5.2 移植到新服务器上除了“/”路由 ,其它路由对应的页面显示报404错误(Object not found!)———新装的LAMP没有加载Rewrite模块...
查看>>
编写高质量代码--改善python程序的建议(六)
查看>>
windows xp 中的administrator帐户不在用户登录内怎么解决?
查看>>