前言
最近做了第一个用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需要的一个东西
image
- 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
image
我们使用的是react-native-wechat-lib,找到依赖下的该包，打开ios文件夹，将RCTWeChat.xcodeproj 导入进来
image
在工程Build Phases ➜ Link Binary With Libraries中添加如下几个库
libRCTWeChat.a
libz.tbd
libc++.tbd
libsqlite3.0.tbd
SystemConfiguration.framework
CoreTelephony.framework
image
在TARGETS 下项目名 -> info ,添加我们申请得到的微信 AppId填写在 "URL type"的"URL Schema"处，ldentifier填写为：weixin
注意：weixin对应的值就是微信开放者平台上申请的那个key
image
iOS9 以上，添加 微信白名单
image
在项目的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集成微信分享记录
网友评论