APP跳转微信小程序并回跳到APP页面之RN

1,616 阅读1分钟

以下为App在Android中实现App跳转小程序并返回到App页面(RN调用跳转微信小程序):

一、首先Android原生中先集成微信的SDK

集成地址:developers.weixin.qq.com/doc/oplatfo…

1、将下载好的sdk放libs中按文档集成

2、开始代码集成

首先创建WXEntryActivity 类

 ....
public class WXEntryActivity extends WXCallbackActivity implements IWXAPIEventHandler {
    private IWXAPI api;
    privare String WEIXIN_APPID = "XXXX";//微信开放平台中的AppID
    protected void onSetContent(Bundle bundle) {
        //注册API
        api = WXAPIFactory.createWXAPI(this, WEIXIN_APPID);
        api.handleIntent(getIntent(), this);
         
    }
    @Override
    public void onReq(BaseReq baseReq) {
        System.out.print(baseReq);
    }
    @Override
    public void onResp(BaseResp resp) {
      if(resp.getType() == ConstantsAPI.COMMAND_LAUNCH_WX_MINIPROGRAM) {
        WXLaunchMiniProgram.Resp launchMiniProResp = (WXLaunchMiniProgram.Resp) resp;
        String extraData =launchMiniProResp.extMsg; 
        //对应小程序组件 <button open-type="launchApp"> 中的 app-parameter 属性
      }
   finish();
  }
}

AndroidManifest.xml设置

     <activity
        android:name=".......WXEntryActivity"
        android:taskAffinity="你的包名"     //这个也很重要
        android:launchMode="singleTask"   //这里一定是singleTask否则小程序中无法返回App
        android:exported="true"
        android:theme="@style/dialog_custom"
        android:windowSoftInputMode="stateHidden"
       >
    </activity>

实现RN中调用App跳转小程序的方法

...
public class LaunchWxAppModule extends ReactContextBaseJavaModule {
 public static final String REACTCLASSNAME = "自己取一个名称";
 private Context mContext;
 public LaunchWxAppModule(ReactApplicationContext reactContext) {
   super(reactContext);
   mContext = reactContext;
 }
 public static boolean isWeixinAvilible(Context context) {
   final PackageManager packageManager = context.getPackageManager();// 获取packagemanager
   List<PackageInfo> pinfo = packageManager.getInstalledPackages(0);// 获取所有已安装程序的包信息
   if (pinfo != null) {
     for (int i = 0; i < pinfo.size(); i++) {
       String pn = pinfo.get(i).packageName;
       if (pn.equals("com.tencent.mm")) {
         return true;
       }
     }
   }
   return false;
 }

 @Override
 public String getName() {
   return REACTCLASSNAME;
 }
 @ReactMethod
  public void startMiniProgram(String ghId,String miniPagepath,String version,Callback callback){
   if(!isWeixinAvilible(mContext)){
     Alert.showShortToast("请先安装微信客户端");
     return;
   }
   String appId = "你的微信开放平台AppId"; // 填应用AppId,这里不要填错AppId了,不是小程序的if
   IWXAPI api = WXAPIFactory.createWXAPI(mContext, appId);

   WXLaunchMiniProgram.Req req = new WXLaunchMiniProgram.Req();
   req.userName = ghId; // 填小程序原始id gh_开头的
   if (miniPagepath!="") {
     req.path = miniPagepath;               //拉起小程序页面的可带参路径,不填默认拉起小程序首页
   }
   if (version.equals("debug")){
     req.miniprogramType = WXLaunchMiniProgram.Req.MINIPROGRAM_TYPE_TEST;
   }else if(version.equals("preview")){
     req.miniprogramType = WXLaunchMiniProgram.Req.MINIPROGRAM_TYPE_PREVIEW;
   }else {
     req.miniprogramType = WXLaunchMiniProgram.Req.MINIPTOGRAM_TYPE_RELEASE;// 可选打开 开发版,体验版和正式版
   }

   api.sendReq(req);
//    callback.invoke(req);
  }

}

调用

const LaunchWxApp = require('react-native').NativeModules.REACTCLASSNAME;//REACTCLASSNAME这个名称是你在上面代码中写的
//参数分别是:小程序原始id,小程序跳转路径(默认填""),版本(如:"debug")
 MpNativeModule.startMiniProgram(ghId,miniPagepath,verision,()=>{}) ;

二、微信小程序中实现返回App

官方链接:developers.weixin.qq.com/miniprogram…

微信原生里用:

<button open-type="launchApp" app-parameter="wechat" binderror="launchAppError">打开APP</button>

我的是taro写的:

<Button
    openType="launchApp"
    appParameter="wechat"
    onLaunchapp={(res) => {
      console.log("成功回调", res);
    }}
    onError={(error) => {
      console.log("错误啦", error);
    }}
    >
    打开APP
</Button>

这里需要注意的是,如果发现回调成功了但是并没有返回到App,则要看下App的集成上是否有错误。

以上