react native集成友盟umeng sdk实现微博分享,QQ分享,微信分享、朋友圈分享,web前端开发者在react native下借助集成友盟umeng sdk社会化umeng分享sdk实现微博分享,QQ分享,微信、朋友圈分享功能,umeng 分享sdk的集成方式对于前端开发者是怎么样的呢?接下来看看react native前端如何实现集成友盟分享sdk,请耐心看完绝对是干货。由于我在集成这个的时候碰到太多的坑,都是参照简书,CSDN等博客,却发现那些是给android开发者看的,☁️☁️☁️以下是以微信安卓为例

第一步 申请集成所需的key-

 

友盟appkey 前往https://www.umeng.com注册账号,然后添加一个自己的移动应用产品 在统计类目下都行,主要是获取一个appkey
微信开发者 appid secret  前往https://open.weixin.qq.com/cgi-bin/index?t=home/index&lang=zh_CN创建一个自己的移动应用

第二步 下载所需要的sdk

前往https://developer.umeng.com/sdk/reactnative寻找reactnative的sdk,选择精简版的下载
\"\"\"\"

 第三步 将下载的文件放入相应文件夹

首先预览下载的文件夹

\"\"

如果目录一致的话就可以继续了!⬇️⬇️⬇️⬇️⬇️⬇️

1.回到自己的项目目录 ~~~/android/app  ;这个目录下如果没有libs文件夹的话自己建一个,然后将下载的文件夹中所有的.jar文件都放到这里!休息30秒.....
2.到下载的文件夹里面看看,找到所有的
.java类文件,再休息10秒....
  到项目目录~~~/android/app/src/main/java/com/*包名*/    ;如果不存在invokenative文件夹的话,建一个。将那几个java类放到这里。

3.回到下载的文件夹中。找到所有的res目录中的文件,休息10秒...

回到项目中~~~/android/app/src/main   ;如果不存在res目录,自己建一个。将下载的res目录中的文件与这个res合并记得是合并

4.将 ShareUtil.js 放到项目react前端开发目录中,稍后会导入使用

至此文件都已经放好了,但是它不会正确的被加载

第四步 修改文件内容 

1.将jar正确依赖进来

找到~~/android/app/build.gradle

dependencies{
    compile fileTree(dir: \'libs\', include: [\'*.jar\']) //添加
}

2.将各包类正确导入

找到invokenative文件夹下的几个java类将文件的第一行修改

package com.*包名*.invokenative;

3.初始化分享

1⃣️找到 DplusReactPackage.java,注释不需要的两行
 

modules.add(new ShareModule(reactContext));//分享
//modules.add(new PushModule(reactContext));//推送
//modules.add(new AnalyticsModule(reactContext));//统计

2⃣️找到 MainActivity.java 追加

/**
     *share 初始化
     */
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
        ShareModule.initSocialSDK(this);
    } 
    /**
    *
    *share 回调代码
    */
    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
        UMShareAPI.get(this).onActivityResult(requestCode, resultCode, data);
    }

3⃣️找到MainApplication.java 

导入包

import com.包名.invokenative.DplusReactPackage;
import com.包名.invokenative.RNUMConfigure;
import com.umeng.socialize.PlatformConfig;
import com.umeng.commonsdk.UMConfigure;

 修改:

protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    new DplusReactPackage(),//添加这行
public void onCreate() {
        super.onCreate();
        SoLoader.init(this, /* native exopackage */ false);
        RNUMConfigure.init(this, \"友盟的appkey\", \"Umeng\", UMConfigure.DEVICE_TYPE_PHONE, \"\"); //添加

最后添加:

//必须是真是有效的自己申请的
{
        PlatformConfig.setWeixin(\"微信appid\", \"微信secret\");
        PlatformConfig.setSinaWeibo(\"同理\", \"同理\", \"http://sns.whalecloud.com\");
        PlatformConfig.setQQZone(\"同理\", \"同理\");
    }

 

4.添加分享所需的权限

找到 AndroidManifest.

    <!--share-->
    <uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" /> 
    <uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\" /> 
    <uses-permission android:name=\"android.permission.READ_PHONE_STATE\" /> 
    <uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/> 
    <uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/> 
    <uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\" /> 
    <uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\" /> 
    <uses-permission android:name=\"android.permission.ACCESS_LOCATION_EXTRA_COMMANDS\" />

    <activity
    android:name=\".WBShareActivity\"
    android:configChanges=\"keyboardHidden|orientation\"
    android:screenOrientation=\"portrait\" >
    <intent-filter>
        <action android:name=\"com.sina.weibo.sdk.action.ACTION_SDK_REQ_ACTIVITY\" />
        <category android:name=\"android.intent.category.DEFAULT\" />
    </intent-filter>
    </activity>
    <activity
        android:name=\"com.sina.weibo.sdk.component.WeiboSdkBrowser\"
        android:configChanges=\"keyboardHidden|orientation\"
        android:windowSoftInputMode=\"adjustResize\"
        android:exported=\"false\" >
    </activity>
    <service android:name=\"com.sina.weibo.sdk.net.DownloadService\"
        android:exported=\"false\"></service>
    <activity
        android:name=\".wxapi.WXEntryActivity\"
        android:configChanges=\"keyboardHidden|orientation|screenSize\"
        android:exported=\"true\"
        android:screenOrientation=\"portrait\"
        android:theme=\"@android:style/Theme.Translucent.No Bar\" />
    <activity
        android:name=\"com.tencent.tauth.AuthActivity\"
        android:launchMode=\"singleTask\"
        android:noHistory=\"true\" >
    
        <intent-filter>
            <action android:name=\"android.intent.action.VIEW\" />
            <category android:name=\"android.intent.category.DEFAULT\" />
            <category android:name=\"android.intent.category.BROWSABLE\" />
            <data android:scheme=\"tencent100424468\" />  
        </intent-filter>
    </activity>
    <activity
        android:name=\"com.tencent.connect.common.AssistActivity\"
        android:screenOrientation=\"portrait\"
        android:theme=\"@android:style/Theme.Translucent.No Bar\"
        android:configChanges=\"orientation|keyboardHidden|screenSize\"/>
    <activity
        android:name=\".apshare.ShareEntryActivity\"
        android:configChanges=\"keyboardHidden|orientation|screenSize\"
        android:exported=\"true\"
        android:screenOrientation=\"portrait\"
        android:theme=\"@android:style/Theme.Translucent.No Bar\" />
    < -data
        android:name=\"UMENG_APPKEY\"
        android:value=\"友盟appkey\" >   
    </ -data>

 第五步 在前端页面使用分享

例如需要在首页使用:

index.js

import ShareUtil from \'../../../config/libs/ShareUtil\';//导入分享的模块

//调用方法
showShowSharePanel(){
   ShareUtil.shareboard(\'\',\'imgUrl\',\'https://m.baidu.com/\',\'百度一下,你就知道\',[0,2,3],(code,message) =>{
      Alert.alert(\' \', \'msg:\' + message);
    });
  }

 

收藏 打印