apicloud apicloud

注册
查看: 11573|回复: 37

[模块教程] 微信登录分享、QQ登录分享实现方法及注意事项

 

主题:
53
帖子:
333
云币:
552

APICloud粉丝APICloud毕业勋章一周年

[模块教程] 微信登录分享、QQ登录分享实现方法及注意事项

 
11573 37 | 发表于 2015-9-22 23:05:15 |阅读模式 | |
本帖最后由 流浪男 于 2015-9-22 23:13 编辑

针对用户最近的问题,对微信登录分享、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.             
  19.             if(ret.status){
  20.                 //获取用户信息
  21.                 var accessToken = ret.accessToken;
  22.                 var openId = ret.openId;
  23.                 wx.getUserInfo({
  24.                     accessToken: ret.accessToken,
  25.                     openId: ret.openId
  26.                 }, function(ret,err){

  27.                     if(ret.status){
  28.                         //将信息同步至服务器
  29.                          api.ajax({
  30.                             url: '',//你的服务器地址
  31.                             method: 'post',
  32.                             cache:true,
  33.                             timeout: 30,
  34.                             dataType: 'json',
  35.                             returnAll:false,
  36.                             data:{
  37.                                 values:{
  38.                                     nickname:ret.nickname,
  39.                                     avatar:ret.headimgurl,
  40.                                     privilege:ret.privilege,
  41.                                     unionid:ret.unionid,
  42.                                     city:ret.city
  43.                                 }
  44.                             }
  45.                         },function(ret,err){
  46.                             api.hideProgress();
  47.                             if(ret.code==1){
  48.                                 api.toast({
  49.                                     msg: '登录成功',
  50.                                     duration:2000,
  51.                                     location: 'top'
  52.                                 });
  53.                                 
  54.                             }else{
  55.                                 api.alert({
  56.                                     msg:''+ret.msg+''
  57.                                 });
  58.                             }
  59.                         })
  60.                     }
  61.                 });
  62.             }
  63.         });
  64.         
  65.     }else{
  66.         if(api.systemType=='android' && err.code==3){
  67.             alert("请安装微信客户端");
  68.         }
  69.     }
  70. })
复制代码


二、微信分享

以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:'http://upload.wabei.cn/2011/0807/20110807025817844.jpg'
  7. });
复制代码








2

查看全部评分

驾校小白

UID:136639

主题:
6
帖子:
16
云币:
33
发表于 2015-9-25 17:08:18 |
流浪男 发表于 2015-9-24 22:43
到微信或者qq开放平台申请

名称:qq
参数:urlScheme
描述:配置qq专用的URL Scheme,使得本应用可以启动qq客户端,并与之交换数据,同时可以从qq客户端返回到本应用
配置示例:
           <feature name="qq">
                <param name="urlScheme" value="tencent101064640" />
                <param name="apiKey" value="101064640" />
           </feature>
字段描述:
    1、param-urlScheme:声明此字段为URL Scheme类型
    2、param- value:对应urlScheme类型的值。通过拼接tencent和腾讯开放平台申请的id号获得

apiKey指的是腾讯开放平台的APP ID 还是 APP KEY?
是不是要完整的申请移动应用接入?
包括安装包也要提交上去?

主题:
65
帖子:
169
云币:
121
发表于 2015-9-23 08:15:58 |
注意:在安卓端可以提示用户没有安装微信端,但是ios端切忌不要加任何提示?
这是为什么呢?

主题:
21
帖子:
160
云币:
1553

APICloud粉丝一周年

发表于 2015-9-23 09:04:11 |
看一下config 配置文件

业余车手

UID:22414

主题:
8
帖子:
815
云币:
12667

版主勋章APICloud粉丝

发表于 2015-9-23 09:06:50 |
感谢分享

主题:
1077
帖子:
4831
云币:
2147218641

圣诞节捣蛋鬼APICloud大会专属勋章足球狗儿童节快乐

发表于 2015-9-23 09:39:37 |
分享分享咯

新手上路

UID:60569

主题:
12
帖子:
40
云币:
108

一周年

发表于 2015-9-24 19:04:14 |
apiKey,    apiSecret  这两个参数那里来的,

主题:
53
帖子:
333
云币:
552

APICloud粉丝APICloud毕业勋章一周年

 楼主| 发表于 2015-9-24 22:43:45 |
sven 发表于 2015-9-24 19:04
apiKey,    apiSecret  这两个参数那里来的,

到微信或者qq开放平台申请

主题:
30
帖子:
74
云币:
123
发表于 2015-10-15 17:30:33 |
“注意:在安卓端可以提示用户没有安装微信端,但是ios端切忌不要加任何提示”,对这句话很感兴趣,最近刚刚在弄这一块,何解?

新手上路

UID:54932

主题:
12
帖子:
117
云币:
384
发表于 2015-10-15 22:49:16 |
ok郎君 发表于 2015-10-15 17:30
“注意:在安卓端可以提示用户没有安装微信端,但是ios端切忌不要加任何提示”,对这句话很感兴趣,最近刚 ...

可能是因为在app store上线审核的时候,如果弹出这样的提示,会被apple拒绝
1234下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表