share SDK

作者: Sun_小杰杰哇 | 来源:发表于2018-12-07 17:42 被阅读0次

简介

本文是关于share的使用,使用的是cdn地址方式。可通过微博、QQ空间、Facebook等进行分享,本文列举的是新浪微博、QQ空间、QQ好友、豆瓣、Facebook、Twitter分享,若需要获取更多分享方式,请参考share SDK的官方文档。

使用

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <!--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>

    </body>
    <script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey=273562dd2d6d0"></script>
    <script>
        mobShare.config({

            debug: true, // 开启调试,将在浏览器的控制台输出调试信息

            appkey: '273562dd2d6d0', // appkey

            params: {
                url: 'http://wiki.mob.com/api/', // 分享链接
                title: '垃圾', // 分享标题
                description: '案件基督教基督教', // 分享内容
                pic: 'http://pic36.photophoto.cn/20150728/0022005597823716_b.jpg', // 分享图片,使用逗号,隔开
                reason: '', //自定义评论内容,只应用与QQ,QZone与朋友网
            },

            /**
             * 分享时触发的回调函数
             * 分享是否成功,目前第三方平台并没有相关接口,因此无法知道分享结果
             * 所以此函数只会提供分享时的相关信息
             * 
             * @param {String} plat 平台名称
             * @param {Object} params 实际分享的参数 { url: 链接, title: 标题, description: 内容, pic: 图片连接 }
             */
            callback: function(plat, params) {}

        });
    </script>
    <!--MOB SHARE END-->

</html>

运行效果

样式可根据自己需求更改,此样式仅供参考。

屏幕快照 2018-12-07 下午5.35.50.png 屏幕快照 2018-12-07 下午5.35.57.png

相关文章

网友评论

      本文标题:share SDK

      本文链接:https://www.haomeiwen.com/subject/lvhxhqtx.html