最新版阿里百川SDK对接uniapp教程超级详细 支持IOS18体系
前言：制止到写这边文章的时间，目前阿里百川sdk的插件最新版为Android 标准版：4.1.0.9；iOS标准版：4.1.0.4 以下教程围绕该版本编写。
一、使用前的预备工作
首先到 阿里百川网站 ->注册->新建应用->填写好相关应用的包名-> 获取应用的 安全图片 用于验证应用使用的合法性
二、必须要开通《 百川电商SDK 》 ，否则授权会出问题，假如不做返利模式,直接打开领券页面的可以忽略此步调
https://i-blog.csdnimg.cn/blog_migrate/668dfe64100567df9ff8a17dff765ce9.png
三、获取应用安全图片
[*]选择本身要使用的应用,生成对应的安全图片.
[*]目前安卓端阿里百川必要使用V6.1的安全图 IOS端使用V6.0的安全图
[*]安卓 Android 必要上传apk 安装包来获取安全图片,apk安装包, 使用你的安卓证书, 提交云打包生成apk 安装包后,再到百川上传来获取安全图片.如包名或证书有更改 都必要重新获取安全图片,不然会初始化会失败,这里上传的时间可以直接上传空包,百川只校验署名信息
[*]ios只必要输入包名即可获取安全图
必要通过这个新百川地址来获取安卓6.1的安全图 https://suite.baichuan.taobao.com/#/sdk
https://i-blog.csdnimg.cn/direct/db4bfc352be2450caedf8c9583477e1d.png
四、插件设置
[*]打开插件地址，点击试用，https://i-blog.csdnimg.cn/blog_migrate/c6103cdfaa1b1e7f0318c5bfa07d0318.png
[*]选择一个要绑定的项目,然后输入APP的包名
https://i-blog.csdnimg.cn/blog_migrate/d1324574a471c13ccfc33a95f35e4502.png
[*]在uniapp项目根目录下创建nativeplugins 插件文件夹, 主要是存放安全图和插件的其他文件,包含 ios 和 android 子目录, 插件名称:xiguazhu-baichuan 文件夹名不能修改, 具体看图片所示.
按照图中创建文件夹
https://i-blog.csdnimg.cn/direct/bac82825e9a948f0a3c4d0e7404e7ebe.png
提示：
假如必要使用付出宝功能，要把插件包中的 UTDID.framework 和 utdid4all-1.5.3_proguard.jar 文件删除掉，假如不必要则保留一起打包. UTDID.framework文件和 utdid4all-1.5.3_proguard.jar文件以及整个目录可以问百川插件作者要，大概插件示例工程可以本身下载
第一种环境.
必要使用uniapp 官方的付出宝功能时百川设置阐明IOS 苹果在插件目录下保留安全图片即可:yw_1222_baichuan.jpg (名字必须叫这个)Android 安卓在插件目录下保留安全图片即可:yw_1222_baichuan.jpg (名字必须叫这个) 第二种环境.
未使用uniapp 官方的付出宝功能时百川设置阐明IOS 苹果在插件目录下保留文件: UTDID.framework +yw_1222_baichuan.jpg (名字必须叫这个)Android 安卓在插件目录下保留文件:utdid4all-1.5.3_proguard.jar + yw_1222_baichuan.jpg(名字必须叫这个)
[*]IOS 端唤起淘宝客户端必要特别设置下,在设置 manifest.json 文件中,找到 ios 项,参加以下代码
"ios" : {
"urltypes" : [
{
"urlschemes" : [ "tbopen32470416" ] //tbopen+您应用的AppKey
}
],
"urlschemewhitelist" : "tbopen,tmall"
}
如下图:
https://i-blog.csdnimg.cn/blog_migrate/e89069b9bb98223c25cfa127d01e5bb7.png
urlschemes 的名称设置是 tbopen+AppKey, AppKey是百川AppKey ,一串数字,不要填错,否则会初始失败
https://i-blog.csdnimg.cn/blog_migrate/108bfbe239e55cfe2f9486a23325d0b3.png
旧版阿里百川https://i-blog.csdnimg.cn/direct/7b990d0510a9479f99dd7896c462a767.png
新版的
五、阿里百川插件方法介绍
方法名阐明login()淘宝授权登录logout()退出登录detailPage()打开淘宝任意页面shopPage()打开店铺页面OpenMyCart()打开淘宝购物车getUserInfo()获取用户授权信息checkSession()检查用户登录状态taobaoOauth()渠道授权getUtdid()获取手机设备 UTDID 唯一码 六、使用案例
1. 实例化插件 ,在必要用到插件的页面引入
const baichuan = uni.requireNativePlugin('xiguazhu-baichuan');
2. 插件初始化 (调用之前必须初始化)
// 先初始化插件
baichuan.init({}, result => {});
2.淘宝授权登录 login() , 传入参数: 无
baichuan.login({},result=>{
console.log(result);
});
[*]授权成功后,返回数据格式
{
"userinfo": {
"topAccessToken": "63001084681b15666d9b50a0f64193354e0267457c2ba7b34****",
"topExpireTime": "7776000",
"userid": "3401100915",
"avatarUrl": "https://wwc.alicdn.com/avatar/getAvatar.do?userIdStrV2=31CMmjAGPUw03*cOYWkyYNTT&type=taobao",
"openSid": "9b7b973a1ab23f0de168318640cc8199fa353b470622d8e1195394718f531f8****",
"topAuthCode": "bPDMxNN3UAEKu1cEbDrRSPhK30****",
"openId": "AAHpJD0KANVDozhKB****",
"nick": "c7****"
},
"code": 0,
"msg": "登录成功"
}
3.退出登录 logout() , 传入参数: 无
[*]用户取消 返回数据
{
"code": 10004,
"msg": "用户取消登录"
}
4.打开商品详情页 detailPage() , 打开商品详情页有两种方式
[*]openType=> 参数是打开的方式: 0=> 使用url打开,1=>使用ID打开
[*]itemid=> 商品 ID
[*]url=>商品链接
第一种,通过 商品 ID ,来打开详情页
baichuan.detailPage({
"itemid": "562161593312",
"openType": 1
}, result => {
});
第二种,通过商品链接,来打开详情页
baichuan.detailPage({
url: "https://s.click.taobao.com/KWLkWbu",
"openType": 0
}, result => {
});
5.打开店铺 shopPage()
[*] openType => 参数是打开页面的方式: 0=> 使用APP端打开
[*] shopid=> 店铺ID
baichuan.shopPage({
shopid: "67907495",
"openType": 0
}, result => {
console.log(result);
});
6. 打开我的购物车 shopCar()
baichuan.shopCar();
7. 检查授权登录状态,checkSession() 传入参数:无
baichuan.checkSession({}, result => {
console.log(result);
});
[*]返回数据参数
1.已经登录
{
"code": 0,
"msg": "登录成功"
}
2.登录失效
{
"code": 1,
"msg": "未登录"
}
8.获取用户已经授权的信息,getUserInfo() 传入参数:无
{
baichuan.getUserInfo({}, result => {
console.log(result);
});
}
[*]返回数据参数
1.成功获取
{
"userinfo": {
"topAccessToken": "63025041498269f01a2dbbe6c5448cee6122d3ed1****",
"topExpireTime": "7776000",
"userid": "3401100915",
"avatarUrl": "https://wwc.alicdn.com/avatar/getAvatar.do?userIdStrV2=31CMmjAGPUw03*cOYWkyYNTT&type=taobao",
"openSid": "af3afc198f6f4e4ea542bfb3423ee996edb3f58c84a44d1eda173d45f8ea1e6d2****",
"topAuthCode": "2qdoIZJcrf00mhyTIvF7J2****",
"openId": "AAHpJD0KANVDozhK****",
"nick": "c7****"
},
"code": 0,
"msg": "登录成功"
}
2.获取失败
{
"code": 1,
"msg": "未登录"
}
9.获取用户设备 UTDID 码
baichuan.getUtdid(result => {
console.log(result);
});
[*]返回数据
{
"utdid": "YSRqDyGmBjADADi5****"
}
九、淘宝渠道授权阐明(返利功能必要用到渠道ID跟踪订单的)
1. H5 使用 code 方式授权
https://oauth.taobao.com/authorize?response_type=code&client_id=2948****&redirect_uri=http://你的域名/&state=1212&view=wap
把网址中的参数，更换成本身的即可.
baichuan.taobaoOauth({
"url": "https://oauth.taobao.com/authorize?response_type=code&client_id=294****&redirect_uri=http://你的域名/&state=1212&view=wap"
}, result => {
console.log(result);
});
链接获取授权码参数
参数名字参数选项参数值参数释义client_id必选联盟媒体keyresponse_type必选coderedirect_uri必选拜见redirect_uri的界说state必选传入值与返回值保持同等。view必选默以为web移动端 wap 1.授权成功 返回参数:
暂无
2. 其他的返回
暂无
2. H5 使用 token 方式授权(保举使用)
授权网址
https://oauth.taobao.com/authorize?response_type=token&client_id=2948****&state=1212&view=wap
链接获取授权码参数
参数名字参数选项参数值参数释义client_id必选联盟媒体keyresponse_type必选tokenstate必选传入值与返回值保持同等。view必选默以为web移动端 wap 1.授权成功 返回参数:
{
"info": {
"expires_in": "2592000",
"taobao_open_uid": "AAEAWObHANZeVL1YKsd****",
"r1_expires_in": "1800",
"w2_expires_in": "0",
"refresh_token": "6101303057813b26f0954a9a5acd7194fff62be3e9390493****",
"access_token": "6101d0302741aab1596335b19cee233835e8641e285b5****",
"state": "1212",
"top_sign": "59C789C51A82C6D1F6DEAB9375****",
"taobao_user_id": "3401100****",
"taobao_user_nick": "c7****",
"w1_expires_in": "1800",
"re_expires_in": "2592000",
"r2_expires_in": "0",
"token_type": "Bearer"
},
"code": 0,
"msg": "授权成功"
}
2. 其他的返回
无
注意事项
[*]安卓的安全图要使用v6.1版本的，申请地址https://suite.baichuan.taobao.com
[*]只要设置精确，淘宝登录和渠道授权都是面输入密码的，假如必要输入密码，请检查安全图
[*]修改安全图后必要重新打包，原生插件的改动，都必要打包
[*]示例工程里已经将安卓的utdid4all-1.5.3_proguard.jar和IOS端的UTDID.framework单独分离开，假如没有勾选使用官方的付出宝付出，这两个文件需自行添加到目录里
[*]试用期间可以跑示例工程测试
[*]新版本的HX打包时间，必要关闭res混淆，否则拉不起手淘，https://doc.dcloud.net.cn/uni-app-x/collocation/manifest.html#enableresourceoptimizations
uniapp 原生插件如何使用，可以参考这个：https://ask.dcloud.net.cn/article/36106
拉起手淘失败,一样平常是安全图片的问题，更新安全图片之后再尝试一下
有不懂的可以加微 shenlailai6 咨询，
加挚友备注csdn阿里百川咨询,否则不通过
作者简介:从事淘客行业多年~
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]