React Native 集成友盟社会化分享 SDK --- Android

felix-cao commented 5 years ago

一、下载友盟 SDK

本文的目的是实现如下图所示的分享效果：

打开友盟 SDK React Native 资源，下载“社会化分享 SDK”，在旁边的"设置"中选择自己要集成的第三方平台，如下图：

解压后文件目录如下：

Android，存放着Android环境下集成所需要的 jar、资源（res）
iOS，存放着iOS环境下集成所需要的资源文件
ReactNative，存放着桥接文件

二、项目准备

假设你已经有了 React Native 的开发环境，若没有，请移步《 React Native入门 --- Expo 构建 React Native APP》。由于网络原因若无法使用 expo 可直接使用 npm install -g react-native-cli

初始化项目

初始化项目，然后再模拟器上跑一把确保跑的通

$ expo init just-eat # 或 react-native init just-eat
$ cd just-eat
$ yarn start

如果使用了 expo 初始化后，需要 expo eject 命令分离出 android 原生代码。

三、开始集成

3.1、将`.jar`包放入`libs`

在 /just-eat/android/app 下创建 libs 文件夹，然后把从友盟下载的下列文件放置新创建的 libs 文件夹

Android/common/common_android_1.5.4/normal
- umeng-common-1.5.4.jar
Android/share/share_android_6.9.4/main/libs
- umeng-share-core-6.9.4.jar
- umeng-sharetool-6.9.4.jar
Android/share/share_android_6.9.4/shareboard/libs
- umeng-shareboard-widget-6.9.0.jar
Android/share/share_android_6.9.4/platforms/dingding/libs
- libddshare.jar
- umeng-share-Ding-6.9.4.jar
Android/share/share_android_6.9.4/platforms/QQ精简版/libs
- umeng-share-QQ-simplify-6.9.4.jar
Android/share/share_android_6.9.4/platforms/微信精简版/libs
- umeng-share-wechat-simplify-6.9.4.jar
Android/share/share_android_6.9.4/platforms/新浪精简版/libs
- umeng-share-sina-simplify-6.9.4.jar

3.2、将三个 `.java` 放入 `module` 文件夹

