react-native-wechat分享微信小程序的彩坑

第一次写主要是分享一下Android端实现微信小程序分享过程中踩的一些坑。自己Google和百度了好久,分享问题也算是解决了,但是还是有些问题没有很好的答案,所以自己总结一下。很多人在RN端做微信分享的时候使用的是yorkie/react-native-wechat这个第三方库,这个库npm的最新版本没有小程序分享功能,下面就介绍两种解决方法。

1、在原来的react-native-wechat上进行修改

1. 接入微信开发平台官方文档的SDK
在 Android端上使用AS(Android studio)上打开,直接在react-native-wechat的app的build.gradle中引入

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

2. 在原生的WeChatModule中进行修改
在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.修改isWXAppSupportApi方法:

@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.修改_share方法(添加判断type是否等于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.增加方法__jsonToMiniProgramMedia

  private WXMiniProgramObject __jsonToMiniProgramMedia(ReadableMap data) {
        if (!data.hasKey("userName")) {
            return null;
        }
        WXMiniProgramObject miniProgramObj = new WXMiniProgramObject();
        miniProgramObj.webpageUrl = data.getString("webpageUrl"); // 兼容低版本的网页链接
        miniProgramObj.userName = data.getString("userName");    // 小程序原始id
        miniProgramObj.path = data.getString("path");         //小程序页面路径
        miniProgramObj.miniprogramType = data.getInt("miniProgramType");
        return miniProgramObj;
        return miniProgramObj;
    }

6.修改小程序分享图片大小
由于第三方库不支持小程序分享,分享小程序的图片会呈现分享网页时的尺寸是以1:1显示,分享出去图片显示模糊
修改图片尺寸为微信官方提供的尺寸比例(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. 在js端调用

WeChat.isWXAppInstalled().then((isInstalled) => {
           if (isInstalled) {
               WeChat.shareToSession({
                   type: 'miniProgram',
                   title: title,
                   description: description,
                   webpageUrl: webpageUrl,
                   thumbImage: weixinMiniProgramThumbImage,
                   miniProgramType: 0, //分享小程序的版本(0-正式,1-开发,2-体验)
                   userName: '',//小程序ID
                   path: '/pages/index?id=123' //小程序页面路径
               }).then((res) => {
                   //成功回调
                   if (res.errCode === 0) {
                       Toast.show("分享成功")
                   }
               }).catch((error => {
                   console.log(error.message)
               }))
           } else {
               Toast.show('没有安装微信软件,请您安装微信之后重试!')
               console.log('没有安装微信软件,请您安装微信之后重试!')
           }
       })
  1. 增加了 检查列表 功能。

2.覆盖/node_modules/react-native-wechat目录下所有代码

下载puti94/react-native-wechat的代码。虽然我没有使用过,毕竟需要重新配置,但是原理也是差不多,GitHub也有详细的教程,在这里就不详细讲解了。

第一次写博客,写的不是很好,哪里有问题,或是不详细有错误,请多多包涵,可以在下面留言,我看到后会及时恢复的,共同进步。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值