前端微信分享

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 來源：简书 简书著做权归做者全部，任何形式的转载都请联系做者得到受权并注明出处。