序言:使用RN集成微信, 分享链接拉起app 、app拉起小程序 小程序回传值到app 整体流程的简单总结
一、集成微信:
这个不多说了,网上有很多,集成的三方库 react-native-wechat
集成点击这里
注意适配:在android/app/src/main/AndroidManifest.xml 添加微信包名适配android 11
<queries>
<package android:name="com.tencent.mm" />
</queries>
到这里满足我们的基本分享诉求
二、添加跳转小程序方法(该库没有跳转小程序方法,需要我们自行添加)
1.rn代码部分 \node_modules\react-native-wechat\index.js 参考其他跳转方式
const nativelaunchMini = wrapApi(WeChat.launchMini);
/**
* wechat launchMini
* @param {Object} data
* @returns {Promise}
*/
export function launchMini(data) {
return new Promise((resolve, reject) => {
nativelaunchMini(data);
emitter.once('SendMessageToWX.Resp', resp => {
if (resp.errCode === 0) {
resolve(resp);
} else {
reject(new WechatError(resp));
}
});
});
}
2.android部分代码
android\settings.gradle
include ':RCTWeChat'
project(':RCTWeChat').projectDir = new File(rootProject.projectDir, '..\\node_modules\\react-native-wechat\\android')
android\app\build.gradle
// 微信
implementation "com.android.support:support-annotations:28.0.0"
implementation project(':RCTWeChat')//引入node_module中react-native-wechat
node_modules\react-native-wechat\android\build.gradle
dependencies {
// 添加下面这句 opensdk
implementation 'com.tencent.mm.opensdk:wechat-sdk-android-without-mta:+'
}
WeChatModule.java 中修改(以下都是)
路径:node_modules\react-native-wechat\android\src\main\java\com\theweflex\react\WeChatModule.java
编译后 若报 import android.support.annotation.Nullable 相关错误
替换为 import androidx.annotation.Nullable
修改导入 openSdk
将 com.tencent.mm.sdk.xxx 包下所有导入 全部改为 com.tencent.mm.opensdk.xxx
添加小程序方法
@ReactMethod
public void launchMini(ReadableMap data,Callback callback){
String appId = data.getString("appId");; // 填移动应用(App)的 AppId,非小程序的 AppID
IWXAPI api = WXAPIFactory.createWXAPI(this.getReactApplicationContext().getBaseContext(), appId);
WXLaunchMiniProgram.Req req = new WXLaunchMiniProgram.Req();
req.userName = data.getString("userName"); // 填小程序原始id
req.path = data.getString("path");
req.miniprogramType = data.getInt("type");// 可选打开 开发版,体验版和正式版
api.sendReq(req);
callback.invoke(api.sendReq(req) ? null : INVOKE_FAILED);
}
修改支持方法 isWXAppSupportApi
@ReactMethod
public void isWXAppSupportApi(String supportApi,Callback callback) {
if (api == null) {
callback.invoke(NOT_REGISTERED);
return;
}
int supportSDKINT = Build.PAY_SUPPORTED_SDK_INT;
switch (supportApi) {
case "SDK_INT":
supportSDKINT = Build.SDK_INT;
break;
case "MIN_SDK_INT":
supportSDKINT = Build.MIN_SDK_INT;
break;
case "TIMELINE_SUPPORTED_SDK_INT":
supportSDKINT = Build.TIMELINE_SUPPORTED_SDK_INT;
break;
case "EMOJI_SUPPORTED_SDK_INT":
supportSDKINT = Build.EMOJI_SUPPORTED_SDK_INT;
break;
case "MUSIC_DATA_URL_SUPPORTED_SDK_INT":
supportSDKINT = Build.MUSIC_DATA_URL_SUPPORTED_SDK_INT;
break;
case "PAY_SUPPORTED_SDK_INT":
supportSDKINT = Build.PAY_SUPPORTED_SDK_INT;
break;
case "OPENID_SUPPORTED_SDK_INT":
supportSDKINT = Build.OPENID_SUPPORTED_SDK_INT;
break;
case "FAVORITE_SUPPPORTED_SDK_INT":
supportSDKINT = Build.FAVORITE_SUPPPORTED_SDK_INT;
break;
case "MESSAGE_ACTION_SUPPPORTED_SDK_INT":
supportSDKINT = Build.MESSAGE_ACTION_SUPPPORTED_SDK_INT;
break;
case "SCAN_QRCODE_AUTH_SUPPORTED_SDK_INT":
supportSDKINT = Build.SCAN_QRCODE_AUTH_SUPPORTED_SDK_INT;
break;
case "MINIPROGRAM_SUPPORTED_SDK_INT":
supportSDKINT = Build.MINIPROGRAM_SUPPORTED_SDK_INT;
break;
case "VIDEO_FILE_SUPPORTED_SDK_INT":
supportSDKINT = Build.VIDEO_FILE_SUPPORTED_SDK_INT;
break;
case "SUBSCRIBE_MESSAGE_SUPPORTED_SDK_INT":
supportSDKINT = Build.SUBSCRIBE_MESSAGE_SUPPORTED_SDK_INT;
break;
case "LAUNCH_MINIPROGRAM_SUPPORTED_SDK_INT":
supportSDKINT = Build.LAUNCH_MINIPROGRAM_SUPPORTED_SDK_INT;
break;
case "CHOOSE_INVOICE_TILE_SUPPORT_SDK_INT":
supportSDKINT = Build.CHOOSE_INVOICE_TILE_SUPPORT_SDK_INT;
break;
case "INVOICE_AUTH_INSERT_SDK_INT":
supportSDKINT = Build.INVOICE_AUTH_INSERT_SDK_INT;
break;
case "NON_TAX_PAY_SDK_INT":
supportSDKINT = Build.NON_TAX_PAY_SDK_INT;
break;
case "PAY_INSURANCE_SDK_INT":
supportSDKINT = Build.PAY_INSURANCE_SDK_INT;
break;
}
boolean isWXAppSupportAPI = api.getWXAppSupportAPI() >= supportSDKINT;
callback.invoke(null, isWXAppSupportAPI);
}
拉起小程序
WeChat.isWXAppInstalled().then(isInstalled => {
if (isInstalled) {
let miniShareInfo = {
userName: miniId, // 小程序原始id
appId: AppId, // 安卓应用id
path: pathUrl, // 你的小程序页面path
type: miniType // 0正式环境 2开发环境
};
WeChat.launchMini(miniShareInfo)
.then(res => {
console.log('拉起成功', res);
})
.catch(clickErr => {
console.log('拉起失败', clickErr);
});
} else {
Alert.alert('请安装微信');
}
});
三、浏览器拉起app
示例:拉起链接为: app://test.com/home 拉起app的SplashActivity
注:intent-filter 可以有多个 特别注意:android代码要格式化
<activity
android:name=".SplashActivity"
android:exported="true"
android:launchMode="singleTask">
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.BROWSABLE" />
<category android:name="android.intent.category.DEFAULT" />
<data
android:host="test.com"
android:path="/home"
android:scheme="app" />
</intent-filter>
</activity>
若是拉起RN的app的话, 可以通过Linking 接收到拉起链接
注:debug链接本地代码调试 获取不到拉起链接,必须是非调试包,可通过android studio的log查看拉起链接
useEffect(() => {
const getUrlAsync = async () => {
const initialUrl = await Linking.getInitialURL();
if(initialUrl) {
// 应用未启动拉起
console.log('拉起链接 =1 ', url);
}
};
getUrlAsync();
pullListener = Linking.addEventListener('url', getPullUrl);
return () => {
pullListener && pullListener.remove();
};
}, []);
const getPullUrl = res => {
// 应用已启动拉起
console.log('拉起链接 =2 ', res);
};
最后:修改node_modules代码的需要打个patch-package补丁 android代码编译可用android studio