基于react-native-wechat 之App拉起小程序源

前言

最近做的一个需求，要求app需要拉起小程序进行支付操作，之前做reavt-native开发内部集成微信的支付， 分享，第三方登录等操作。但是默认的库中不包含拉起小程序的类。
小程序与app关联的问题这里就不做描述了。 主要需要小程序的原始Id和app的id

AndroidManifest.xml文件修改

 <activity
            android:name="包名.wxapi.WXEntryActivity"
            android:label="@string/app_name"
            android:exported="true"
            android:configChanges="keyboardHidden|orientation|screenSize"
            android:launchMode="singleTask"
            android:taskAffinity="包名"
            android:theme="@android:style/Theme.Translucent.NoTitleBar" />
            />

react-native-WeChat index.js 文件增加拉起小程序方法

/**
 * wechat launchMini
 * @param {Object} data
 * @returns {Promise}
 */
export function launchMini(data) {
    // FIXME(Yorkie): see https://github.com/yorkie/react-native-wechat/issues/203
    // Here the server-side returns params in lowercase, but here SDK requires timeStamp
    // for compatibility, we make this correction for users.
    function correct(actual, fixed) {
        if (!data[fixed] && data[actual]) {
            data[fixed] = data[actual];
            delete data[actual];
        }
    }
   // 参数设置 这里距离为订单Id
    correct('orderId', 'orderId');
    // FIXME(94cstyles)
    // Android requires the type of the timeStamp field to be a string
    if (Platform.OS === 'android') data.timeStamp = String(data.timeStamp)

    return new Promise((resolve, reject) => {
        WeChat.launchMini(data, result => {
            if (result) reject(result);
        });
    });
}

android目录下build.gradle文件下增加依赖

api 'com.tencent.mm.opensdk:wechat-sdk-android-with-mta:5.3.1'

WeChatModule.java增加方法

@ReactMethod
public void launchMini(ReadableMap data, Callback callback) {
String id = "";
if (data.hasKey("orderId")) {
id = data.getString("orderId");
}

    String appId = ""; // 填应用AppId
    IWXAPI api = WXAPIFactory.createWXAPI(getCurrentActivity(), appId);

    WXLaunchMiniProgram.Req req = new WXLaunchMiniProgram.Req();
    req.userName = ""; // 填小程序原始id
    req.path = "/pages/user/pay?id=" + id
            ////拉起小程序页面的可带参路径，不填默认拉起小程序首页，对于小游戏，可以只传入 query 部分，来实现传参效果，如：传入 "?foo=bar"。
    req.miniprogramType = WXLaunchMiniProgram.Req.MINIPROGRAM_TYPE_PREVIEW;// 可选打开 开发版，体验版和正式版
    callback.invoke(api.sendReq(req) ? null : INVOKE_FAILED);
}
## public void onResp(BaseResp baseResp) 甚至回调方法添加
else if (baseResp instanceof WXLaunchMiniProgram.Resp) {
        WXLaunchMiniProgram.Resp resp = (WXLaunchMiniProgram.Resp) (baseResp);
        map.putString("type", "WXLaunchMiniProgram.Resp");
        map.putString("returnKey", resp.extMsg);
    }

react-native端需要进行监听

WeChat.addListener("WXLaunchMiniProgram.Resp", response => {
//returnKey 自己约定返回参数
        if(response && response.returnKey == 'success') {
          
        } else {
          Toast.info('支付失败');
        }
      });
// 调用：
WeChat.launchMini({});

小程序打开APP可看一下官网。大功告成