哇哦！恍然大悟般的“share”功能的实现！

有一个问题一直困扰着我，也是我一直没有时间去了解和学习的，那就是前端（移动端）实现分享到微信、QQ好友、QQ空间、新浪微博等等平台的功能实现，虽然之前有做过，但是都是上一个领导自己写好的，我直接拿来用的，昨天下班就有给自己预定一个明日计划，一是完成前一天领导安排的页面，二是学习并理解前端分享功能的实现！

上午九点到公司后就去完成了前一天遗留的页面问题，解决完了之后就投入到了“share”问题上来了，一直在网上查询相关资料以及在技术群里问了相关人员，但是还是没有得到我想要的结果，终于在网上搜索得到了很好的答案！

功夫不负有心人，最终得到了我比较满意的答案！

之前就有自己私下写过前端实现分享的demo，是利用的百度分享实现的，而这就出现了一个问题就是百度分享并不支持移动端页面，下面简单来看一个百度分享实现的分享功能的demo：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><title>百度分享功能的实现</title></head><body><h3>直接使用百度分享</h3><div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a></div><script>window._bd_share_config = {"common": {"bdSnsKey": {},"bdText": "","bdMini": "2","bdMiniList": false,"bdPic": "","bdStyle": "0","bdSize": "32"},"share": {},"image": {"viewList": ["weixin", "tsina", "qzone", "tqq"],"viewText": "分享到：","viewSize": "16"},"selectShare": {"bdContainerClass": null,"bdSelectMiniList": ["weixin", "tsina", "qzone", "tqq"]}};with(document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];</script></body>
</html>

效果如下：

好了，百度分享相关的就说到这了，你可以参考官方网站。

http://share.baidu.com/

直接获取代码或，根据自己的需要修改相应的项即可，它主要用于pc端的比较多，移动端的话需要自己去调整页面的适配问题也就是样式展现问题！

那么接下来回到我理想的sharesdk上来，官网链接为：http://sharesdk.mob.com/

点击立即使用，登录/注册、然后接下来的首要任务就是获取项目的APP key以及APP secret。这两很重要！因为页面中要用到。

你只要添加产品，添加项目名称，然后获取APP key以及APP secret。（这里我已经建立了的一个产品名称为wapTest的项目，也可以建立多个根据你自己的需要，不过一般一个就够用，而且公司开发的话用的也是公司的不是自己的。）

到这里基础的准备工作就完了，接下来就是基础案例的展示：

API文档也有介绍！进入到集成文档中心：

http://wiki.mob.com/%E5%BF%AB%E9%80%9F%E9%9B%86%E6%88%90-13/

下边直接来看两个demo代码吧！

Demo1：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><title>标题</title></head><body>你的网站内容部分！<hr /><!--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-weixin"><p>微信</p></li><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.com/code/mob-share.js?appkey=1feac3bd7169c"></script><!--MOB SHARE END--></body>
</html>

效果：

点击分享按钮弹出：

