react-native集成微信分享记录

发布于 / react-native

前言

最近做了第一个用react-native写的app,记录下相关第三方插件的配置

关于微信分享,主要用到了这两个库 react-native-wechat-lib
react-native-wechat

其中第一个是在第二个基础上优化的。更新相关微信SDK

备注:本文使用rn版本为0.61.5

步骤

  • 申请微信相关

去微信官方网址https://open.weixin.qq.com/,注册移动应用,填写相关信息,获取到相关到key

其中需要注意到是,安卓需要先生成release包,然后使用Gen_Signature_Android2.apk获取到app的签名

安卓app包名地址:android/app/build.gradle文件中的applicationId字段

打开安卓获取签名软件,输入包名,会得到一个签名,这就是微信SDK需要的一个东西

  • android配置

app/src/main/java/com/companyName/ 下新建wxapi文件夹,新增WXEntryActivity.javaWXPayEntryActivity.java文件

内容如下:

WXEntryActivity.java 文件:


package com.logisticsrn.wxapi; // 你的包名.wxapi import android.app.Activity; import android.os.Bundle; import com.theweflex.react.WeChatModule; public class WXEntryActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); WeChatModule.handleIntent(getIntent()); finish(); } }

WXPayEntryActivity.java 文件

package com.logisticsrn.wxapi; // 你的包名.wxapi

import android.app.Activity;
import android.os.Bundle;
import com.theweflex.react.WeChatModule;

public class WXPayEntryActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        WeChatModule.handleIntent(getIntent());
        finish();
    }
}

AndroidManifest.xml添加声明,该文件在 app/src/main/AndroidManifest.xml

<activity
    android:name=".wxapi.WXEntryActivity"
    android:label="@string/app_name"
    android:exported="true"
/>
<activity
    android:name=".wxapi.WXPayEntryActivity"
    android:label="@string/app_name"
    android:exported="true"
/>

关于微信分享,安卓相关配置就这些,微信支付以后再研究

  • ios配置

先将微信Libraries 引入进来,打开XCode,点击项目Libraries,右键添加文件到xx

我们使用的是react-native-wechat-lib,找到依赖下的该包,打开ios文件夹,将RCTWeChat.xcodeproj 导入进来

在工程Build Phases ➜ Link Binary With Libraries中添加如下几个库

libRCTWeChat.a
libz.tbd
libc++.tbd
libsqlite3.0.tbd
SystemConfiguration.framework
CoreTelephony.framework

TARGETS 下项目名 -> info ,添加我们申请得到的微信 AppId填写在 "URL type""URL Schema"处,ldentifier填写为:weixin

注意:weixin对应的值就是微信开放者平台上申请的那个key

iOS9 以上,添加 微信白名单

在项目的AppDelegate.m添加以下代码,启动[LinkingIOS]

#import <React/RCTLinkingManager.h>

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  return [RCTLinkingManager application:application openURL:url
                            sourceApplication:sourceApplication annotation:annotation];
}

  • rn代码中使用

在项目开始文件中,

import * as WeChat from 'react-native-wechat-lib';

WeChat.registerApp(
  'appid',
  'Universal Links',
);

封装wxHandle.js处理微信分享逻辑

import * as WeChat from 'react-native-wechat-lib';
import CommonConfig from './config';
import toast from './toast';

/**
 * 分享到微信朋友圈
 * @param {object} shareMetadata
 * return Promise true:成功 false: 失败
 */
export const shareToTimeline = async shareMetadata => {
  const defaultShareData = {
    title: '应用名',
    description: '',
    thumbImageUrl: ``, // 缩略图
    webpageUrl: '',
    scene: 1, // 分享到, 0:会话 1:朋友圈 2:收藏
    isRemoveSuffix: true,
  };
  try {
    const isInstalled = await WeChat.isWXAppInstalled();
    if (!isInstalled) {
      toast('请先安装微信');
      return Promise.resolve(false);
    }
    const metadata = {...defaultShareData, ...shareMetadata};
    if (!metadata.isRemoveSuffix) {
      metadata.title = cutTitleShort(metadata.title, 30);
    }
    const res = await WeChat.shareWebpage(metadata);

    if (res.errCode === 0) {
      // 在分享中取消 也正常返回
      toast('分享成功');
      return Promise.resolve(false);
    }
  } catch (e) {
    toast('分享失败');
    if (e instanceof WeChat.WechatError) {
      console.warn(e.stack);
    } else {
      console.log(e);
    }
  }
  return Promise.resolve(false);
};

/**
 * 分享给朋友 对话框
 * @param {object} shareMetadata
 * return Promise true:成功 false: 失败
 */
export const shareToSession = async shareMetadata => {
  const defaultShareData = {
    title: '应用名',
    description: '',
    thumbImageUrl: '', // 缩略图
    webpageUrl: '',
    scene: 0, // 分享到, 0:会话 1:朋友圈 2:收藏
    isRemoveSuffix: false,
  };
  try {
    const isInstalled = await WeChat.isWXAppInstalled();
    if (!isInstalled) {
      toast('请先安装微信');
      return Promise.resolve(false);
    }
    const metadata = {...defaultShareData, ...shareMetadata};
    if (!metadata.isRemoveSuffix) {
      metadata.title = cutTitleShort(metadata.title, 22);
    }
    const res = await WeChat.shareWebpage(metadata);
    if (res.errCode === 0) {
      // 分享成功
      toast('分享成功');
      return Promise.resolve(true);
    }
  } catch (e) {
    toast('分享失败');
    if (e instanceof WeChat.WechatError) {
      console.warn(e.stack);
    } else {
      console.log(e);
    }
  }
  return Promise.resolve(false);
};

/**
 * 分享出去的标题不能太长
 * @param {string} titleString
 * @param {number} maxStrLength
 * @param isAddSuffix
 */
const cutTitleShort = (titleString, maxStrLength) => {
  if (!titleString) {
    return '应用名';
  }
  let newStr;
  if (titleString.length > maxStrLength - 7) {
    newStr = `${titleString.substring(0, maxStrLength - 7)}...【应用名】`;
  } else {
    newStr = `${titleString}【应用名】`;
  }
  return newStr;
};

/**
 * 分享图片到微信
 * @param {string} imageUrl
 * @param {number} scene
 */
export const sharePicToWechat = async shareMetadata => {
  const defaultShareData = {
    imageUrl:'',
    scene: 0,
  };
  try {
    const isInstalled = await WeChat.isWXAppInstalled();
    if (!isInstalled) {
      toast('请先安装微信');
      return Promise.resolve(false);
    }
    const metadata = {...defaultShareData, ...shareMetadata};
    const res = await WeChat.shareImage(metadata);
    if (res.errCode === 0) {
      // 分享成功
      toast('分享成功');
      return Promise.resolve(true);
    }
  } catch (e) {
    toast('分享失败');
    if (e instanceof WeChat.WechatError) {
      console.warn(e.stack);
    } else {
      console.log(e);
    }
  }
  return Promise.resolve(false);
};

关于

微信分享还是很简单的,具体的一些API可以参考微信官方文档与插件文档,这里整理的是微信分享相关,后面做到支付再补充支付项目内容

本文首发于 react-native集成微信分享记录

参考链接:react-native-wechat (react-native 微信分享、支付)

本文采用 CC BY-NC-SA 3.0 Unported 协议进行许可
本文链接: https://www.ahwgs.cn/wechat-rn-share.html