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

先拿分享到微信为例:

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

如何实现网页分享到微信,微博,空间相关推荐

  1. 微信网页分享(配合微信公众平台)

    微信网页分享--配合微信公众平台 一. 准备工作 二. SpringBoot前后端不分离版本 三. SpringBoot+Vue前后端分离版本 源码下载地址 一. 准备工作 准备一个域名(微信分享出去 ...

  2. 网页分享到微信常见问题

    *调试微信分享等功能推荐使用"微信web开发者工具" 1.网页分享到微信提示:"原网页已重新排版" 分析:查看自己的网页是不是打开后就有弹层 理由:微信为防止垃 ...

  3. 网页分享到微信、微博、QQ,QQ空间,豆瓣等等函数的封装

    直接上代码! //分享到新浪微博function shareToSinaWB(event){event.preventDefault();var _shareUrl = 'http://v.t.sin ...

  4. 网页分享到微信、微博、QQ等

    首先要说明的是,pc端微信分享只能通过二维码来分享. 部分代码如下: //分享到新浪微博function shareToSinaWB(event){event.preventDefault();var ...

  5. uni-app - H5 公众号网页分享到微信朋友圈 / 转发分享给朋友好友 / 分享到手机 QQ / 分享到 QQ 空间,给微信分享卡片设置图标、标题、描述文字等(JS-SDK 通用解决方案放心用)

    前言 如果您是纯 Vue.js 项目(或 Nuxt.js),请访问 Vue - 最新网页 H5 分享到微信朋友圈 / 转发分享好友 这篇详细教程. 目前网上大部分教程都过时了(老版本.无效),并且未对 ...

  6. App分享之微信微博等各个社交平台的分享授权规则和常见问题

    一.新浪微博分享规则 新浪微博支持分享类型: 应用内分享也就是网页分享支持: 文字,文字+图片,要分享链接需要链接添加在text里分享 客户端分享支持:文字,图片,文字+图片,图片+文字+链接 参数说 ...

  7. 友盟社会化分享之自定义内容分享到微信,微博,豆瓣

    以前移动端要做分享的时候一般是两种方法,要么使用Intent调用安卓系统自带的分享功能接口,这是最简单快捷的方法, 要么就自己去QQ微信和各个微博等社交网站申请开发者ID和key,然后在看他们的官方文 ...

  8. 网页分享到微信后不能从朋友圈打开

    通过微信扫一扫能正常浏览网页,将该页面分享到朋友圈后,从朋友圈去访问的时候,提示无法找到该页. 排除分享代码的问题 排除服务器配置问题 那就可能是因为网站的伪静态规则开启URL重写造成的. 关掉伪静态 ...

  9. android 实现微博分享,分享到微信微博QQ的简单实现(二)

    NOTE:这只是简单的实现,没有使用各自的SDK.基本思路是通过包名和类名来直接操作的.如果app修改了名字,可能就需要对应的修改报名和类名. 之前有分享到微信,QQ的代码,自行查找,就在上一篇博客. ...

最新文章

  1. 给FreeBSD加上了防火墙
  2. Kubernetes 弹性伸缩全场景解析(三) - HPA 实践手册
  3. 自我分析colly的robots源码
  4. 动手造轮子:实现简单的 EventQueue
  5. linux就该这么学第八课
  6. 【less-7】sqli-labs靶场第七关(类似less-5)
  7. nginx开机启动脚本
  8. 【渝粤教育】国家开放大学2018年春季 0706-22T行政管理学导论 参考试题
  9. Spring Boot 知识笔记(集成zookeeper)
  10. 软件测试-测试用例的经典例子
  11. 浏览器 pad android,360安全浏览器平板电脑Pad专用版-360安全浏览器HD 安卓版v1.1.0-PC6安卓网...
  12. 微信小程序自带地图_微信小程序 地图(map)实例详解
  13. 安卓如何隐藏APP图标探讨
  14. 会议panel是什么意思中文_topanel中文是什么意思
  15. 房屋水电煤气省钱秘籍
  16. Linux root密码修改
  17. 哈尔滨工业大学 计算机系统大作业
  18. python中idxmax_python-熊猫idxmax()在按包含NaN的时间段分组的...
  19. 1231231312
  20. 微信小程序wepy自定义card控件封装

热门文章

  1. 用青龙跑渤海宣传员(收益很稳定)
  2. vue2实现高德地图 JSAPI 2.0可拖拽的路线规划(DragRoute)组件实现对每个经过点设置不同的经过点名称
  3. 7-1 计算职工工资
  4. Visual studio 2019使用Microsoft Speech SDK 5.1语音识别
  5. cortex-a9 架构概览
  6. 利用python脚本批量自动下载Sentinel-1(哨兵1号)数据
  7. JAVA视频网盘分享
  8. 《Recent Advances in Deep Learning for Object Detection 》笔记
  9. Latex中的特殊符号
  10. php 自定义排序,thinkphp6.0自定义排序order by field