h5移动端和ios以及安卓客户端的接口联调

今天在这里给大家分享的是关于h5移动端和客户端的联调，之前看网上资料大都是介绍jsBridge如何和ios配合使用，不够全面且无具体的应用场景，原文链接如下：

https://www.cnblogs.com/chaoyuehedy/p/8583272.html

接下来我结合具体的使用场景来说一下如何接口联调，首先说一下这边的接口要求，对于点赞和分享，嵌入客户端的h5页面必须要拿到当前用户的信息，即鉴权信息，方可使用点赞和分享接口，这里是一个用户点击文章列表进入详情页后的点赞和分享场景，代码如下：

//布局代码

//逻辑代码

$(function() {
var shareData = [];

//这里用户点击文章列表后，通过获取当前网址的文章列表参数，来动态显示文章内容，id即为文章id
var id = window.location.href.split('=')[1];

//goodsCount 点赞人数
var goodsCount = 0;

//请求文章详情展示内容
$.ajax({
url:'/api/article/detail.do?articleId='+id,
type: 'get',
dataType: 'json',
success: function(resData) {
if(resData.state == 'ok') {
var res = resData.data.article;

//shareData用户存储下面用户点击分享后要分享显示的数据
shareData.push({
"title":res.shareTitle,
"digest":res.shareDigest,
"img":res.shareImage,
"link":window.location.href,
"circle":res.shareTitle
})

//下面几行就是填充文章详情内容
$('.title_box').css({'background':'url('+res.detailCover+') no-repeat','background-size':'cover'});
$('.top_content').html(res.content);
var str = '';
for(var i=0;i<res.praisedUserList.length; i++) {
str += '<img src="'+res.praisedUserList[i].header+'" alt="分享">';
};
$('.avatars').html(str);
goodsCount = res.praiseCount;
$('.goods').text(res.praiseCount+'人赞');
}
}
});
// 点赞功能公共接口请求，用于ios和android都要用到点赞接口，所以我对其进行了一下封装
function give_praise(headers) {
$.ajax({
url: '/api/article/togglePraise.do',
type: 'post',
headers: headers,
dataType: 'json',
data: {
"articleId": id
},
success: function(res) {
var isPraised = res.data.isPraised;
if(isPraised) {
goodsCount = goodsCount+1;
}else {
goodsCount = goodsCount-1;
};
$('.goods').text(goodsCount+'人赞');
}
})
}

//用户点击了点赞按钮后，开始联调，这里是重点
$('.give_good').click(function() {
var ua = navigator.userAgent.toLowerCase();

//authPath这个是要传给ios客户端的点赞请求接口，不需要任何参数
var authPath = '/api/article/togglePraise.do';

//根据ua信息判断是在ios还是android
if(/IOS|iPhone|iPod/i.test(ua)) {
// 在app中点击的点赞按钮
/*与OC交互的所有JS方法都要放在此处注册，才能调用通过JS调用OC或者让OC调用这里的JS*/
setupWebViewJavascriptBridge(function(bridge) {
/* Initialize your app here */
/*我们在这注册一个js调用OC的方法，不带参数，且不用ObjC端反馈结果给JS：打开本demo对应的博文*/
// bridge.registerHandler('openWebviewBridgeArticle', function() {})
/*JS给ObjC提供公开的API，在ObjC端可以手动调用JS的这个API。接收ObjC传过来的参数，且可以回调ObjC*/
/* bridge.registerHandler('getUserInfos', function(data, responseCallback) {
responseCallback({
'userId': '123456',
'blog': '标哥的技术博客'
})
}) */
/*JS给ObjC提供公开的API，ObjC端通过注册，就可以在JS端调用此API时，得到回调。ObjC端可以在处理完成后，反馈给JS，这样写就是在载入页面完成时就先调用*/
// bridge.callHandler('getUserIdFromObjC', function(responseData) {})

//上面介绍的是jsBriage的更多拓展方法内容，这里只需要用下面这些代码就行

bridge.callHandler('signature', {
"url": authPath
}, function(response) {

//ios接收到url后，进行处理，并返回给h5对应的鉴权信息
give_praise(response);
})
})
}else if(/Android/i.test(ua)) {

//android的联调和ios不同，这里也同样需要给android传点赞url，android是安卓开发同学写的一个表示android的代名词，auth是安卓开发同学自定义的一个方法
give_praise(JSON.parse(android.auth(authPath)));
}else {
window.location.href = 'download/download.html';
}
})

//这里是分享联调，用法和点赞相同
$('.share_box').click(function() {
var ua = navigator.userAgent.toLowerCase();
if(/IOS|iPhone|iPod/i.test(ua)) {
setupWebViewJavascriptBridge(function(bridge) {
bridge.callHandler('share', shareData[0], function(response) {
// console.log(response);
})
})
}else if(/Android/i.test(ua)) {
android.share(JSON.stringify(shareData[0]));
}else {
window.location.href = 'download/download.html';
}
})
});

</script>

以上就是对于联调的详细讲解，如果哪里不理解，可以私信我在下方评论区！