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('没有安装微信软件，请您安装微信之后重试！')
}
})
- 增加了 检查列表 功能。
2.覆盖/node_modules/react-native-wechat目录下所有代码
下载puti94/react-native-wechat的代码。虽然我没有使用过，毕竟需要重新配置，但是原理也是差不多，GitHub也有详细的教程，在这里就不详细讲解了。
第一次写博客，写的不是很好，哪里有问题，或是不详细有错误，请多多包涵，可以在下面留言，我看到后会及时恢复的，共同进步。
类似资料：