前言
最近做了第一個用react-native寫的app,記錄下相關(guān)第三方插件的配置
關(guān)于微信分享芍碧，主要用到了這兩個庫 react-native-wechat-lib
react-native-wechat
其中第一個是在第二個基礎(chǔ)上優(yōu)化的号俐。更新相關(guān)微信SDK等
備注：本文使用rn版本為0.61.5
步驟
- 申請微信相關(guān)
去微信官方網(wǎng)址https://open.weixin.qq.com/,注冊移動應用踪危，填寫相關(guān)信息，獲取到相關(guān)到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文件
內(nèi)容如下：
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"
/>
關(guān)于微信分享母债，安卓相關(guān)配置就這些衙熔，微信支付以后再研究
- 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);
};
關(guān)于
微信分享還是很簡單的箍鼓，具體的一些API可以參考微信官方文檔與插件文檔，這里整理的是微信分享相關(guān)款咖，后面做到支付再補充支付項目內(nèi)容
本文首發(fā)于 react-native集成微信分享記錄
