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.java，WXPayEntryActivity.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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WidSsQkN-1585826301125)(https://static.ahwgs.cn/blog-img/20200402184644.png)]

我们使用的是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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nClT65k7-1585826301127)(https://static.ahwgs.cn/blog-img/20200402185750.png)]

iOS9 以上，添加 微信白名单

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

#import 

- (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 微信分享、支付)