持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

前言

这次我给大家讲一下怎么从react-native的App跳转到微信小程序，一般讲可以看一下微信的开发者文档，有讲到原生怎么接入sdk和使用方法，不过我这次讲的是使用现在已经做好的组件：react-native-wechat-lib

正文

1、创建微信移动应用

如果需要从App跳转微信小程序，需要在微信开放平台创建一个移动应用，包括安卓和ios，地址：open.weixin.qq.com/ ，登录后按照步骤操作即可，可以给你们的运营去做，我们提供App包相关的信息即可。

2、安装组件依赖

执行安装 npm install react-native-wechat-lib --save，然后连接一下安卓库 react-native link react-native-wechat-lib。 组件npm地址：www.npmjs.com/package/rea…

3、配置安卓参数

（1）在里面MainActivity.java 或者 MainApplication.java中加入以下代码：

import com.theweflex.react.WeChatPackage; // Add this line

  @Override
  protected List<ReactPackage> getPackages() {

 @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // Packages that cannot be autolinked yet can be added manually here, for example:

 // packages.add(new MyReactNativePackage());
    packages.add(new WeChatPackage()); // Add this line
    return packages;
}

如果你们的代码已经有其他的包，直接在后面增加packages.add(new WeChatPackage());

（2）在安卓代码android/app/src/main/java （路径可以看自己的代码）下新建一个java文件WXEntryActivity.java，写入以下内容：

package your.package.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();

  }
}

（3） 在AndroidManifest.xml文件增加一个activity，android:name=".wxapi.WXEntryActivity"为刚才新建的文件路径，如下：

<activity
  android:name=".wxapi.WXEntryActivity"
  android:label="@string/app_name"
  android:exported="true"
/>

4、使用方法

（1）注册微信应用，可以在主程序或者调用的地方先写以下代码：

WeChat.registerApp("wx3242342424", "https://xxx.com/");

第一个参数为微信应用原始id，后面的为ios的Applink 的地址。

（2）跳转小程序：

let params = {
     userName: 'gh_2113414141', // 小程序id
     miniProgramType: 1, // 正式版:0，测试版:1，体验版:2
     path: "?query=123"  // 可选参数
}
 WeChat.isWXAppInstalled()
    .then((isInstalled) => {
        if (isInstalled) {
            WeChat.launchMiniProgram(params).then(responseCode => {

            })
            .catch(err => {
                console.log("小程序调用错误===>", err);
            })
        } else {
            Alert.alert('提示', '没有安装微信软件，请您安装微信之后再试', [
                {text: '确定'}
            ])
        }
    });

（3）监听小程序返回，为防止多次监听，可以先移除事件，再进行监听。

this.myEventEmitter && DeviceEventEmitter.removeSubscription(this.myEventEmitter);
this.myEventEmitter = DeviceEventEmitter.addListener('WeChat_Resp', resp => {
    console.log('返回参数===>:', resp);
});

5、其他问题

• App包名及注册的id需要和微信开发平台保持一致，
• 测试监听返回事件的时候，可以使用控制台输出，使用alert的话有时不生效，导致我以为没有返回。
• 这个组件还有好多可以使用的方法，例如打开微信、分享图片、分享小程序、支付之类的，具体可以参考组件文档。