H5W3
当前位置:H5W3 > APIcloud技术问答专区 > 正文

apicloud微信QQ等第三方登录分享实现

针对用户最近的问题,对微信登录分享、QQ登录分享进行一个流程性的讲解。在微信分享经常是分享不成功或者图片不显示,主要问题是图片过大或者是没有本地化。在config.xml的配置就不多说了
一、微信登录(使用wx模块)

1、流程:使用auth进行授权--->getToken获取用户信息—->同步至服务端

注意:在安卓端可以提示用户没有安装微信端,但是ios端切忌不要加任何提示

2、代码实现:

(因为会有一个唤起微信客户端的时间,代码里面加了showProgress过度了一下)

  1. var wx = api.require(‘wx’);
  2. wx.auth({
  3.     apiKey: ”//在此输入你的微信apikey
  4. }, function(ret, err){
  5.     if(ret.status){
  6.         api.showProgress({
  7.             style: ‘default’,
  8.             animationType: ‘fade’,
  9.             title: ‘登录中…’,
  10.             text: ‘请稍后…’,
  11.             modal: false
  12.         });
  13.         wx.getToken({
  14.             //apiKey: ”,
  15.             //apiSecret: ”,
  16.             code: ret.code
  17.         },function(ret, err){
  18.             if(ret.status){
  19.                 //获取用户信息
  20.                 var accessToken = ret.accessToken;
  21.                 var openId = ret.openId;
  22.                 wx.getUserInfo({
  23.                     accessToken: ret.accessToken,
  24.                     openId: ret.openId
  25.                 }, function(ret,err){
  26.                     if(ret.status){
  27.                         //将信息同步至服务器
  28.                          api.ajax({
  29.                             url: ”,//你的服务器地址
  30.                             method: ‘post’,
  31.                             cache:true,
  32.                             timeout: 30,
  33.                             dataType: ‘json’,
  34.                             returnAll:false,
  35.                             data:{
  36.                                 values:{
  37.                                     nickname:ret.nickname,
  38.                                     avatar:ret.headimgurl,
  39.                                     privilege:ret.privilege,
  40.                                     unionid:ret.unionid,
  41.                                     city:ret.city
  42.                                 }
  43.                             }
  44.                         },function(ret,err){
  45.                             api.hideProgress();
  46.                             if(ret.code==1){
  47.                                 api.toast({
  48.                                     msg: ‘登录成功’,
  49.                                     duration:2000,
  50.                                     location: ‘top’
  51.                                 });
  52.                             }else{
  53.                                 api.alert({
  54.                                     msg:”+ret.msg+”
  55.                                 });
  56.                             }
  57.                         })
  58.                     }
  59.                 });
  60.             }
  61.         });
  62.     }else{
  63.         if(api.systemType==’android’ && err.code==3){
  64.             alert(“请安装微信客户端”);
  65.         }
  66.     }
  67. })

二、微信分享

以shareWebPage为例进行代码说明,微信要求的是图片必须是本地图片,所有我们在分享之前必须将图片先保存至本地,可以使用api.download的方法将图片保存到本地。

很多用户反馈分享不成功,大多数是因为图片的处理没有到位。

比如:先声明一个全局变量,var thumb;
在apiready里面从服务端获取到数据后给thumb赋值,在服务端我们需要对这个图片压缩后在返回,免得图片过大造成分享不成功

  1. api.download({
  2.     url: ‘服务器端的图片url’,
  3.     report: true,
  4.     cache: true,
  5.     allowResume:true
  6. },function(ret,err){
  7.     if (ret.state==1) {
  8.         thumb = ret.savePath;
  9.     }
  10. })

用户点击分享后:

  1. var wx = api.require(‘wx’);
  2. wx.shareWebpage({
  3.     //apiKey: ”,
  4.     scene: ‘timeline’,
  5.     title: ‘标题’,
  6.     description: ‘描述’,
  7.     thumb: ”+thumb+”,
  8.     contentUrl: ‘url’
  9. }, function(ret, err){
  10.     if(ret.status){
  11.         alert(“分享成功”);
  12.     }
  13. });

三、qq登录

QQ登录的原理跟微信就差不多了,但是感觉腾讯没有返回一个类似唯一值的东西貌似不太好。
出现110404的错误,大多是因为config.xml里面urlScheme和appkey的配置错误,要写成tencent加上你的appkey。例:tencent0000000001

  1. var obj = api.require(‘qq’);
  2. obj.login(function(ret,err){
  3.     if(ret){
  4.         api.showProgress({
  5.             style: ‘default’,
  6.             animationType: ‘fade’,
  7.             title: ‘登录中…’,
  8.             text: ‘请稍后…’,
  9.             modal: false
  10.         });
  11.         //验证成功
  12.         var openId = ret.openId;
  13.         var accessToken = ret.accessToken;
  14.         //获取用户基本信息
  15.         obj.getUserInfo(function(ret,err) {
  16.                 api.hideProgress();
  17.             if (ret.status) {
  18.                 //获取成功后的操作
  19.             }
  20.         });
  21.     }
  22. });

四、QQ分享

qq分享以shareNews为例子,有个问题是这个在文档里面并没有一个处理返回的一个操作,所以在app就没法判断是否已经分享出去。也就是没有一个function(ret,err){}的一个处理。

这个例子就比较简单了,

  1. var obj = api.require(‘qq’);
  2. obj.shareNews({
  3.     url:’http://www.uzmap.com’,
  4.     title:’新闻分享’,
  5.     description:’新闻描述’,
  6.     imgUrl:’/wp-content/uploads/aaacj/20200303/wkdzt5gvz3u.jpg’
  7. });

 

 

本文地址:H5W3 » apicloud微信QQ等第三方登录分享实现

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址