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方法：

@ReactMethodpublic 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() {@Overridepublic 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() {@Overridepublic 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");    // 小程序原始idminiProgramObj.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() {@Overridepublic void invoke(@Nullable Bitmap bitmap) {WeChatModule.this._share(scene, data, bitmap, callback);}});}else{this._getImage(uri, new ResizeOptions(100, 100), new ImageCallback() {@Overridepublic 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: '',//小程序IDpath: '/pages/index?id=123' //小程序页面路径}).then((res) => {//成功回调if (res.errCode === 0) {Toast.show("分享成功")}}).catch((error => {console.log(error.message)}))} else {Toast.show('没有安装微信软件，请您安装微信之后重试！')console.log('没有安装微信软件，请您安装微信之后重试！')}})

增加了 检查列表 功能。

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

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

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