原

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

admin 暂无评论 704 浏览

网站与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 }

 

代码改变世界，我的《源代码》，我的世界！

最后更新于 2022年4月24日

相关博文

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