您的位置: 首页  >  IT文章  >  【ReactNaitve】社会化分享QQ/QQ空间/微信/朋友圈/新浪微博等

【ReactNaitve】社会化分享QQ/QQ空间/微信/朋友圈/新浪微博等

分类: IT文章 • 2024-12-30 08:28:55

这篇讲的是umeng分享自动集成方式之Android。

1.注册友盟( umeng ) 账号，新建App项目拿到AppKey

2.第三方分享平台

2.1 QQ  腾讯开放平台【公司项目最好用公司邮箱申请的账号】

创建App应用，得到APP ID和APP KEY （之后还需在腾讯开放平台配置对应的APP给腾讯官方审核）

qq第三方登陆授权失败110401错误码解决办法介绍

2.2 微信  微信开放平台

2.3 微博  微博开放平台

3.友盟官网下载sdk，点击③在弹窗中选择要分享的平台，如步骤④，点确定最后下载得到完整的sdk包。

 【ReactNaitve】社会化分享QQ/QQ空间/微信/朋友圈/新浪微博等

以上。准备工作完成了。接下来做分享的底层部署到项目中。【Android/IOS底层部署配置文件可参考上图右上角“Demo下载”】

【Android】  部署开始

4.解压sdk包,打开ReactNative目录

4.1。将其中所有的.jar文件，复制到项目的androidapp目录的libs里（没有libs目录则新建一个）

【ReactNaitve】社会化分享QQ/QQ空间/微信/朋友圈/新浪微博等

4.2。将其中所有跟android相关的.java文件，复制到项目的包名目录（比如com.XXX）的umeng里（没有umeng目录则新建一个）

【ReactNaitve】社会化分享QQ/QQ空间/微信/朋友圈/新浪微博等【ReactNaitve】社会化分享QQ/QQ空间/微信/朋友圈/新浪微博等

 修改这些.java文件的包名 com.XXX.umeng

4.3。包名目录下创建wxapi目录，新建WXEntryActivity.java文件。代码如下 com.wxapi为其包名

package com.XXX.wxapi;

import com.umeng.socialize.weixin.view.WXCallbackActivity;

public class WXEntryActivity extends WXCallbackActivity {

}
View Code

 

5.配置androidapp的build.gradle文件

defaultConfig {
        applicationId "com.XXX" //包名
        .
        .
        multiDexEnabled true
        manifestPlaceholders = [
                .
                .
                qqappid:"100424468"    //你在腾讯开放平台申请到的APP ID
        ]

    }
.
.

dependencies {
   .
   .
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation 'com.android.support:multidex:1.0.3' // for umeng D8:Cannot fit requested classes in a single dex file
}
View Code

6.配置AndroidManifest.xml。 权限配置、配置QQ/微信等开放平台的activity。

其中qq的activity配置的tencent101773792改为tencentXXXXXX，XXXXXX为步骤2.1得到的APP ID值

<manifest xmlns:andro>
  package="com.XXX">      <!-- 配置的包名eg：com.XXX -->

    <uses-permission android:name="android.permission.INTERNET" />
    <!-- 友盟权限申请开始 -->
    <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.CALL_PHONE" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

    <!-- QQ、QQ空间所需权限 -->
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
    <uses-permission android:name="android.permission.GET_ACCOUNTS" />
    <uses-permission android:name="android.permission.USE_CREDENTIALS" />
    <!-- QQ纯图分享或避免其它平台纯图分享的时候图片不被压缩 -->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>   
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <!-- 友盟权限申请结束 -->
    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme"
      
      >
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
.
.
.
      <!-- 友盟开始 -->
      <!-- 微信 -->
      <activity 
        android:name=".wxapi.WXEntryActivity" 
        android:configChanges="keyboardHidden|orientation|screenSize" 
        android:exported="true" 
        android:theme="@android:style/Theme.Translucent.NoTitleBar" />
      
      <!-- qq -->
        <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="tencent101773792" />
          </intent-filter>
        </activity>
        <activity
        android:name="com.tencent.connect.common.AssistActivity"
        android:theme="@android:style/Theme.Translucent.NoTitleBar"
        android:configChanges="orientation|keyboardHidden|screenSize"/>
        <!-- 新浪 -->
        <activity
          android:name="com.umeng.socialize.media.WBShareCallBackActivity"
          android:configChanges="keyboardHidden|orientation"
          android:theme="@android:style/Theme.Translucent.NoTitleBar"
          android:exported="false"
          >
        </activity>
        <activity 
          android:name="com.sina.weibo.sdk.web.WeiboSdkWebActivity"
          android:configChanges="keyboardHidden|orientation"
          android:exported="false"
          android:windowSoftInputMode="adjustResize"
        >
        </activity>
        <activity
          android:theme="@android:style/Theme.Translucent.NoTitleBar.Fullscreen"
          android:launchMode="singleTask"
          android:name="com.sina.weibo.sdk.share.WbShareTransActivity">
          <intent-filter>
              <action android:name="com.sina.weibo.sdk.action.ACTION_SDK_REQ_ACTIVITY" />
              <category android:name="android.intent.category.DEFAULT" />
          </intent-filter>
        </activity>

        <!--value的值填写你在友盟后台申请的应用Appkey-->
        <meta-data android:value="5d5bb17a570df3aa260003e2" android:name="UMENG_APPKEY"/>
        <!-- 友盟结束 -->
    </application>

