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

前言

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

AndroidManifest.xml文件修改

 
            />

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可看一下官网。大功告成

你可能感兴趣的:(基于react-native-wechat 之App拉起小程序源码修改)