Demo2：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><title>mob.com2Test</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></ul><div class="-mob-share-close">取消</div></div><div class="-mob-share-ui-bg"></div><script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey=1feac3bd7169c"></script><script>mobShare.config({debug: true, // 开启调试，将在浏览器的控制台输出调试信息
                appkey: '1feac3bd7169c', // appkey
                params: {url: 'http://192.168.0.173:8020/share2-xiugai/mob.com2.html', // 分享链接
                    title: '这是mob.com2案例的分享标题', // 分享标题
                    description: '分享描素的话-比如：【赚钱】独创运营模式，全方位指导，专业团队，引领世界共创富，分红全球购打造亿万大众创富梦想的平台，财富等您加入！！！', // 分享内容
                    pic: 'https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=82bbf1638bcb39dbc5c06054e01709a7/728da9773912b31bef2e58a08c18367adbb4e1fd.jpg', // 分享图片，使用逗号,隔开
                    reason: '自定义评论内容，只应用与QQ,QZone与朋友网-比如：真棒！！！', //自定义评论内容，只应用与QQ,QZone与朋友网
                },/*** 分享时触发的回调函数* 分享是否成功，目前第三方平台并没有相关接口，因此无法知道分享结果* 所以此函数只会提供分享时的相关信息* * @param {String} plat 平台名称* @param {Object} params 实际分享的参数 { url: 链接, title: 标题, description: 内容, pic: 图片连接 }*/callback: function(plat, params) {//回调函数执行其他的处理（根据需要添加自己自定义的内容）if(plat=='qq'){sharetype=2;}else if(plat=='weixin'){sharetype=5;}else if(plat=='qzone'){sharetype=6;}else if(plat=='weibo'){sharetype=3;}else{sharetype=9;}}});</script><!--MOB SHARE END--></body>
</html>

效果：（和上边类似）

那么到这里，关于前端分享的基础实现也算完成了，这里只是简单的介绍如何使用以及使用的平台，还有更多需要自己去更改的地方，在以后的学习中再去解决吧！！加油！像是了却一桩心事般，让人心情瞬间有几分欣喜！

转载于:https://www.cnblogs.com/xiangru0921/p/7281365.html

哇哦！恍然大悟般的“share”功能的实现！相关推荐

手机文件share.php,华为P30手机怎么使用Huawei Share功能？一碰传文件
HUAWEI P30 系列手机一碰传怎么用呢?无需借助数据线或第三方软件,使用 Huawei Share 一碰传功能,只需轻轻一碰,便可快速完成手机电脑资料双向互传. 华为P30手机怎么使用Huawe ...
VSCode 的 Live Share 功能终于来了
我在去年曾经写过一篇:Atom 和 VSCode 同一天发布神器:实时编码分享,如今半年时间过去了,vscode 终于发布了第一个公开预览版这简直太酷了! 不仅仅是编辑的协作,甚至可以共享终端,一起 ...
Visual Studio 2019 使用 Live Share
一.前言 Visual Studio 2019 在今天发布(北京时间)了,这次带来了一个比较有趣的 Live Share 功能,使用它可以进行更好的协作开发.主要功能: 更多资料可看官方介绍: Vis ...
三星note20u计算机功能,三星Note20Ultra隐藏功能有哪些-有哪些使用技巧
三星Note20Ultra这款手机,有着很多的人性化的隐藏技巧,今天小编就为大家带来了三星Note20Ultra使用教程,一定不要错过哦! 一.拍摄小技巧 1.AI一键多拍拍摄新体验 Note20 ...
三星note20u计算机功能,三星Note20Ultra隐藏功能有哪些，三星Note20Ultra使用教程
三星Note20Ultra这款手机,有着很多的人性化的隐藏技巧,今天小编就为大家带来了三星Note20Ultra使用教程,一定不要错过哦! 一.拍摄小技巧 1.AI一键多拍拍摄新体验 Note20 ...
平板电脑有没计算机功能,平板电脑的用途与功能
平板电脑是现在越来越流行的电子设备,虽然在生活里很常见,但许多人对它的用途其实并不了解,最后盲目跟风的购买后只能放在家里吃灰,平板电脑真的只能用来看视频追剧吗?其实远远不止这些,下面就让我们一起来看看 ...
华为手机usb计算机连接在哪里设置密码,简单十步设置Huawei Share，手机与电脑传输从此告别数据线...
原标题:简单十步设置Huawei Share,手机与电脑传输从此告别数据线最近发现很多人使用华为手机和电脑连接还需要使用数据线,没有使用Huawei Share功能,就写了一下简单的教程,供参考. ...
华为手机微信如何与电脑连接到服务器,有华为手机，还用微信QQ传文件到电脑？Huawei share秒传了解一下...
原标题:有华为手机,还用微信QQ传文件到电脑?Huawei share秒传了解一下华为手机用户,还用微信.QQ传文件到电脑?Huawei share秒传了解一下我们在办公的时候,难免需要手机和电脑 ...
autohotkey --- 热键只对特定程序生效,并设置不同等级的搜索功能
autohotkey - 热键只对特定程序生效,并设置不同等级的搜索功能基本环境 autohotkey SciTE4AutoHotkey-Plus 编辑器, 非必须,打算长用ahk的可以考虑. au ...

哇哦！恍然大悟般的“share”功能的实现！

哇哦！恍然大悟般的“share”功能的实现！相关推荐

最新文章

热门文章