web app调用微信、qq、等分享接口

由于小编正在着手一个项目，其中就有商品分享这一模块，要求将该商品的文字，图片，一些介绍等分享到微信、qq、微博等，那么今天小编就来给大家分享下我的操作流程

1.打开网址   http://wiki.mob.com/%E5%BF%AB%E9%80%9F%E9%9B%86%E6%88%90-13/（Mob）

一、添加应用

先从http://mob.com/login登录（如无帐号请注册）

添加新的应用，然后在添加产品出添加ShareSDK

得到appkey和appsecret即可

二、插入代码

把以下代码粘贴到您的网页中，可以在和的之间网页的任意位置放置，然后在代码中的script标签填写你的appkey

分享

    

        
新浪微博
        
QQ空间
        
QQ好友
        
豆瓣
        
Facebook
        
Twitter
    
    
取消

三、完成

2.账号注册网址  http://mob.com/login注册/登录

点击进入后台（如图）

  点击ShareSDK进入获取界面，

进入后添加项目填写相关信息直接获取 ShareSDK

3.参数可配置

因为我的项目需求需要带一些文字图片，所以需要配置参数，参数介绍如下（根据需求添加

二、mobShare.config方法

分享

    

        
新浪微博
    
    
取消

 

程序不必提供所有参数，只需要提供你需要配置的参数即可，比如

三、mobShare 方法

使用mobShare方法传递平台ID作为参数（点击查看所有平台ID）实例该平台的分享对象，通过此对象的send方法进行提交

分享到新浪微博

4分享样式设定

一、默认分享内容

程序默认分享内容分别如下：

链接：浏览器地址栏的地址
标题：title标签的内容
内容：meta[name=description]的内容
图片：分享平台自行抓取的图片（实际分享的图片要看分享平台自已的逻辑处理）
关于title和meta[name=description]两个标签，它们被放在网页的head标签里面，一般情况下大部分网页都会有，如果你的页面没有，可以自行添加，格式如下：

如果你不想添加这两个标签，或者需要更灵活的配置，也可以使用我们提供的API接口，并且使用API接口定义的参数优先级是最高的

微信分享请看这里

二、自定义分享平台

如果不需要某些平台，可以直接删除平台对应的html，下面的代码演示了只保留新浪微博平台的分享设置

分享

    

        
新浪微博
    
    
取消

三、自定义弹出效果

通过增加-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

例如

    略...

四、自定义图标

你可以在页面中使用css对平台图标进行修改，通过.-mob-share-平台ID（点击查看所有平台ID）定义类：

五、事件

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）

下面代码演示了只引入分享脚本的情况下，自定义一个按钮分享到新浪微博的例子

分享至新浪微博