web端 网页端分享功能的实现
思路
web端 网页端分享功能的实现。
我们看微信的分享开发者文档,可以知道使用微信JS-SDK可以实现网页在微信里的分享。
微信JS-SDK说明文档
也就是说 在微信浏览器中打开的网页 才能调用 该分享功能。
但是我们是PC端打开的web,网页。怎么实现分享呢。
因为微信现在已经屏蔽了来自外部的分享链接。
所以我们的思路是 点击分享 按钮后 弹出一个 网页 或者 我们要分享的网页的 二维码 。
提示用户使用微信扫描。
扫描后即会自动在微信里打开该网页了。
用户就能用 微信内部的分享功能了。
实现方法
根据思路 我们要实现 用户点击按钮后 弹出一个带有分享网址信息的二维码。
实现方法有两种:
方式一
1. 自己实现点击后弹出div,div上显示二维码图片 二维码图片用谷歌二维码api生成 img src=“” http://chart.apis.google.com/chart?cht=qr&chs=104x104&chld=L|0&chl=http://www.baidu.com
通过这样的链接可以生成一个二维码
分析下链接参数:https://chart.googleapis.com/chart? 这是Google Chart API的头部,直接照抄就好了~&cht=qr 这是说图表类型为qr也就是二维码。
&chs=104×104这是说生成图片尺寸为104×104
&chld=L|0 L代表默认纠错水平; 0代表二维码边界空白大小,可自行调节。
&chl=XXXX 这是二维码内容,也就是解码后看到的信息。
PS:现在谷歌api用不了的话,可以选用其它二维码api,
列举几个如下:
一、联图
API接口地址:http://qr.liantu.com/api.php
调用方法:http://qr.liantu.com/api.php?text=http://www.baidu.com
<img title="本文二维码,手机扫一扫,精彩随身带!" style="float:right;cursor:pointer" src="http://qr.liantu.com/api.php?w=68&m=0&text=http://www.baidu.com" alt="百度首页" width="68" height="68"/>
参数引用
例子:http://qr.liantu.com/api.php?&bg=ffffff&fg=cc0000&text=x
参数 描述 赋值
例子bg 背景颜色 bg=颜色代码,例如:bg=fffffffg
前景颜色 fg=颜色代码,例如:fg=cc0000gc
渐变颜色 gc=颜色代码,例如:gc=cc00000el
纠错等级 el可用值:h\q\m\l,例如:el=hw
尺寸大小w=数值(像素),例如:w=300m
静区(外边距)m=数值(像素),例如:m=30
pt 定位点颜色(外框) pt=颜色代码,例如:pt=00ff00
inpt 定位点颜色(内点) inpt=颜色代码,例如:inpt=000000
logo logo图片 logo=图片地址,例如:logo=http://www.liantu.com/images/2013/sample.jpg
二、JiaThis
API接口地址:http://s.jiathis.com/qrcode.php
调用方法:http://s.jiathis.com/qrcode.php?url=http://www.baidu.com
三、快拍
API接口地址:http://api.kuaipai.cn/qr
调用方法:http://api.kuaipai.cn/qr?chl=http://www.baidu.com
方式二
使用分享平台的插件。比如ShareSDK 以及很多网站等都在使用的JiaThis等 。
http://www.jiathis.com/
使用方法:根据情况选用代码块即可。方式二封装了方式一的思路。
示例
现在我们用jiathis的代码为例(保存为html可用):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head> <title>微信</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--></head><script "text/javascript">
var jiathis_config = { url: "http://www.baidu.com", title: "百度主页分享", summary:"我们试试分享百度主页!"
}
</script> <body><span style="font-family: 'Microsoft YaHei', arial, tahoma, 宋体, sans-serif;"><div id="ckepop"></span>
<span class="jiathis_txt">分享到:</span>
<a class="jiathis_button_weixin">微信</a>
<a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis" target="_blank">更多</a>
<a class="jiathis_counter_style"></a> </div>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=1" charset="utf-8"></script>
<script src="http://v2.jiathis.com/code/jiathis_r.js?move=0"></script>
</div> <h1>分享到微信测试</h1> </body>
</html>
web端 网页端分享功能的实现相关推荐
- vue移动端网页微信分享
vue移动端网页微信分享 1. 开篇说明 2. 过程 3. 先上代码 4. 使用说明 兼容ios 5. 注意 1. 为什么请求后端接口时,url需要编码---encodeURIComponent 2. ...
- 微信网页开发 分享功能剖析
微信网页开发 分享功能剖析 步骤一:绑定域名 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名". 步骤二:引入J ...
- 新款众人帮任务帮威客兼职双端网页端悬赏任务源码蚂蚁聊天抖音快手头条点赞 下载
某站1500元购买,后台Tinkphp 前端可封装打包 网页端加安卓苹果 可封装小程序. 下载链接:https://pan.baidu.com/s/1ds_xFq1Rd1_xC4515BRGXw 提 ...
- 前端做微信好友分享_web端实现微信分享功能
微信分享的东西目前文档已经很完善了.记录下做微信分享时遇到的坑,以及流程. 配置相关的就不说了, 文档里很明白. 1:先登录微信公众平台进入"公众号设置"的"功能设置&q ...
- 移动端网页返回主页功能php,移动端点击返回键,页面不刷新解决方案
在移动端项目中遇到了点击浏览器返回键,页面不刷新的问题,通过研究学习,采用了以下的解决方案.问题解决了. (一)移动端点击返回键,页面不刷新解决方案 移动端浏览器点击返回上一级,页面不刷新的原因之一: ...
- 移动端html qq,移动端网页 H5 分享 QQ 写法 自定义标题和描述
看过一些方法,好像都比较旧,且不是很全,所以在 2018.12.12 写一个关于如何分享 QQ 的写法 分享到 QQ 的图标我就是默认让 QQ 浏览器或是各种浏览器自己抓取一张图片,而我只是自定义分享 ...
- js生成二维码,web页面,移动h5页添加微信qq分享功能
js文件 qrcode.js 代码 /*from tccdn minify at 2014-6-4 14:59:43,file:/cn/c/c/qrcode.js*/ /*** @fileovervi ...
- 导航APP双端带网页端电商/商城/展示/影视/小说/漫画/通用/试玩/导航系统源码
简介: 前端 APICloud 后端 PHP 双端+网页端 轮翻海报后台可设置多条轮翻海报与公告,海报可设置H5外链! 后台可无限设置导航图片与文字,可跳转详细页或直接跳转网页. 图标大小自适应-- ...
- vue项目微信禁止分享功能
Vue微信公众号网页禁用分享功能 因为项目中需要禁止分享功能,所以去百度了一下,但是还是挺多坑的最后拼凑了一个流程.(只介绍全部禁用的) 有很多文章用的是 WeixinJSBridge.call('h ...
最新文章
- 电视信号——行场同步
- 【转】彻底搞清计算结构体大小和数据对齐原则
- 使用CSS和JQuery实现表格单元格内容超出时部分隐藏,隐藏部分以...显示
- 【原创】Oracle RAC原理和安装
- 庖丁解牛获取连接状态数的awk数组命令
- JavaMail简单版实验测试
- 进销存软件排行榜前十名!
- 备案后才允许上线 网站ICP备案步骤详解
- linux上网络配置不生效的怪异现象处理
- two sample ttest paired ttst
- 华硕飞行堡垒笔记本电脑驱动程序不能使用如何解决
- 苹果电池显示维修_苹果售后政策调整,iPhone非原装电池也提供维修!
- YoloV5 训练长方形图像
- 到底为什么我们总是错过跃阶?
- 2019年最新《Web 前端开发》等级考试模拟题~以国家 “1+X” 职业技能证书为标准,厚溥推出 Web 前端开发人才培养方案...
- 想不想恶搞你的朋友?试试关不掉的弹窗(vbs)
- php实现wav转mp3,php实现将wav文件转换成图像文件并在页面中显示的方法
- 支付革新带来诸多便捷改变人们生活方式
- 清华团队通过监督贝叶斯嵌入,对单细胞染色质可及性数据进行细胞类型注释...
- 马斯克加价62.5亿美元收购推特,联想去年研发投入增至130亿,苹果明确所有App支持删号,今日更多大新闻在此...