哇哦！恍然大悟般的“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>
效果如下：
好了，百度分享相关的就说到这了，你可以参考官方网站。
直接获取代码或，根据自己的需要修改相应的项即可，它主要用于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>
效果：（和上边类似）
那么到这里，关于前端分享的基础实现也算完成了，这里只是简单的介绍如何使用以及使用的平台，还有更多需要自己去更改的地方，在以后的学习中再去解决吧！！加油！ 像是了却一桩心事般，让人心情瞬间有几分欣喜！
哇哦！恍然大悟般的“share”功能的实现！的更多相关文章
- hexo next主题深度优化(四)，自定义一个share功能，share.js。
文章目录 背景: 开始: 引入资源: 代码 关键的一步 附:方便学习的小demo 一次成功后还出现上面的bug 结束 2018.12.23发现bug(读者可忽略) 个人博客:https://mmmmm ...
- 给Webkit内核的浏览器控件增加互交功能
转载请说明出处,谢谢~~ 昨天封装了基于webkit的wke浏览器内核,做成了duilib的浏览器控件,实现了浏览功能,但是单单的浏览功能还不满足需求,在我的仿酷狗项目中乐库的功能需要与浏览器互交. ...
- Visual Studio 2019 正式发布，重磅更新，支持live share
如约而至,微软已于今天推出 Visual Studio 2019 正式版,一同发布的还有 Visual Studio 2019 for Mac. Visual Studio 2019 下载地址:htt ...
- Visual Studio 2019 使用 Live Share
一.前言 Visual Studio 2019 在今天发布(北京时间)了,这次带来了一个比较有趣的 Live Share 功能,使用它可以进行更好的协作开发.主要功能: 更多资料可看官方介绍: Vis ...
- 个人小项目——Java实现WC功能
这个小项目用了两种方法解决了该功能的实现. 1.两种方法的功能和具体实现 代码可以成功运行,但是有一些情况考虑不完整,一种方法用了FileOutputStream输出流,为了解决空格无法统计问题,对文 ...
- 个人永久性免费-Excel催化剂功能第89波-批量多图片转PDF
前一篇展示了从PDF中提取到有用信息如图片.文本.表格等功能,部分人可能对自己手中的转PDF格式的保护性有所顾虑,此篇从反向角度,提供数据保护作用,让PDF文件的数据保护更彻底,让文本型的PDF文件彻 ...
- Vagrant 入门 - share
原文地址 译者注:Vagrant Share 功能通过 ngrok 向所有人提供访问内网开发环境的能力. 现在我们已经启动并运行了一台 Web 服务器,并且可以从你的机器访问,我们拥有一个相当实用的开 ...
- facebook api介绍
转自(http://sls.weco.net/node/10773) 一.Facebook API 基礎概念 Facebook API 概論 : API 最大的好處在於可以讓程式開發人員只需要根據 A ...
- DOS程序员手册（九）
第14章参考手册概述 本书余下的章节将向读者们介绍BIOS.DOS各种各样API函数和服务,作为一名程 序员,了解和掌握这些知识是很有好处的.在所介绍的参考手册中,每部手册都汇集了大 量的资源 ...
随机推荐
- 数据库--MyBatis的(insert,update,delete)三种批量操作
转自:http://blog.csdn.net/starywx/article/details/23268465 前段时间由于项目赶期没顾上开发过程中的性能问题,现对部分代码进行优化的过程中发现在数据 ...
- UVALive 6451:Tables(模拟 Grade D)
VJ题目链接 题意:模拟输出表格 思路:模拟……很暴力 代码: #include <cstdio> #include <cstring> #include <cstdli ...
- centos7 svn服务器搭建
系统环境:centos 7.5 yum安装svn yum install subversion -y 创建svn 版本库目录 mkdir -p /var/svn/svnrepos 在版本库目录下创建版 ...
- python里如何计算大文件的md5
在python3中,有了一个hashlib,可以用来计算md5,这里先给出一个简单的例子: import hashlib sstr="i love hanyu" print(has ...
- 常用Mysql查询语句
1.查询数据表中重复记录 select user_name,count(*) as count from user_table group by user_name having count>1 ...
- [BZOJ2815][ZJOI2012]灾难 灭绝树+拓扑排序+lca
灾难 [问题描述] 阿米巴是小强的好朋友. 阿米巴和小强在草原上捉蚂蚱.小强突然想,如果蚂蚱被他们捉灭绝了,那 么吃蚂蚱的小鸟就会饿死,而捕食小鸟的猛禽也会跟着灭绝,从而引发一系列的 生态灾难. 学过 ...
- 前端面试知识点锦集（JavaScript篇）
目录 1.谈谈你对Ajax的理解?(概念.特点.作用) 2.说说你对延迟对象deferred的理解? 3.什么是跨域,如何实现跨域访问? 4.为什么要使用模板引擎? 5.JavaScript是一门什么 ...
- 在libGDX中使用Spine骨骼动画
首先,github是个宝库,实践流的读者可以直接看例子进行学习 1.这是Spine官方给出的例子 https://github.com/EsotericSoftware/spine-superspin ...
- 牛客网 暑期ACM多校训练营（第二场）A.run-动态规划 or 递推？
牛客网暑期ACM多校训练营(第二场) 水博客. A.run 题意就是一个人一秒可以走1步或者跑K步,不能连续跑2秒,他从0开始移动,移动到[L,R]的某一点就可以结束.问一共有多少种移动的方式. 个人 ...
- 转：[Asp.net]常见数据导入Excel，Excel数据导入数据库解决方案，总有一款适合你！
引言 项目中常用到将数据导入Excel,将Excel中的数据导入数据库的功能,曾经也查找过相关的内容,将曾经用过的方案总结一下. 方案一 NPOI NPOI 是 POI 项目的 .NET 版本.POI ...