您的位置：首页 > 移动开发 > 微信开发

网页分享到微信的实现

2015-07-09 16:12 495 查看

思路

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">

</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>

使用微信扫描后发现已经在微信中打开了百度首页。我们就可以用微信的分享了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航