在 just-eat/android/app/src/main/java/com/just-eat/ 文件夹下创建module，并将下列文件放置新创建的module` 文件夹

ReactNative/common/common_reactnative_1.0.0/common_android
- DplusReactPackage.java
- RNUMConfigure.java
ReactNative/share/share_reactnative_1.0.0/share_android
- ShareModule.java

分别打开上面的三个 .java 文件，将第一行的

package com.umeng.soexample.invokenative;

改为

package com.just-eat.module;

我们顺便改了一下： DplusReactPackage.java

// 我们只用了分享，其他的注释掉
// modules.add(new PushModule(reactContext));
// modules.add(new AnalyticsModule(reactContext));

3.3、`res`下的所有文件和文件夹

复制res下的所有文件和文件夹放入android工程目录下, 即android\app\src\main\res。

3.4、修改 `MainApplication.java` 和 `MainActivity.java`

MainApplication.java 和 MainActivity.java 这两个文件是我们项目中 Android 原生提供的。分别在这两个文件中引入 3.2 中的 .java 文件

3.4.1、在 `MainApplication.java`，里面需要添加 `DplusReactPackage` 和 `RNUMConfigure`

...
/** 引入文件，这里也是加上的 **/
import com.reactnative_umengsharedemo.invokenative.DplusReactPackage;
import com.reactnative_umengsharedemo.invokenative.RNUMConfigure;
import com.umeng.commonsdk.UMConfigure;
import com.umeng.socialize.PlatformConfig;
...

public class MainApplication extends Application implements ReactApplication {

  ...
  // 新加这段 设置使用的三方平台的appkey：
  {
    PlatformConfig.setWeixin("wxdc1e388c3822c80b", "3baf1193c85774b3fd9d18447d76cab0");
    //豆瓣RENREN平台目前只能在服务器端配置
    PlatformConfig.setSinaWeibo("3921700954", "04b48b094faeb16683c32669824ebdad", "http://sns.whalecloud.com");
    PlatformConfig.setYixin("yxc0614e80c9304c11b0391514d09f13bf");
    PlatformConfig.setQQZone("100424468", "c7394704798a158208a74ab60104f0ba");
  }

  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
   public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    // 新增下面一行
    RNUMConfigure.init(this, "59892f08310c9307b60023d0", "Umeng", UMConfigure.DEVICE_TYPE_PHONE, "669c30a9584623e70e8cd01b0381dcb4");
  }
...

3.4.2、在 `MainActivity.java` 引入 `ShareModule`

...
// 引入文件
import com.reactnative_umengsharedemo.invokenative.ShareModule;
import com.umeng.socialize.UMShareAPI;
import android.content.Intent;
import android.os.Bundle;
...

// 初始化代码
@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);
}

3.5 配置 AndroidManifest.xml

因为分享需要用到一些权限、Activity、Appkey及相关第三方key的配置，所以需要在AndroidManifest.xml文件中添加如下的代码：

    <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.INTERNET" />
    <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" />

在 application 段加入以下代码

...
   <!-- 微信 -->
     <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" />
             <!-- tencent + 自己的qq app id  -->
             <data android:scheme="tencent110631169" />
         </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"
         android:screenOrientation="portrait" >
     </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>
    <meta-data  
        android:name="UMENG_APPKEY"  
        android:value="561cae6ae0f55abd990035bf" >   <= 改为自己申请的友盟Key  
    </meta-data>
...

四、使用分享模块

在 just-eat 根目录下创建 src/share，将 SDK 中的ReactNative\common\common_reactnative_1.0.0\js\ShareUtil.js 放入到 share 中。

在 App.js 中使用：

...
import ShareUtil from './src/share/ShareUtil';
...
render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
        {/* 新增的 */}
        <View>
          <Button title="share" onPress={this.onPressButton.bind(this)}></Button>
        </View>
       {/* ... */}
      </View>
    );
  }
// onPressButton 函数是新增的
onPressButton() {
    console.log('start to share--------');
    ShareUtil.shareboard('Check react-native umeng share sdk','imgUrl','https://github.com/ubbcou/blog/issues/18','this is Title.',[2,3,0,1,4,32],(code,message) =>{
      console.log('title', 'msg:' + message);
    });
  }
...

这里的 shareboard 函数可以参考文档分享面板函数。

封装授权码

我这里改造了一下，目的是封装授权码，创建 src/util 文件夹，创建 share.js 文件，输入如下代码

var { NativeModules } = require('react-native');

/**
 * @text, 分享内容
 * @img, 图片地址，可以为链接，本地地址以及res图片地址
 * @url, 为分享链接，可以为空
 * @title, 为分享链接的标题
 *   */
function open(text, img, url,title, callback) {
  NativeModules.UMShareModule.shareboard(text, img, url, title, [2,3,0,1,4,32], callback);
}

module.exports = { open };

最后跑一把试试吧

Reference

felix-cao commented 5 years ago

微信不能分享

1、签名文件不一致

我们平时运行项目使用的是debug模式，使用命令在（stodio中的terminal, keytool -v -list -keystore 签名文件路径）中，生成的也是debug模式下的签名文件
因为我们的分享需要在开发平台注册MD5的签名,但是我们的微信开发平台的配置的MD5的签名是release(正式包)的签名

再一个原因是微信开放平台中填写的签名，必须是小写，且没有:，我这里的错误就是这个原因导致的：
```
FE:DE:FE:00:C6:53:46:05:71:2E:9A:71:55:06:66:97
```
实际上应该填写：fedefe00c6534605712e9a7155066697

总结：由于这个原因，导致签名文件不一致（一个正式，一个测试），导致微信的分享不能正常吊起来，这是比较正常的原因

解决：在 Android/app/build.gradle 中进行配置，配置同样的签名文件地址，UmengTool.getSignature(this)（可以打印签名，和用微信工具生成的签名是一样的）

signingConfigs {
        debug {
            keyAlias 'smart_jishou'
            keyPassword '123456'
            storeFile file('../keystores/smart_jishou.jks')
            storePassword '123456'
        }
        release {
            keyAlias 'smart_jishou'
            keyPassword '123456'
            storeFile file('../keystores/smart_jishou.jks')
            storePassword '123456'
        }
}

 buildTypes {
        debug {
            minifyEnabled false
            signingConfig signingConfigs.debug
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }

        release {
            minifyEnabled false
            signingConfig signingConfigs.release
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
}

2、SDK 调试日志

请参考 [SA10221]SDK调试日志

3、[SX10000]请让您的WXEntryActivity继承com.umeng.socialize.weixin.view.WXCallbackActivity

再你的包目录下创建 wxapi文件夹, 再创建 WXEntryActivity.java 输入如下代码：

package com.smart_jishou.wxapi;

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

public class WXEntryActivity extends WXCallbackActivity {

}

4、错误码：2003 错误信息：分享失败----[SA10001]权限验证失败，请检查你的签名以及该平台Appkey权限

往上拉，可以看到 本次打包的签名

最后卸载了微信和你自己的APP，重新装一遍，就可以了。

felix-cao commented 5 years ago

开启log

Android studio 下又个 logcat:

felix-cao / Blog