帮助与文档

> >

一、默认分享内容

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

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

<head>
<title>标题</title>
<meta name="description" content="内容" />
</head>

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

微信分享请看这里

二、自定义分享平台

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

<!--MOB SHARE BEGIN-->
<div class="-mob-share-ui-button -mob-share-open">分享</div>
<div class="-mob-share-ui" style="display: none">
    <ul class="-mob-share-list">
        <li class="-mob-share-weibo"><p>新浪微博</p></li>
    </ul>
    <div class="-mob-share-close">取消</div>
</div>
<div class="-mob-share-ui-bg"></div>
<script id="-mob-share" src="xxxx"></script>
<!--MOB SHARE END-->

三、自定义弹出效果

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

例如

<!--MOB SHARE BEGIN-->
<div class="-mob-share-ui -mob-share-ui-theme -mob-share-ui-theme-slide-left" style="display: none">
    略...
</div>

可查看DEMO演示

四、自定义图标

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

<style type="text/css">
/* 新浪微博 */
.-mob-share-weibo {
background-image: url( 图标连接 )!important;
}
/* 腾讯微博 */
.-mob-share-tencentweibo {
background-image: url( 图标连接 )!important;
}
/* QQ空间 */
.-mob-share-qzone {
background-image: url( 图标连接 )!important;
}
...
</style>

五、事件

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

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

<script id="-mob-share" src="xxxx"></script>
<button class="-mob-share-weibo">分享至新浪微博</button>