原生javascript實作分享到朋友圈功能支援ios和android

原生javascript實作分享到朋友圈功能支援ios和android_javascript技巧

WBOY

發布： 2016-05-16 08:59:54

原創

4830 人瀏覽過

　　現在主流的分享工具也有很多，例如JiaThis、bShare分享，甚至一些大公司的如百度分享，但是他們依舊停留在只是在PC端的分享，對手機端的支援不是太好。

　　大家都知道現在很多手機端瀏覽器都內建了一些分享元件，像是UC瀏覽器、QQ瀏覽器，內建的元件分享可以直接啟動對應的APP分享，要是一個JS能調用瀏覽器的內建分享組件，那是多麼酷啊。

　　高手在民間啊，下面腳本之家的小編就帶你來看看這位兄弟的編寫的JS庫。

一、工具介紹 nativeShare.js

一個可以透過javascript直接呼叫原生分享的工具，該工具具有以下特點：

1.支援原生微博、微信好友、微信朋友圈、QQ好友、QQ空間分享
2.支援呼叫瀏覽器更多分享功能
3.不依賴任何jquery以及其他外掛程式
注意:目前僅支援手機UC瀏覽器和QQ瀏覽器

github專案網址:https://github.com/JefferyWang/nativeShare.js
Git@OSC專案網址:http://git.oschina.net/wangjunfeng/nativeShare.js

二、使用方法

1.引進CSS檔

複製程式碼程式碼如下:

2.在需要新增分享的地方插入以下程式碼:

複製程式碼程式碼如下:

3.新增設定資訊,並實例化

複製程式碼程式碼如下:

<script><br>
    var config = {<br>
        <a href="'http://blog.wangjunfeng.com',//">url:'http://blog.wangjunfeng.com',// 分享的網頁連結<br>
        title:'王俊鋒的個人部落格',// 標題<br>
        desc:'王俊鋒的個人部落格',// 描述<br>
        img:'http://www.wangjunfeng.com/img/face.jpg',// 圖片<br>
        img_title:'王俊鋒的個人部落格',// 圖片標題<br>
        from:'王俊鋒的部落格' // 來源<br>
    };<br>
    var share_obj = new nativeShare('nativeShare',config);<br>
</script>

三、示範截圖

原生javascript實作分享到朋友圈功能支援ios和android_javascript技巧
圖１：分享到新浪微博