网页分享到微信的实现
来源:互联网 发布:java 内存管理 编辑:程序博客网 时间:2024/05/24 15:39
思路
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>
使用微信扫描后发现 已经在微信中打开了百度首页。我们就可以用微信的分享了。
- 网页分享到微信的实现
- 网页上“分享”的实现
- 网页上分享到的实现
- 网页上分享到的实现
- 网页分享功能的实现代码
- 网站网页分享功能的实现
- 实现将网页链接分享到微信功能
- 网页分享到微信常见问题
- 网页分享到微信
- 网页二维码分享到微信
- 网页分享技术—对网页分享技术的思考
- js baidu插件实现网页分享功能
- 如何实现分享网页中的文本到微博
- 在网页中实现快速分享功能
- JS-SDK分享网页到微信遇到的坑
- 在网页中添加“分享到微信朋友圈”按钮的代码分享
- 实现手机网页调起原生微信朋友圈分享的工具nativeShare.js
- 实现手机网页调起原生微信朋友圈分享的工具nativeShare.js
- appium学习计划
- 7.12
- 学习视频技术论坛
- redis cluster部署
- 安装RAD6.0
- 网页分享到微信的实现
- IOS 手势学习(点击,长按,轻扫,拖拽,旋转,捏合缩放)
- EditText禁止复制粘贴
- imsdroid 学习
- mongo Aggregation group
- 用 Unity 进行网络游戏开发(一)
- 由浅入深了解Thrift(三)——Thrift server端的几种工作模式分析
- 黑马程序员——C语言基础---复杂数据类型(变量,结构体,枚举)
- 8.15