前端微信分享

https://www.jianshu.com/p/47b4f19a4f66
昨天由於調通了微信的js-sdk的接口，知道了它所謂的分享只能在微信瀏覽器裏面使用，因此今天又開始找三方分享的代碼，正巧偶遇一個很是nice的網站。讓我不到半小時後就把三方分享所有搞定了 是否是很神奇了！！並且這個網站的sdk仍是免費的！！是否是想知道呢！！！快點給寶寶點點贊吧 O(∩_∩)O哈哈~！！！

如今我就來介紹一下這個網站的分享流程：

首先咱們登錄 

Mob官網 - 中國最大的移動開發者服務平臺 - ShareSDK官網 - 免費短信驗證碼 - ShareREC官網 - BigApp官網

這個網址，而後點擊

首頁這裏進入到後臺，添加應用！！
1、添加應用

先從http://mob.com/login登陸（如無賬號請註冊）

添加新的ShareSDK應用，勾選「網頁版」

這樣咱們獲得一個appkey

2、插入代碼

把如下代碼粘貼到您的網頁中，能夠在和的之間網頁的任意位置放置，而後在代碼中的script標籤填寫你的appkey

這樣就完成了，若是你還有什麼不明白，能夠繼續翻閱文檔。也能夠在這裏瀏覽咱們提供的一個簡單DEMO

默認分享內容

程序默認分享內容分別以下：

連接：瀏覽器地址欄的地址

標題：title標籤的內容

內容：meta[name=description]的內容

圖片：分享平臺自行抓取的圖片（實際分享的圖片要看分享平臺自已的邏輯處理）

關於title和meta[name=description]兩個標籤，它們被放在網頁的head標籤裏面，通常狀況下大部分網頁都會有，若是你的頁面沒有，能夠自行添加。

標題

若是你不想添加這兩個標籤，或者須要更靈活的配置，也可使用咱們提供的API接口，而且使用API接口定義的參數優先級是最高的

微信分享請看這裏

自定義彈出效果

經過增長-mob-share-ui元素的css類改變彈出效果

默認效果 -mob-share-ui-theme -mob-share-ui-theme-scatter

上邊滑出 -mob-share-ui-theme -mob-share-ui-theme-slide-top

下邊滑出 -mob-share-ui-theme -mob-share-ui-theme-slide-bottom

左邊滑出 -mob-share-ui-theme -mob-share-ui-theme-slide-left

右邊滑出 -mob-share-ui-theme -mob-share-ui-theme-slide-right

可查看DEMO演示

自定義圖標

你能夠在頁面中使用css對平臺圖標進行修改，經過.-mob-share-平臺ID（點擊查看全部平臺ID）定義類：

/* 新浪微博 */

.-mob-share-weibo{

background-image:url(圖標鏈接)!important;

}

/* 騰訊微博 */

.-mob-share-tencentweibo{

background-image:url(圖標鏈接)!important;

}

/* QQ空間 */

.-mob-share-qzone{

background-image:url(圖標鏈接)!important;

}

...

事件

mobShare組件默認爲一些元素綁定了點擊（click）事件，你能夠把這些ID放到自定義的網頁元素中，以便更改UI，下面是事件列表

ID動做

-mob-share-open顯示class爲-mob-share-ui元素（打開分享界面）

-mob-share-close關閉class爲-mob-share-ui元素（關閉分享界面）

-mob-share-weibo分享至新浪微博

-mob-share-tencentweibo分享至騰訊微博

-mob-share-qzone分享至QQ空間

…

注：-mob-share-平臺ID 表示分享至該平臺（點擊查看全部平臺ID）

下面代碼演示了只引入分享腳本的狀況下，自定義一個按鈕分享到新浪微博的例子

自定義例子：

分享到新浪微博// 實例一個新浪微博的分享對象

var weibo = mobShare( 'weibo' );

// 而後經過用戶事件觸發分享（瀏覽器限制緣由，打開新窗口必需經過用戶事件觸發）

// 原生js的使用方法

document.getElementById( 'share_weibo' ).onclick = function() {

weibo.send();

}

// jquery庫的使用方法

$( '#share_weibo' ).click( function() {

weibo.send();

} );

想要查看自定義的分享方法請點擊這裏API！！！

但願本片博客可能幫助到那些須要幫助的人！！！
天天更新學到的東西！學無止境！！！！
本文根據 Mob官網書寫 ！！！！致敬！！！！

做者：心淡然如水
連接：https://www.jianshu.com/p/47b4f19a4f66 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。