RN 集成微信 分享 拉起小程序 浏览器拉起app
2024-05-27 18:56:57
序言：使用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 {// 添加下面这句 opensdkimplementation '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
添加小程序方法
@ReactMethodpublic void launchMini(ReadableMap data,Callback callback){String appId = data.getString("appId");; // 填移动应用(App)的 AppId，非小程序的 AppIDIWXAPI api = WXAPIFactory.createWXAPI(this.getReactApplicationContext().getBaseContext(), appId);WXLaunchMiniProgram.Req req = new WXLaunchMiniProgram.Req();req.userName = data.getString("userName"); // 填小程序原始idreq.path = data.getString("path");req.miniprogramType = data.getInt("type");// 可选打开 开发版，体验版和正式版api.sendReq(req);callback.invoke(api.sendReq(req) ? null : INVOKE_FAILED);}
修改支持方法 isWXAppSupportApi
@ReactMethodpublic 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, // 安卓应用idpath: pathUrl, // 你的小程序页面pathtype: 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代码要格式化
<activityandroid: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" /><dataandroid: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
RN 集成微信 分享 拉起小程序 浏览器拉起app相关推荐
- 企业微信分享出来的小程序提示找不到页面
企业微信分享出来的小程序提示找不到页面 问题描述 有些企业研发的内部小程序,在微信中可以正常使用,在企业微信里面分享小程序,提示:找不到页面. 解决方案 这个是企业微信的bug,等待修复吧,临时解决方 ...
- android微信下拉出现小程序,下拉头部-模仿微信聊天头部拉下小程序效果
最近做了一个模仿微信聊天界面头部下拉出现小程序的效果,同时也可以通过头部的按钮控制弹出框的伸缩,GitHub传送门 先上效果: 滑动.gif 下面讲下我的思路: 1.通过runtime的关联方法 ru ...
- 【微信小程序控制硬件 第14篇】分享一下我在微信公众号和小程序上实现的几个颜色采集器，轻松集成到您项目实现调光。
[微信小程序控制硬件第1篇 ] 全网首发,借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器,轻松控制智能硬件! [微信小程序控制硬件第2篇 ] 开始微信小程序之旅,导入小程序Mqtt客户 ...
- 微信（sdk）的支付、分享、拉起小程序
从网上少的各种信息总结的,有什么问题欢迎大家指正 一.安装微信sdk 二.支付 三.分享 1.shareToTimeline是分享到朋友圈的方法,shareToSession 是分享给朋友或者群的方法 ...
- 微信小程序下拉框插件_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下 适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等 一.省市三级联动使用 注意mode = ...
- 微信小程序推流拉流live-pusher/live-player示例，使用本地搭建RTMP服务
适用读者: 对微信小程序已经有基本的了解. 例如:小程序账号申请. 常用组件.小程序开发工具 对nodejs已经有基本的了解. 对微信小程序流媒体/实时音视频组件感兴趣的童鞋. 对小鱼易联/小鱼在家, ...
- 下拉多选框 微信小程序_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下 适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等 一.省市三级联动使用 注意mode = ...
- 微信小程序下拉刷新问题
微信小程序下拉刷新问题 我们主要来说一下微信小程序的下拉刷新问题,这个问题也是我自己碰见的问题,问题比较二,但是又很恶心,所以在这里给大家分享一下,有这个问题朋友,赶紧从死胡 ...
- 微信小程序之下拉加载和上拉刷新
微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉刷新两种实现方法 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里 ...
最新文章
- java实现排序二叉树
- GIS开发：大数据解决方案
- 转 ios 里如何判断当前应用的定位服务是否可用
- Sun Solaris 10 bind 9.x DNS 配置
- 大话设计模式（二 代码规范、重构）
- 第一天：制定项目章程
- ue默认高亮mysql_UE设置打开文件的默认高亮语言
- [有限元] 面积坐标的幂函数在三角形单元，三角形环单元上的积分公式和体积坐标的幂函数在常应变四面体单元上的积分公式
- Delphi拖放编程
- 小牛485通讯原理_plc和变频器通讯接线图详解
- c语言编写一元二次方程
- 自动跳动滑动门html,CSS如何实现滑动门效果_html/css_WEB-ITnose
- c++17好用的新特性总结
- 对于半圆形的点击区域该怎么做_我做了一个傻瓜式热力图生成工具
- 内网渗透篇-信息收集
- 如何全面欣赏一场时装秀？
- 实现折叠的uitableviewcell效果
- Mac答疑「7」超详细mac新手教程-Mac界面篇
- RISCV学习笔记7.8(开源虚拟机篇)--AlmaLinux虚拟机安装modelsim
- Windows远程桌面怎么使用，看完马上学会！