由于小编正在着手一个项目,其中就有商品分享这一模块,要求将该商品的文字,图片,一些介绍等分享到微信、qq、微博等,那么今天小编就来给大家分享下我的操作流程
1.打开网址 http://wiki.mob/%E5%BF%AB%E9%80%9F%E9%9B%86%E6%88%90-13/(Mob)
一、添加应用
先从http://mob/login登录(如无帐号请注册)
添加新的应用,然后在添加产品出添加ShareSDK
得到appkey和appsecret即可
二、插入代码
把以下代码粘贴到您的网页中,可以在<body>和</body>的之间网页的任意位置放置,然后在代码中的script标签填写你的appkey
<!--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>
<li class="-mob-share-qzone"><p>QQ空间</p></li>
<li class="-mob-share-qq"><p>QQ好友</p></li>
<li class="-mob-share-douban"><p>豆瓣</p></li>
<li class="-mob-share-facebook"><p>Facebook</p></li>
<li class="-mob-share-twitter"><p>Twitter</p></li>
</ul>
<div class="-mob-share-close">取消</div>
</div>
<div class="-mob-share-ui-bg"></div>
<script id="-mob-share" src="http://f1.webshare.mob/code/mob-share.js?appkey=你的appkey"></script>
<!--MOB SHARE END-->
三、完成
2.账号注册网址 http://mob/login注册/登录点击进入后台(如图)
点击ShareSDK进入获取界面, 进入后添加项目填写相关信息直接获取 ShareSDK
3.参数可配置
因为我的项目需求需要带一些文字图片,所以需要配置参数,参数介绍如下(根据需求添加
二、mobShare.config方法
<!--MOB SHARE BEGIN-->
<div class="-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>
<script>
mobShare.config( {
debug: true, // 开启调试,将在浏览器的控制台输出调试信息
appkey: '', // appkey
params: {
url: '', // 分享链接
title: '', // 分享标题
description: '', // 分享内容
pic: '', // 分享图片,使用逗号,隔开
reason:'',//自定义评论内容,只应用与QQ,QZone与朋友网
},
/**
* 分享时触发的回调函数
* 分享是否成功,目前第三方平台并没有相关接口,因此无法知道分享结果
* 所以此函数只会提供分享时的相关信息
*
* @param {String} plat 平台名称
* @param {Object} params 实际分享的参数 { url: 链接, title: 标题, description: 内容, pic: 图片连接 }
*/
callback: function( plat, params ) {
}
} );
</script>
<!--MOB SHARE END-->
程序不必提供所有参数,只需要提供你需要配置的参数即可,比如
<script>
mobShare.config( {
appkey: '', // appkey
params: {
url: '', // 分享链接
title: '', // 分享标题
}
} );
</script>
三、mobShare 方法
使用mobShare方法传递平台ID作为参数(点击查看所有平台ID)实例该平台的分享对象,通过此对象的send方法进行提交
<script id="-mob-share" src="xxxx"></script>
<!-- 定义分享按钮 -->
<button id="share_weibo">分享到新浪微博</button>
<script>
// 实例一个新浪微博的分享对象
var weibo = mobShare( 'weibo' );
// 然后通过用户事件触发分享(浏览器限制原因,打开新窗口必需通过用户事件触发)
// 原生js的使用方法
document.getElementById( 'share_weibo' ).onclick = function() {
weibo.send();
}
// jquery库的使用方法
$( '#share_weibo' ).click( function() {
weibo.send();
} );
</script>
4分享样式设定
一、默认分享内容
程序默认分享内容分别如下:
链接:浏览器地址栏的地址
标题:title标签的内容
内容:meta[name=description]的内容
图片:分享平台自行抓取的图片(实际分享的图片要看分享平台自已的逻辑处理)
关于title和meta[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>
四、自定义图标
你可以在页面中使用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>
更多推荐
web app调用微信、qq、等分享接口
发布评论