React Native 阿里百川 4.x

江月待何人_
3,515 阅读3分钟

React Native 使用 阿里百川 4.x

参考文档和资料

.... 其实还有很多csdn和简书的教程，但是网页实在开的太多了，不知道哪个是哪个了。。

BG: 由于项目需要，我们需要在项目里面使用阿里百川，由于阿里百川更新的4.x,老版本可能不太适用，所以没有使用GitHub的阿里百川RN库。

顺便吐槽一句，阿里百川的文档算是我见过最烂的文档，写的跟小学生作文一样 阿里百川文档：baichuan.taobao.com/docs/doc.ht…

依赖安装

注册申请什么的我这里就不来写了，我也是半路接手这个任务，我这里只记录我所使用的方法和过程。

我使用的是gradle接入方式

android/build.gradle

allprojects {
 repositories {
   jcenter()
       maven {
            url "http://repo.baichuan-android.taobao.com/content/groups/BaichuanRepositories/"
        }
    }
}

android/app/build.gradle

dependencies { 
 ..... 
 //支付宝（可选） 
 implementation 'com.alipay.android.app.cashier:standardcashier-single:15.6.5@aar'
 compileOnly 'com.alipay.mobile.android.securitysdk:apsecuritysdk-all:3.3.0'
 //登陆 
 implementation 'com.ali.auth.sdk:alibabauth_core:2.0.0.6@aar'
 implementation 'com.ali.auth.sdk:alibabauth_ui:2.0.0.6@aar'
 implementation 'com.ali.auth.sdk:alibabauth_ext:2.0.0.6@aar'
 //安全组件 
 implementation 'com.taobao.android:securityguardaar3:5.4.171@aar'
 implementation 'com.taobao.android:securitybodyaar3:5.4.99@aar'
 implementation 'com.taobao.android:avmpaar3:5.4.36@aar'
 implementation 'com.taobao.android:sgmiddletieraar3:5.4.9@aar'
 //Mtop 
 implementation 'com.taobao.android:mtopsdk_allinone_open:3.1.2.5@jar'
 //applink 
 implementation 'com.alibaba.sdk.android:alibc_link_partner:4.1.15@aar'
 //ut 
 implementation 'com.taobao.android:utdid4all:1.5.2'
 implementation 'com.alibaba.mtl:app-monitor-sdk:2.6.4.5_for_bc'
 // 电商基础组件 
 implementation 'com.alibaba.sdk.android:AlibcTradeCommon:4.0.0.8@aar'
 implementation 'com.alibaba.sdk.android:AlibcTradeBiz:4.0.0.8@aar'
 implementation 'com.alibaba.sdk.android:nb_trade:4.0.0.8@aar'
 implementation 'com.alibaba:fastjson:1.2.41'
 ..... 
}

项目目录/MainApplication.java > onCreact() (:MainApplication.java 的onCreact方法里添加下面代码


//阿里百川
AlibcTradeSDK.asyncInit(this, new AlibcTradeInitCallback() {
    @Override
    public void onSuccess() {
        Toast.makeText(MainApplication.this, "初始化成功", Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onFailure(int code, String msg) {
        Toast.makeText(MainApplication.this, "初始化失败", Toast.LENGTH_SHORT).show();
    }
});

ALiBaiChuanUtil.java (:这是工具类，名字按自己喜好就行

public class ALiBaiChuanUtil extends ReactContextBaseJavaModule {
    private static ReactApplicationContext reactContext;

    public ALiBaiChuanUtil(ReactApplicationContext reactApplicationContext) {
        super(reactApplicationContext);
        reactContext = reactApplicationContext;

    }
    private final static String H5 = "H5";
    private final static String TAOBAO = "taobao";
    private final static String TMALL = "tmall";
    private final static String AUTO = "auto";

    private static void showDetailPage(Activity activity, String id, String type) {
        AlibcShowParams alibcShowParams;
        switch (type) {
            case H5:
                alibcShowParams = new AlibcShowParams(OpenType.Native);
                break;
            case TAOBAO:
                alibcShowParams = new AlibcShowParams(OpenType.Native);
                alibcShowParams.setClientType("taobao_scheme");
                break;
            case TMALL:
                alibcShowParams = new AlibcShowParams(OpenType.Native);
                alibcShowParams.setClientType("tmall_scheme");
                break;
            case AUTO:
                alibcShowParams = new AlibcShowParams(OpenType.Auto);
                break;
            default:
                alibcShowParams = new AlibcShowParams(OpenType.Auto);
                break;
        }
        AlibcBasePage alibcBasePage = new AlibcDetailPage(id);
        HashMap<String, String> exParams = new HashMap<>();
        // 固定写法
        exParams.put(AlibcConstants.ISV_CODE, "appisvcode");
        // 若非淘客taokeParams设置为null即可   mm_memberId_siteId_adzoneId
        // pid:广告位id
        AlibcTaokeParams alibcTaokeParams = new AlibcTaokeParams("mm_123352308_40788301_344524398", "mm_123352308_40788301_344524398", null);
        AlibcTrade.openByBizCode(activity, alibcBasePage, null, new WebViewClient(), new WebChromeClient(), "detail", alibcShowParams, alibcTaokeParams, exParams, new AlibcTradeCallback() {
            @Override
            public void onTradeSuccess(AlibcTradeResult alibcTradeResult) {
                System.out.println("打开成功");
            }

            @Override
            public void onFailure(int i, String s) {
                System.out.println("打开失败");
            }
        });
    }

    /**
     * 跳淘宝详情
     */
    @ReactMethod
    public void showTaobaoDetail(String id) {
        Activity activity = getCurrentActivity();
        showDetailPage(activity, id, TAOBAO);
    }

    /**
     * 跳天猫详情
     */
    @ReactMethod
    public void showTmallDetail(String id) {
        Activity activity = getCurrentActivity();
        showDetailPage(activity, id, TMALL);
    }

    @Nonnull
    @Override
    public String getName() {
        return "ALiBaiChuanUtil";
    }
}

上面这些就是阿里百川相关的代码，剩下的就是RN调用原生安卓的代码，我感觉这块并不是很难，按照文档来就可以了。reactnative.cn/docs/native…

问题

顺便记录一下碰到的问题

  • 按照文档添加fastjson 报错Error：Cannot fit requested classes in a single dex file.，具体解决办法可以参考 blog.csdn.net/qq_42579571…
  • 运行报错203，是找不到那张图片的问题，我是在webstorm里
    自己加了个文件和图片就行了，Android Studio添加好像会有问题
  • 运行报错202，是release和debug包的问题，上传个debug的apk获取安全图片就可以了。
  • 运行的时候最好使用Android Studio，可以查看log日志，对于解决问题很有帮助。

最后

不知道有没有遗忘什么，没记错的应该就是这些。还有碰到问题的时候也可以去官方的钉钉群问问题，虽然效果和他们的文档没差多少。。。

avatar
文章
阅读
粉丝