</manifest>
View Code

7.配置MainApplication.java

package com.XXX;  //配置的包名

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.reactnative.androidsdk.FBSDKPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;


//友盟
import com.umeng.commonsdk.UMConfigure;
import com.umeng.socialize.PlatformConfig;
import 包名.umeng.DplusReactPackage;
import 包名.umeng.RNUMConfigure;


public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            new DplusReactPackage()
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    // 初始化MultiDex
    android.support.multidex.MultiDex.install(this); 
    SoLoader.init(this, /* native exopackage */ false);
    // umeng日志
    UMConfigure.setLogEnabled(true);
    // 初始化umeng接口
    RNUMConfigure.init(this, "5d5bb17a570df3aa260003e2", "Umeng", UMConfigure.DEVICE_TYPE_PHONE,"");

  }
  // 设置使用的三方平台的appkey：
  /*{
    PlatformConfig.setWeixin("wxdc1e388c3822c80b", "3baf1193c85774b3fd9d18447d76cab0");
    PlatformConfig.setSinaWeibo("3921700954", "04b48b094faeb16683c32669824ebdad", "http://sns.whalecloud.com");
    PlatformConfig.setQQZone("101773792", "9553206c62b3c205229954f2d09bccfb");
  }*/
  {

    PlatformConfig.setWeixin("wxdc1e388c3822c80b", "3baf1193c85774b3fd9d18447d76cab0");
    PlatformConfig.setSinaWeibo("3921700954", "04b48b094faeb16683c32669824ebdad", "http://sns.whalecloud.com");
    //PlatformConfig.setYixin("yxc0614e80c9304c11b0391514d09f13bf");
    PlatformConfig.setQQZone("100424468", "c7394704798a158208a74ab60104f0ba");

  }
  {
    PlatformConfig.setWeixin("wxdc1e388c3822c80b", "3baf1193c85774b3fd9d18447d76cab0");
    //豆瓣RENREN平台目前只能在服务器端配置
    PlatformConfig.setSinaWeibo("3921700954", "04b48b094faeb16683c32669824ebdad","http://sns.whalecloud.com");
    //PlatformConfig.setYixin("yxc0614e80c9304c11b0391514d09f13bf");
    PlatformConfig.setQQZone("100424468", "c7394704798a158208a74ab60104f0ba");
    PlatformConfig.setTwitter("3aIN7fuF685MuZ7jtXkQxalyi", "MK6FEYG63eWcpDFgRYw4w9puJhzDl0tyuqWjZ3M7XJuuG7mMbO");
    //PlatformConfig.setAlipay("2015111700822536");
    //PlatformConfig.setLaiwang("laiwangd497e70d4", "d497e70d4c3e4efeab1381476bac4c5e");
    //PlatformConfig.setPinterest("1439206");
    //PlatformConfig.setKakao("e4f60e065048eb031e235c806b31c70f");
    //PlatformConfig.setDing("dingoalmlnohc0wggfedpk");
    //PlatformConfig.setVKontakte("5764965","5My6SNliAaLxEm3Lyd9J");
    //PlatformConfig.setDropbox("oz8v5apet3arcdy","h7p2pjbzkkxt02a");
    //PlatformConfig.setYnote("9c82bf470cba7bd2f1819b0ee26f86c6ce670e9b");

  }
}
View Code

8.配置MainActivity.java

package com.XXX;  //包名

import com.facebook.react.ReactActivity;


