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

通过这样的链接可以生成一个二维码

web端 网页端分享功能的实现_第1张图片

分析下链接参数: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

百度首页

参数引用
例子: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可用):



     
    微信
    
    
        
    
    
    
  
   
  
  
      
        
  分享到:   微信    更多  
      
             

分享到微信测试

            

 

你可能感兴趣的:(HTML,前端积累)