react-native 分享微信小程序(react-native-wechat)

勤做笔记,方便自己,帮助他人。

1.替换本地的微信sdk。

SDK下载地址

ios 修改部分代码

1. RctWeChat/RCTWeChat.h 文件中的第25行 加上

#define RCTWXShareTypeMini @"mini"

截图如下:

1.png




2. RctWeChat/RCTWeChat.m 的第282行 加入一个else

 else if ([type isEqualToString:RCTWXShareTypeMini]) {
            WXMiniProgramObject *miniObject = [WXMiniProgramObject object];
            miniObject.webpageUrl = aData[@"webpageUrl"];
            miniObject.userName = aData[@"userName"];
            miniObject.path = aData[@"path"];
            miniObject.withShareTicket = [aData[@"withShareTicket"] boolValue];
            miniObject.miniProgramType = [aData[@"miniProgramType"] integerValue];
            miniObject.hdImageData = [NSData dataWithContentsOfURL:[NSURL URLWithString:aData[@"hdImageData"]]] ;
            
            [self shareToWeixinWithMediaMessage:aScene
                                          Title:title
                                    Description:description
                                         Object:miniObject
                                     MessageExt:messageExt
                                  MessageAction:messageAction
                                     ThumbImage:aThumbImage
                                       MediaTag:mediaTagName
                                       callBack:callback];
            
        }

截图如下:

2.png




3. RctWeChat/RCTWeChat.m 第74行 修改为

callback(@[[WXApi registerApp:appid ] ? [NSNull null] : INVOKE_FAILED]);

截图如下:


3.png




android

1.修改引用方式 android/app/build.gradle 中添加compile project(':react-native-wechat')引用

4.png

  1. android/src/main/java/com/theweflex/react/WeChatModule.java中 添加
    import com.tencent.mm.opensdk.modelmsg.WXMiniProgramObject;引用

    5.png

  2. android/src/main/java/com/theweflex/react/WeChatModule.java 中修改代码


    ![![8.png](https://upload-images.jianshu.io/upload_images/4770957-f745970b273fecaa.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ](https://upload-images.jianshu.io/upload_images/4770957-438a351ec99dd77f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
if (data.hasKey("thumbImage") || data.hasKey("hdImageData")) {
            String imageUrl = data.hasKey("hdImageData") ? data.getString("hdImageData") : data.getString("thumbImage");

            try {
                uri = Uri.parse(imageUrl);
                // Verify scheme is set, so that relative uri (used by static resources) are not handled.
                if (uri.getScheme() == null) {
                    uri = getResourceDrawableUri(getReactApplicationContext(), imageUrl);
                }
            } catch (Exception e) {
                // ignore malformed uri, then attempt to extract resource ID.
            }
        }

新增方法

 private void __jsonToImageMedia(String imageUrl, final MediaObjectCallback callback) {
        Uri imageUri;
        try {
            imageUri = Uri.parse(imageUrl);
            // Verify scheme is set, so that relative uri (used by static resources) are not handled.
            if (imageUri.getScheme() == null) {
                imageUri = getResourceDrawableUri(getReactApplicationContext(), imageUrl);
            }
        } catch (Exception e) {
            imageUri = null;
        }

        if (imageUri == null) {
            callback.invoke(null);
            return;
        }

        this._getImage(imageUri, null, new ImageCallback() {
            @Override
            public void invoke(@Nullable Bitmap bitmap) {
                callback.invoke(bitmap == null ? null : new WXImageObject(bitmap));
            }
        });
    }




最后js部分

提取公用方法


image.png

和之前的分享像是一样 只是修改几个参数就行(小程序只能分享给好友)

async function shareToWeChat(params) {
    const {
        url,
        img_small,
        label,
        title,
        path,
        description,
    } = params;

    try {
        const isInstalled = await WeChat.isWXAppInstalled();
        if (!isInstalled) {
            Alert.alert('没有安装微信', '请先安装微信客户端', [
                { text : '确定' }
            ]);
            return false
        }

      /**
       * thumbImage - Thumb image of the message, which can be a uri or a resource id.  消息的Thumb图像,可以是uri或资源id
       * type - Type of this message. Could be {news|text|imageUrl|imageFile|imageResource|video|audio|file|mini}
       * webpageUrl - Required if type equals news or mini. The webpage link to share.  如果是网页或者小程序  网页地址
       * userName - 小程序的原生id.
       * path - 小程序页面的路径.
       * description - 描述
       * hdImageData - 小程序节点高清大图,小于128k.
       * withShareTicket - 是否使用带 shareTicket 的转发
       * miniProgramType - 分享小程序的版本(0-正式,1-开发,2-体验)
       *
       * imageUrl - Provide a remote image if type equals image. 如果type为image,则使用此分享url
       * videoUrl - Provide a remote video if type equals video. 如果type为video,则使用此分享url
       * musicUrl - Provide a remote music if type equals audio. 如果type为audio,则使用此分享url
       * filePath - 如果type为file,则使用此获取本地文件
       * fileExtension - String 如果type为file,则使用此提供文件类型
       */
        const obj = {
            type : label === '微信' ? 'mini' : 'news',
            title : title,
            description: description || '收录全国各楼盘渠道在售户型/分销政策,帮助经纪人快速找房',
            webpageUrl : url,
            thumbImage : img_small,

            path,
            hdImageData:img_small,
            miniProgramType : 2,
            userName : 'gh_beca976899fb',
            withShareTicket : false,
        };

        if (label === '微信') {
            const res = await WeChat.shareToSession(obj);
            return res.errCode === 0

        } else if (label === '微信朋友圈') {
            const res = await WeChat.shareToTimeline(obj);
            return res.errCode === 0
        }
    } catch (err) {
        console.log(err);
    }
}

页面调用

async _shareToWeChat(label) {
        const {buildingUrl, building_cover_small, name} = this.state.data;
        const data = {
            url: buildingUrl,
            img_small: building_cover_small,
            label,
            path: '/pages/list/list',
            title: name,
        };

        const res = await shareToWeChat(data);
        if (res) {
            Toast.success('分享成功', 2);
            this.setState({shareVisible: false});
        } else {
            Toast.success('分享失败', 2);
        }
    }

记录遇到的一个bug:如果之前签名是错误,后面更正后还是提示签名错误,是因为你微信缓存了签名的问题,解决办法:关机重启,清空微信缓存。你要是卸载微信重置我也没意见。
参考文章: https://github.com/yorkie/react-native-wechat/pull/381

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,373评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,732评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,163评论 0 238
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,700评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,036评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,425评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,737评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,421评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,141评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,398评论 2 243
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,908评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,276评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,907评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,018评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,772评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,448评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,325评论 2 261