网站与h5手机网站,APP qq,微信登录与分享解决方法

网站与h5手机网站,APP qq,微信登录与分享解决方法
一.Qq 登录与分享

1)分享

网页分享:

1对于分享 https://github.com/w3yyb/NativeShare 更方便(需要测试浏览器兼容)(演示爱奇艺网站)

2原生分享Web share api: navigator.share(只支持ios) --(Android可以利用intent实现分享功能)

3https://connect.qq.com/index.html

4不做网页的分享功能(移动端),用qq,微信,浏览器自带的分享。(许多大站在用此方式)

总结:用 1.或3.或4.

App分享:

1 https://connect.qq.com/index.html

2)登录:(网站,app)

1 https://connect.qq.com/index.html

二.微信登录与微信分享

1)分享

网页分享:

  1. https://github.com/w3yyb/NativeShare更方便(需要测试浏览器兼容)

2.原生分享Web share api: navigator.share(只支持ios)

3.不做网页的分享功能(移动端),用qq,微信,浏览器自带的分享。(许多大站在用此方式)

4.二维码网址(对于pc浏览器)

 

App分享:

https://open.weixin.qq.com/

2)登录

网站:https://open.weixin.qq.com

App : https://open.weixin.qq.com

 

注:https://github.com/w3yyb/NativeShare  不用申请开发者帐号

APP中也可用 友盟,极光share sdk,http://www.mob.com/(good)等集成sdk 进行分享与一键登录(推荐).

对于pc端的分享,请用下面方式进行

========================

一键分享到QQ空间、QQ好友、新浪微博、微信代码

通过qq空间qq聊天新浪微博和微信二维码分享平台提供的接口实现把网页中对应的图片、标题、描述的信息参数用javascript获取后传进接口中,实现一键分享

 使用到的接口(测试时需要登录,网址和图片必须是公网的,不能localhost,QQ图片不能太宽,太宽标题描述会undefiend):

1.分享到QQ空间接口:https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=你的网址&sharesource=qzone&title=你的分享标题&pics=你的分享图片&summary=你的分享描述信息

2.分享给QQ好友接口:http://connect.qq.com/widget/shareqq/index.html?url=你的分享网址&sharesource=qzone&title=你的分享标题&pics=你的分享图片地址&summary=你的分享描述&desc=你的分享简述

3.分享到新浪微博接口:http://service.weibo.com/share/share.php?url=你的分享网址&sharesource=weibo&title=你的分享标题&pic=你的分享图片&appkey=你的key(可选),如有需要在新浪微博开放平台中申请

一键分享代码参考如下:

html
  1. <div class="fl">分享到:</div> 
  2. <div onclick="shareTo('qzone')">     
  3.     <img src="http://zixuephp.net/static/images/qqzoneshare.png" width="30"> 
  4. </div> 
  5. <div onclick="shareTo('qq')">     
  6.     <img src="http://zixuephp.net/static/images/qqshare.png" width="32"> 
  7. </div> 
  8. <div onclick="shareTo('sina')">     
  9.     <img src="http://zixuephp.net/static/images/sinaweiboshare.png" width="36"> 
  10. </div> 
  11. <div onclick="shareTo('wechat')">     
  12.     <img src="http://zixuephp.net/static/images/wechatshare.png" width="32"> 
  13. </div>
