Reaction-native-wechat Sharing the Pit of Wechat Apps

The first time I wrote it was to share some pits in the process of sharing widgets on Android. My Google and Baidu have been sharing problems for a long time, but there are still some problems that do not have good answers, so I summarize them. Many people use the RN for Wechat Sharing. yorkie/react-native-wechat This third-party library, the latest version of npm library, has no applet sharing function. Here are two solutions.

1. Modify the original react-native-wechat

1. SDK Accessing Official Documents of Wechat Development Platform
Open it on the Android side using AS (Android studio) and introduce it directly into the build.gradle of react-native-wechat app

dependencies {
  compile 'com.facebook.react:react-native:+'
  compile files('libs/libammsdk.jar')
  compile 'com.tencent.mm.opensdk:wechat-sdk-android-without-mta:+'
}

2. Modify in native WeChatModule
Introducing in WeChatModule.java

import com.facebook.react.modules.core.DeviceEventManagerModule;
import com.tencent.mm.opensdk.constants.Build;
import com.tencent.mm.opensdk.constants.ConstantsAPI;
import com.tencent.mm.opensdk.modelbase.BaseReq;
import com.tencent.mm.opensdk.modelbase.BaseResp;
import com.tencent.mm.opensdk.modelmsg.SendAuth;
import com.tencent.mm.opensdk.modelmsg.SendMessageToWX;
import com.tencent.mm.opensdk.modelmsg.WXFileObject;
import com.tencent.mm.opensdk.modelmsg.WXImageObject;
import com.tencent.mm.opensdk.modelmsg.WXMediaMessage;
import com.tencent.mm.opensdk.modelbiz.WXLaunchMiniProgram;
import com.tencent.mm.opensdk.modelmsg.WXMiniProgramObject;
import com.tencent.mm.opensdk.modelmsg.WXMusicObject;
import com.tencent.mm.opensdk.modelmsg.WXTextObject;
import com.tencent.mm.opensdk.modelmsg.WXVideoObject;
import com.tencent.mm.opensdk.modelmsg.WXWebpageObject;
import com.tencent.mm.opensdk.modelpay.PayReq;
import com.tencent.mm.opensdk.modelpay.PayResp;
import com.tencent.mm.opensdk.openapi.IWXAPI;
import com.tencent.mm.opensdk.openapi.IWXAPIEventHandler;
import com.tencent.mm.opensdk.openapi.WXAPIFactory;
import com.tencent.mm.opensdk.utils.Log;

3. Modify the isWXAppSupportApi method:

