网页分享到微信的实现

原创 2015年07月09日 16:12: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>

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

相关文章推荐

实现将网页链接分享到微信功能

1、在app的build.gradle文件中添加依赖 compile ‘com.tencent.mm.opensdk:wechat-sdk-android-with-mta:+’ 2、在需要的控件...

微信的分享功能(针对web手机站页面进行的分享功能)

把这段js粘贴进,设置可以分享的页面,当微信打开,即可微信进行分享各个圈 $(function(){     var lujing=$("#logimg").attr("src");  //分享中...

HBuilder webApp开发(七)微信/QQ/新浪/腾讯微博分享

HUbuild是支持微信分享(好友和朋友圈),QQ分享,新浪微博和腾讯微博分享。 但是在使用的过程中,官方给的文档似乎很坑爹。 《分享插件配置》 《分享插件开发指南》 都是2014年7月发表的...

微信公众号网页分享功能开发

现在每天都可以看到很多微信分享的链接上面有网站或者商家的自定义的分享标题,和分享链接的描述及分享出去的图像,例如下面的分享出去的链接:                        上面这个是微信的j...

网站调用在线二维码生成 api

手机使用二维码确实十分方便,下面就是icech整理的二维码在线生成器网站地址大全。 谷歌图表 api http://code.google.com/intl/zh-CN/apis/chart/...

分享四个非常方便的二维码生成链接

说明:把url=后面的网址改成你的,四种任选一。 http://pan.baidu.com/share/qrcode?w=150&h=150&url=http://lanyes.org http://...

web网页,移动端h5页面添加微信分享,qq分享等功能

http://www.jiathis.com/ 打开以上网页,将代码复制到你的页面中,即可 优点:使用方便 缺点:无法做统计...
  • zpf0918
  • zpf0918
  • 2016年08月16日 15:10
  • 2055

html(h5)页面实现微信js分享

html(h5)页面实现微信js分享

微信分享JS-SDK示例页面

微信JS SDK 分享到朋友圈 分享给朋友 分享到QQ 拍照或从手机相册中选图 识别音频并返回识别结果 使用微信内置地图查看位置一、JS部分wx.ready(function () {  // 1 判...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:网页分享到微信的实现
举报原因:
原因补充:

(最多只允许输入30个字)