web端 網頁端分享功能的實現

駱小胖發表於2019-04-24
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>

 

相關文章