@ReactMethod
   public void isWXAppSupportApi(String supportApi,Callback callback) {
       if (api == null) {
           callback.invoke(NOT_REGISTERED);
           return;
       }
       int supportSDKINT = Build.PAY_SUPPORTED_SDK_INT;
       switch (supportApi) {
           case "SDK_INT":
               supportSDKINT = Build.SDK_INT;
               break;
           case "MIN_SDK_INT":
               supportSDKINT = Build.MIN_SDK_INT;
               break;
           case "CHECK_TOKEN_SDK_INT":
               supportSDKINT = Build.CHECK_TOKEN_SDK_INT;
               break;
           case "TIMELINE_SUPPORTED_SDK_INT":
               supportSDKINT = Build.TIMELINE_SUPPORTED_SDK_INT;
               break;
           case "EMOJI_SUPPORTED_SDK_INT":
               supportSDKINT = Build.EMOJI_SUPPORTED_SDK_INT;
               break;
           case "MUSIC_DATA_URL_SUPPORTED_SDK_INT":
               supportSDKINT = Build.MUSIC_DATA_URL_SUPPORTED_SDK_INT;
               break;
           case "PAY_SUPPORTED_SDK_INT":
               supportSDKINT = Build.PAY_SUPPORTED_SDK_INT;
               break;
           case "OPENID_SUPPORTED_SDK_INT":
               supportSDKINT = Build.OPENID_SUPPORTED_SDK_INT;
               break;
           case "FAVORITE_SUPPPORTED_SDK_INT":
               supportSDKINT = Build.FAVORITE_SUPPPORTED_SDK_INT;
               break;
           case "MESSAGE_ACTION_SUPPPORTED_SDK_INT":
               supportSDKINT = Build.MESSAGE_ACTION_SUPPPORTED_SDK_INT;
               break;
           case "SCAN_QRCODE_AUTH_SUPPORTED_SDK_INT":
               supportSDKINT = Build.SCAN_QRCODE_AUTH_SUPPORTED_SDK_INT;
               break;
           case "MINIPROGRAM_SUPPORTED_SDK_INT":
               supportSDKINT = Build.MINIPROGRAM_SUPPORTED_SDK_INT;
               break;
           case "VIDEO_FILE_SUPPORTED_SDK_INT":
               supportSDKINT = Build.VIDEO_FILE_SUPPORTED_SDK_INT;
               break;
           case "SUBSCRIBE_MESSAGE_SUPPORTED_SDK_INT":
               supportSDKINT = Build.SUBSCRIBE_MESSAGE_SUPPORTED_SDK_INT;
               break;
           case "LAUNCH_MINIPROGRAM_SUPPORTED_SDK_INT":
               supportSDKINT = Build.LAUNCH_MINIPROGRAM_SUPPORTED_SDK_INT;
               break;
           case "CHOOSE_INVOICE_TILE_SUPPORT_SDK_INT":
               supportSDKINT = Build.CHOOSE_INVOICE_TILE_SUPPORT_SDK_INT;
               break;
           case "INVOICE_AUTH_INSERT_SDK_INT":
               supportSDKINT = Build.INVOICE_AUTH_INSERT_SDK_INT;
               break;
           case "NON_TAX_PAY_SDK_INT":
               supportSDKINT = Build.NON_TAX_PAY_SDK_INT;
               break;
           case "PAY_INSURANCE_SDK_INT":
               supportSDKINT = Build.PAY_INSURANCE_SDK_INT;
               break;
           case "SUBSCRIBE_MINI_PROGRAM_MSG_SUPPORTED_SDK_INT":
               supportSDKINT = Build.SUBSCRIBE_MINI_PROGRAM_MSG_SUPPORTED_SDK_INT;
               break;
           case "OFFLINE_PAY_SDK_INT":
               supportSDKINT = Build.OFFLINE_PAY_SDK_INT;
               break;
           case "SEND_TO_SPECIFIED_CONTACT_SDK_INT":
               supportSDKINT = Build.SEND_TO_SPECIFIED_CONTACT_SDK_INT;
               break;
           case "OPEN_BUSINESS_WEBVIEW_SDK_INT":
               supportSDKINT = Build.OPEN_BUSINESS_WEBVIEW_SDK_INT;
               break;
       }
       boolean isWXAppSupportAPI = api.getWXAppSupportAPI() >= supportSDKINT;
       callback.invoke(null, isWXAppSupportAPI);
   }

4. Modify the _share method (add to determine whether type is equal to miniProgram)

    private void _share(final int scene, final ReadableMap data, final Bitmap thumbImage, final Callback callback) {
        if (!data.hasKey("type")) {
            callback.invoke(INVALID_ARGUMENT);
            return;
        }
        String type = data.getString("type");

        WXMediaMessage.IMediaObject mediaObject = null;
        if (type.equals("news")) {
            mediaObject = _jsonToWebpageMedia(data);
        } else if (type.equals("text")) {
            mediaObject = _jsonToTextMedia(data);
        } else if (type.equals("imageUrl") || type.equals("imageResource")) {
            __jsonToImageUrlMedia(data, new MediaObjectCallback() {
                @Override
                public void invoke(@Nullable WXMediaMessage.IMediaObject mediaObject) {
                    if (mediaObject == null) {
                        callback.invoke(INVALID_ARGUMENT);
                    } else {
                        WeChatModule.this._share(scene, data, thumbImage, mediaObject, callback);
                    }
                }
            });
            return;
        } else if (type.equals("imageFile")) {
            __jsonToImageFileMedia(data, new MediaObjectCallback() {
                @Override
                public void invoke(@Nullable WXMediaMessage.IMediaObject mediaObject) {
                    if (mediaObject == null) {
                        callback.invoke(INVALID_ARGUMENT);
                    } else {
                        WeChatModule.this._share(scene, data, thumbImage, mediaObject, callback);
                    }
                }
            });
            return;
        } else if (type.equals("video")) {
            mediaObject = __jsonToVideoMedia(data);
        } else if (type.equals("audio")) {
            mediaObject = __jsonToMusicMedia(data);
        } else if (type.equals("file")) {
            mediaObject = __jsonToFileMedia(data);
        } else if (type.equals("miniProgram")) {
            mediaObject = __jsonToMiniProgramMedia(data);
        }

        if (mediaObject == null) {
            callback.invoke(INVALID_ARGUMENT);
        } else {
            _share(scene, data, thumbImage, mediaObject, callback);
        }
    }

