react-native实现微信小程序分享

这里只说小程序的分享，好友和朋友圈的分享，网上有很多资料，这里就不阐述了。
开始之前，说明下，这个文章是在用这个库比较老的情况下可以这么操作，如果是最新的react-native-wechat库，它已经支持小程序分享了，就不用按照此文档进行做了。

首先，安装三方库# react-native-wechat,具体步骤查看文档。
下面具体实现：

IOS

首先需要下载最新的SDK包，当前库的包比较老。需要去官网地址下载新的SDK，微信是从1.7.7版本以后支持小程序分享的，我是用的1.8.3。
下载完SDK后，替换掉node_modules/react-native-wechat/ios下的libWeChatSDK.a，然后在RCTWeChat.h里添加一行：

#define RCTWXShareTypeMiniProgram @"miniProgram"
WechatIMG340.jpeg

紧接着在WXApiObject.h里添加如些代码：

#pragma mark - WXMiniProgramObject
/*! @brief 小程序消息结构体
 *
 *用于微信终端和第三方程序之间传递消息的小程序消息内容
 *
 */
@interface WXMiniProgramObject : NSObject
/*! @brief 返回一个WXMiniProgramObject对象
 *
 * @note 返回的WXMiniProgramObject对象是自动释放的
 */
+(WXMiniProgramObject *) object;

/** 网页的url地址
 * @note 兼容低版本的网页链接
 */
@property (nonatomic, retain) NSString *webpageUrl;

/** 小程序原始id
 *
 */
@property (nonatomic, retain) NSString *userName;
/** 小程序页面路径
 *
 */
@property (nonatomic, retain) NSString *path;

@end

之后再RCTWeChat.m里修改

- (void)shareToWeixinWithData:(NSDictionary *)aData scene:(int)aScene callback:(RCTResponseSenderBlock)aCallBack

方法为：

- (void)shareToWeixinWithData:(NSDictionary *)aData scene:(int)aScene callback:(RCTResponseSenderBlock)aCallBack
{
    NSString *imageUrl = aData[RCTWXShareTypeThumbImageUrl];
    if (imageUrl.length && _bridge.imageLoader) {
        NSURL *url = [NSURL URLWithString:imageUrl];
        UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:url]];
       if ([aData[RCTWXShareType] isEqualToString:RCTWXShareTypeMiniProgram]) {
            [self shareToWeixinWithData:aData thumbImage:image scene:aScene callBack:aCallBack];
        }else{
            NSURLRequest *imageRequest = [NSURLRequest requestWithURL:url];
            [_bridge.imageLoader loadImageWithURLRequest:imageRequest size:CGSizeMake(100, 100) scale:1 clipped:FALSE resizeMode:RCTResizeModeStretch progressBlock:nil partialLoadBlock:nil
                                         completionBlock:^(NSError *error, UIImage *image) {
                                             [self shareToWeixinWithData:aData thumbImage:image scene:aScene callBack:aCallBack];
                                         }];
        }
    } else {
        [self shareToWeixinWithData:aData thumbImage:nil scene:aScene callBack:aCallBack];
    }

}

最后修改方法


- (void)shareToWeixinWithData:(NSDictionary *)aData
                   thumbImage:(UIImage *)aThumbImage
                        scene:(int)aScene
                     callBack:(RCTResponseSenderBlock)callback

为：

- (void)shareToWeixinWithData:(NSDictionary *)aData
                   thumbImage:(UIImage *)aThumbImage
                        scene:(int)aScene
                     callBack:(RCTResponseSenderBlock)callback
{
  ...
} else if ([type isEqualToString:RCTWXShareTypeFile]) {
           ...
        } else if ([type isEqualToString:RCTWXShareTypeMiniProgram]) {
            NSString * webpageUrl = aData[RCTWXShareWebpageUrl];
            WXMiniProgramObject *miniProgramObj = [WXMiniProgramObject object];
            miniProgramObj.webpageUrl = webpageUrl; // 兼容低版本的网页链接
            //miniProgramObj.miniprogramType = WXMiniProgramObject.MINIPTOGRAM_TYPE_RELEASE;// 正式版:0，测试版:1，体验版:2
            miniProgramObj.userName = aData[@"userName"];     // 小程序原始id
            miniProgramObj.path = aData[@"path"];
            [self shareToWeixinWithMediaMessage:aScene
                                          Title:title
                                    Description:description
                                         Object:miniProgramObj
                                     MessageExt:messageExt
                                  MessageAction:messageAction
                                     ThumbImage:aThumbImage
                                       MediaTag:mediaTagName
                                       callBack:callback];
            
        } else {
            callback(@[@"message type unsupported"]);
        }
}

原生修改完后，js端调用：

let weixinMiniProgramShareInfo={
                type: 'miniProgram',
                title: title,
                thumbImage: weixinMiniProgramThumbImage,
                description: description,
                webpageUrl: webpageUrl,
                userName:''//小程序ID
                path: '/pages/index?id=123'   //小程序页面路径
        }
WeChat.shareToSession(weixinMiniProgramShareInfo).then((res)=>{
                            ToastView.show('分享成功')
                                }).catch((clickErr)=>{
                                })
                            }).catch((err)=>{
                                ToastView.show('分享失败')
                            });

具体细节参考IOS文档

Android

步骤1：

首先升级安卓的SDK，Android Studio环境下：
在node-modules/react-native-wechat/android/build.gradle里添加如下依赖即可：

dependencies {
    compile 'com.tencent.mm.opensdk:wechat-sdk-android-with-mta:+'
}

或者

dependencies {
    compile 'com.tencent.mm.opensdk:wechat-sdk-android-without-mta:+'
}

（其中，前者包含统计功能），然后async。

步骤2：

在node-modules/react-native-wechat/android/src/main/java/com/theweflex/react/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：

修改方法

    private void _share(final int scene, final ReadableMap data, final Bitmap thumbImage, final Callback callback) {

为：

 private void _share(final int scene, final ReadableMap data, final Bitmap thumbImage, final Callback callback) {
...
 else if (type.equals("file")) {
            mediaObject = __jsonToFileMedia(data);
        } else if (type.equals("miniProgram")) {
            mediaObject = __jsonToMiniProgramMedia(data);
        }
}

步骤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");         //小程序页面路径
        return miniProgramObj;
    }

然后在js端调用，和iOS端一样：

let weixinMiniProgramShareInfo={
                type: 'miniProgram',
                title: title,
                thumbImage: weixinMiniProgramThumbImage,
                description: description,
                webpageUrl: webpageUrl,
                userName:''//小程序ID
                path: '/pages/index?id=123'  //小程序页面路径
        }
WeChat.shareToSession(weixinMiniProgramShareInfo).then((res)=>{
                            ToastView.show('分享成功')
                                }).catch((clickErr)=>{
                                })
                            }).catch((err)=>{
                                ToastView.show('分享失败')
                            });

具体细节参考Android文档
大功告成。小程序的分享就完成了。小伙伴修改过程中遇到问题，可以在下面留言啊，我看到会及时回复。觉得有用的可以给个start。🙂

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,457评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,837评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,696评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,183评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,057评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,105评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,520评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,211评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,482评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,213评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,576评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2赞 335