//友盟
import android.os.Bundle;
import com.umeng.socialize.UMShareAPI;
import com.umeng_share_react_native.umeng.ShareModule;
import android.content.Intent;
public class MainActivity extends ReactActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ShareModule.initSocialSDK(this);//友盟
    }
    //友盟
    @Override
        public void onActivityResult(int requestCode,int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        UMShareAPI.get(this).onActivityResult(requestCode, resultCode, data);

        //MainApplication.getCallbackManager().onActivityResult(requestCode, resultCode, data);
    }
    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "com.XXX";   //包名
    }
}
View Code

【Android】  部署完成

9.导入桥接文件，将“Demo下载”的libs中的ShareUtil.js文件复制到项目的组件中

【ReactNaitve】社会化分享QQ/QQ空间/微信/朋友圈/新浪微博等

然后调用，则可完成Android端社交分享功能

import React, {Component} from 'react';
import ShareUtil from "../component/umengShare/ShareUtil";
.
.
.

export default class App extends Component{
.
.
 // 依据umeng各平台分享的调用封装，以sharemedia区分。0:qq,1:新浪, 2:微信, 3:微信朋友圈,4:qq空间 等
  typeShare(sharemedia, optionsOject) {
    let options = {
      ...optionsOject,
      text: optionsOject.text || "填充默认text内容",
      img: optionsOject.img || "http://www.baidu.com/test.jpg",
      weburl: optionsOject.weburl || "http://www.baidu.com/",
      title: optionsOject.title || "填充默认title内容"
    };
    ShareUtil.share(
     options.text, //  text 为分享内容
      options.img, //  img 为图片地址，可以为链接，本地地址以及res图片（如果使用res,请使用如下写法：res/icon.png）
      options.weburl, //  weburl 为分享链接(以http开头)，可以为空
      options.title, //  title 为分享链接的标题
      sharemedia, //  sharemedia  ①.为boardShare时为分享平台数组，如：var sharemedia=[0, 1, 2, 3, 4...]; //0:qq,1:新浪, 2:微信, 3:微信朋友圈,4:qq空间... ②单个share时为享平台，如：var sharemedia=0;  //0:qq,1:新浪, 2:微信, 3:微信朋友圈,4:qq空间...
      options.callback //  callback  中code为错误码，当为0时，标记成功。message为错误信息
    );
  }
  //demo 分享面板的使用
  boardShare() {
    var list = [0, 1, 2, 3, 4]; //0:qq,1:新浪, 2:微信, 3:微信朋友圈,4:qq空间
    ShareUtil.shareboard(
      "sssss",
      "http://dev.umeng.com/images/tab2_1.png",
      "http://www.umeng.com/",
      "title",
      list,
      (code, message) => {
        console.warn(message);
      }
    );
  }
  //demo 新浪微博分享的使用
  sinaweiboShare(){
    ShareUtil.share('sssss','http://dev.umeng.com/images/tab2_1.png','http://www.umeng.com/','title',1,(code,message) =>{
      console.warn(message)
    });
  }
  //demo QQ分享的使用
  qqShare(){
    ShareUtil.share('sssss','http://dev.umeng.com/images/tab2_1.png','http://www.umeng.com/','title',0,(code,message) =>{
      console.warn(message)
    });
  }
  //demo 微信分享的使用
  wxShare(){
   ShareUtil.share('sssss','http://dev.umeng.com/images/tab2_1.png','http://www.umeng.com/','title',2,(code,message) =>{
      console.warn(message)
    });
  }
 // qq打开授权调用
  qqAuth() {
    ShareUtil.auth(0, (code, result, message) => {
      if (code == 200) {
        console.warn(code, result, message);
      }
    });
  }


}
View Code

【Others Notice】

编译过程中报  "D8:Cannot fit requested classes in a single dex file"

原因是项目过大。上文代码中加入解决如下   ①在 app 的 build.gradle 文件中配置 ②在自定义的 application 【即7.配置MainApplication.java】 中初始化 MultiDex

【ReactNaitve】社会化分享QQ/QQ空间/微信/朋友圈/新浪微博等【ReactNaitve】社会化分享QQ/QQ空间/微信/朋友圈/新浪微博等

分享到QQ现象：

1.安装了QQ的会自动发起QQ分享好友面板。若没安装QQ要跳转到浏览器登录，这时候是需要腾讯qq那边给开通一个webview的权限的，那边开通了之后，这边就可以跳转至浏览器在webview里面登录了。

2.QQ分享   参考资料： 报2004错误信息：分享内容不合法---该平台不支持纯文本分享

！！！注意！！！：以上是接入分享平台成功，并能附带分享参数。而真正的分享出去是需要在各个开放平台注册真实的应用，搭配得到的AppId和AppKey值配置的。

参考资料：react-native 集成 umeng 分享

相关推荐