5. Adding Method _jsonToMiniProgram Media

  private WXMiniProgramObject __jsonToMiniProgramMedia(ReadableMap data) {
        if (!data.hasKey("userName")) {
            return null;
        }
        WXMiniProgramObject miniProgramObj = new WXMiniProgramObject();
        miniProgramObj.webpageUrl = data.getString("webpageUrl"); // Compatible with low versions of Web links
        miniProgramObj.userName = data.getString("userName");    // Widget original id
        miniProgramObj.path = data.getString("path");         //Widget Page Path
        miniProgramObj.miniprogramType = data.getInt("miniProgramType");
        return miniProgramObj;
        return miniProgramObj;
    }

6. Modify the applet to share the size of the picture
Because third-party libraries do not support applet sharing, the size of sharing applet pictures is 1:1 when sharing web pages, and the size of sharing out pictures is blurred.
Modify the image size to the size ratio provided by Weixin (4:5)

private void _share(final int scene, final ReadableMap data, final Callback callback) {}
private void _share(final int scene, final ReadableMap data, final Callback callback) {
...
			if(data.getString("type").equals("miniProgram")){
                this._getImage(uri, new ResizeOptions(400, 500), new ImageCallback() {
                    @Override
                    public void invoke(@Nullable Bitmap bitmap) {
                        WeChatModule.this._share(scene, data, bitmap, callback);
                    }
                });
            }else{
                this._getImage(uri, new ResizeOptions(100, 100), new ImageCallback() {
                    @Override
                    public void invoke(@Nullable Bitmap bitmap) {
                        WeChatModule.this._share(scene, data, bitmap, callback);
                    }
                });
            }
   }

7. Call on the js side

WeChat.isWXAppInstalled().then((isInstalled) => {
           if (isInstalled) {
               WeChat.shareToSession({
                   type: 'miniProgram',
                   title: title,
                   description: description,
                   webpageUrl: webpageUrl,
                   thumbImage: weixinMiniProgramThumbImage,
                   miniProgramType: 0, //Share widget versions (0-formal, 1-development, 2-experience)
                   userName: '',//Widget ID
                   path: '/pages/index?id=123' //Widget Page Path
               }).then((res) => {
                   //Successful callback
                   if (res.errCode === 0) {
                       Toast.show("Sharing Success")
                   }
               }).catch((error => {
                   console.log(error.message)
               }))
           } else {
               Toast.show('Wechat software is not installed, please try again after you install Wechat!')
               console.log('Wechat software is not installed, please try again after you install Wechat!')
           }
       })
  1. Added checklist function.

2. Override all code in the / node_modules/react-native-wechat directory

download puti94/react-native-wechat Code. Although I haven't used it, after all, it needs to be reconfigured, but the principle is similar, GitHub also has a detailed tutorial, which will not be explained in detail here.

The first time I wrote a blog, it was not very good, where there are problems, or not detailed errors, please forgive me more, you can leave a message below, I will recover in time after seeing, and make progress together.

Tags: React Android SDK Google

Posted on Sun, 11 Aug 2019 22:58:39 -0700 by abakash