美文网首页React Native学习程序员
react native 实现MobSDK微信分享文件(专治各种

react native 实现MobSDK微信分享文件(专治各种

作者: 雨飞飞雨 | 来源:发表于2018-06-18 15:46 被阅读11次

    照例写在前面的话,在之前做分享的时候,我用的是友盟的分享,这次换成了MOB的分享,碰到了很多的问题,这里给大家一一分享一下,那么我们开始吧!

    http://www.mob.com/是他们的官方网站,我们的标题是react native来实现分享,实际上的操作时在react native层调用本地层的代码,也就是调用androidios层的代码来实现,中间的调用只是一个桥接,关键部分还是在native,所以这里大家关于react native调用android的源码,大家可以看我之前的这篇文章

    那么,我们开始吧:

    访问网站它们的官网,打开快速集成页面,就是这个地址,貌似他们的网页改版了。

    现在的android已经不需要自己去下载jar包了,所以我们现在第一步是:

    配置Gradle

    第一步:

    打开项目根目录的build.gradle,在buildscrip–>dependencies 模块下面添加 classpath 'com.mob.sdk:MobSDK:+':

    buildscript {
        repositories {
            jcenter()
        }
     
        dependencies {
            ...
            classpath 'com.mob.sdk:MobSDK:+'
     
        }
    }
    
    image
    第二步:

    如果你的项目里集成了很多模块,那就记得哪个模块使用分享的sdk,就在哪个项目去集成:

    在使用到Mob产品的module下面的build.gradle文件里面添加引用,例如:

    apply plugin: 'com.mob.sdk'
    
    image

    说明:做完上面这两点,你就可以async了,这里有个坑就是,当你async完以后,要看一下这个包onKeyShare有没有添加到你的库里,有可能不存在。这个是分享要用到的,如果没有,后面就没有办法走了。如果真的不存在的话,在classpath 'com.mob.sdk:MobSDK:+'后面按个空格,在重新async几次就可以了。

    第三步:

    第三步,配置mobkey和秘钥 (与第2步是一个gradle中;注意:方法是配置到文件根目录,
    与android并列,不要配置到android里面哦)

    MobSDK {
        appKey "d580ad56b4b5"
        appSecret "7fcae59a62342e7e2759e9e397c82bdd"
     
        ShareSDK {
            //平台配置信息
            devInfo {
                SinaWeibo {
                    appKey "568898243"
                    appSecret "38a4f8204cc784f81f9f0daaf31e02e3"
                    callbackUri "http://www.sharesdk.cn"
                    shareByAppClient false
                }
                Wechat {
                    appId "wx4868b35061f87885"
                    appSecret "64020361b8ec4c99936c0e3999a9f249"
                }
                QQ {
                    appId "100371282"
                    appKey "aed9b0303e3ed1e27bae87c33761161d"
                }
                Facebook {
                    appKey "1412473428822331"
                    appSecret "a42f4f3f867dc947b9ed6020c2e93558"
                    callbackUri "https://mob.com"
                }
            }
        }
    

    上面的MobSDK下面的appKeyappSecret是你自己注册的账号里,添加的应用的appkey,和appSecret。而下面的各个平台的appkeyappSecret则需要你去对应平台的官网去注册。

    申请Mob的appkey与appsecret请点击这里查看

    第五步:

    注:如果您没有在AndroidManifest中设置appliaction的类名,MobSDK会将这个设置为com.mob.MobApplication,但如果您设置了,请在您自己的Application类中调用:

    MobSDK.init(this,appKey,appSecret);
    

    不要用官网的:

    MobSDK.init(this);
    

    要不然会出现莫名其妙的问题。

    在这里我们假设上面你添加的appKeyappSecret和各个平台的deviceInfo都没有问题,那么我们这里就可以调用代码了。
    这里的代码是官网的那个,调用弹出框,然后出那个九宫格的,有很多平台的那个。

    @ReactMethod
    public void showShare() {
         OnekeyShare oks = new OnekeyShare();
         //关闭sso授权
         oks.disableSSOWhenAuthorize(); 
     
         // title标题,微信、QQ和QQ空间等平台使用
         oks.setTitle(getString(R.string.share));
         // titleUrl QQ和QQ空间跳转链接
         oks.setTitleUrl("http://sharesdk.cn");
         // text是分享文本,所有平台都需要这个字段
         oks.setText("我是分享文本");
         // imagePath是图片的本地路径,Linked-In以外的平台都支持此参数
         oks.setImagePath("/sdcard/test.jpg");//确保SDcard下面存在此张图片
         // url在微信、微博,Facebook等平台中使用
         oks.setUrl("http://sharesdk.cn");
         // comment是我对这条分享的评论,仅在人人网使用
         oks.setComment("我是测试评论文本");
        // 启动分享GUI
        oks.show(this);
    }
    

    官方的demo下载地址:ShareSDK-for-Android

    如果上面你没有碰到坑,那么就能调出弹出框。下面我们说一下微信的分享,这里着重说一下微信的部分。

    第一个坑:签名

    1.当你发现你能调用起微信的登录界面时,说明你async的时候文件都在,然后也初始化了。

    2.如果发现自己微信调用调起时一闪而逝,那么一定是签名的问题,微信的签名

    3.如果你设置的微信的appKeyappSecet是正式版的,那么你在测试的时候需要打包在进行测试。

    关于怎么弄微信签名,这里请自己百度。

    第二个坑:在MobSDK下的配置文件里。在各个平台的设置中,除了设置必要的的appKeyappSecet,还需要注意以下几个:

    1.sortId可以用来配置在九宫格里显示的位置,数字越小越靠前。

    2.shareByAppClient,布尔值,设置它为true表示需要客户端才可以分享。比如微信。

    3.bypassApproval,布尔值,表示是否绕过审核。

    如果你分享文本和图片,可以使用设置绕过审核,绕过审核的话,不检查appKeyappSecret,所以测试完毕以后,记得把这个字段设置为false.

    4.enable表示是否启用该平台。

    其他的字段大家可以查看官网...

    分享文件的坑

    //...
    sp.setShareType(Platform.SHARE_FILE);
    //#if def{lang} == cn
    // 待分享文件的本地地址
    //#elif def{lang} == en
    // local path of the file to share
    //#endif
    sp.setFilePath(MainActivity.testImage);
    sp.setImagePath(MainActivity.testImage);
    //...
    

    在官网的demo里只有三行代码。我们也可以给它添加上titletext.

    知道为啥只有三行代码不,因为这三行代码是必须的。如果在测试的发现空指针的错误,就说明你设置的file_pathimage_path必然有一个是空的。

    其他的一些坑

    还有一个是,关于各个平台的配置名称的。官网上这样:

    devInfo.png

    大家想要使用什么分享,就配置各个平台的数据。这里的一个坑是这样的。。

    Platform plat = ShareSDK.getPlatform(WechatMoments.NAME);
    

    在上面的代码,我们直接调用的WechatMoments.NAME,然后如果你发现并没有这个WechatMoments的时候,说明你并没有在build.gradle中配置这个平台。

    恩恩,差不多就是这样子...Over...

    相关文章

      网友评论

        本文标题:react native 实现MobSDK微信分享文件(专治各种

        本文链接:https://www.haomeiwen.com/subject/wdyneftx.html