js
  1. function shareTo(stype){
  2.     var ftit = '';
  3.     var flink = '';
  4.     var lk = '';
  5.     //获取文章标题
  6.     ftit = document.title;
  7.     //获取网页中内容的第一张图片地址作为分享图
  8.     flink = document.images[0].src;
  9.     if(typeof flink == 'undefined'){
  10.         flink='';
  11.     }
  12.     //当内容中没有图片时,设置分享图片为网站logo
  13.     if(flink == ''){
  14.         lk = 'http://'+window.location.host+'/static/images/logo.png';
  15.     }
  16.     //如果是上传的图片则进行绝对路径拼接
  17.     if(flink.indexOf('/uploads/') != -1) {
  18.         lk = 'http://'+window.location.host+flink;
  19.     }
  20.     //百度编辑器自带图片获取
  21.     if(flink.indexOf('ueditor') != -1){
  22.         lk = flink;
  23.     }
  24.     //qq空间接口的传参
  25.     if(stype=='qzone'){
  26.         window.open('https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+document.location.href+'?sharesource=qzone&title='+ftit+'&pics='+lk+'&summary='+document.querySelector('meta[name="description"]').getAttribute('content'));
  27.     }
  28.     //新浪微博接口的传参
  29.     if(stype=='sina'){
  30.         window.open('http://service.weibo.com/share/share.php?url='+document.location.href+'?sharesource=weibo&title='+ftit+'&pic='+lk+'&appkey=2706825840可选');
  31.     }
  32.     //qq好友接口的传参
  33.     if(stype == 'qq'){
  34.         window.open('http://connect.qq.com/widget/shareqq/index.html?url='+document.location.href+'?sharesource=qzone&title='+ftit+'&pics='+lk+'&summary='+document.querySelector('meta[name="description"]').getAttribute('content')+'&desc=php自学网,一个web开发交流的网站');
  35.     }
  36.     //生成二维码给微信扫描分享,php生成,也可以用jquery.qrcode.js插件实现二维码生成
  37.     if(stype == 'wechat'){
  38.         window.open('http://zixuephp.net/inc/qrcode_img.php?url=http://zixuephp.net/article-1.html');
  39.     }
  40. }

使用说明:

这里的如获取文章标题、文章图片、logo图片地址等一些其他信息是按照本站的规则来的,使用时需要修改成自己站点的calss或id选择器来获取。如果调试不成功,可以尝试本站中的分享功能,分享时会打开新窗口,那条链接是最终要分享的,已经拼接好的参数链接,可以复制进行比对参考。

最终分享链接示例:

1.分享到qq空间:

https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http://zixuephp.net/article-309.html?sharesource=qzone&title=一键分享到QQ空间、QQ好友、新浪微博、微信代码&pics=http://zixuephp.net/uploads/image/20170810/1502335815192079.png&summary=通过各自平台的开发接口,进行参数指定,进行一键分享javascript代码功能

2.分享到qq好友:

https://connect.qq.com/widget/shareqq/index.html?url=http://zixuephp.net/article-309.html?sharesource=qzone&title=一键分享到QQ空间、QQ好友、新浪微博、微信代码&pics=http://zixuephp.net/uploads/image/20170810/1502335815192079.png&summary=通过各自平台的开发接口,进行参数指定,进行一键分享javascript代码功能&desc=php自学网,一个web开发交流的网站

3.分享到新浪微博:

http://service.weibo.com/share/share.php?url=http://zixuephp.net/article-309.html?sharesource=weibo&title=一键分享到QQ空间、QQ好友、新浪微博、微信代码&pic=http://zixuephp.net/uploads/image/20170810/1502335815192079.png&appkey=&sudaref=zixuephp.net&display=0&retcode=6102#_loginLayer_1528860698455

4.分享到微信(js生成二维码方式)

jquery生成二维码方式:

jquery.qrcode.js生成二维码demo.html

下载代码:

jquery.qrcode.js生成二维码demo.rar

=============================

web分享QQ好友、QQ空间、新浪微博的api接口

QZone:

"http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={{URL}}&title={{TITLE}}&desc={{DESC}}&summary={{SUMMARY}}&site={{SOURCE}}&pics={{IMAGE}}"

 

 

QQ:

"http://connect.qq.com/widget/shareqq/index.html?url={{URL}}&title={{TITLE}}&source={{SOURCE}}&desc={{DESC}}&pics={{IMAGE}}&summary={{SUMMARY}}"

 

 

新浪微博:

"http://service.weibo.com/share/mobile.php?url={{URL}}&title={{DESC}}&pic={{IMAGE}}&appkey={{WEIBOKEY可 选}}"

 

 

上面大括号部分应用中请替换成实际要分享的数据。

可以自定义一个方法通过 window 来打开一个新窗口展示分享页面:

1 var sharetoqq=function(content,url,picurl)  
2 {  
3  var shareqqstring='http://v.t.qq.com/share/share.php?title='+content+'&url='+url+'&pic='+picurl;  
4  window.open(shareqqstring,'newwindow','height=100,width=100,top=100,left=100');  
5 }

 

代码改变世界,我的《源代码》,我的世界!

网站与h5手机网站,APP qq,微信登录与分享解决方法
标签: