iOS客户端与网页交互文档

很少和客户端打交道，这次由于做会活动，要和客户端配合做个分享的功能

这里总结下基本的流程，就是前端在H5 里调用客户端的方法即可

第一部分 客户端提供需求文档

网页请求设置

1. 客户端发起请求时在HTTP Header中设置UA标识为tianqiwang_ios
2. 客户端在header中添加名为mp字段。字段内容为：{ "versionCode":"", "versionName":"4.6", "channel":"appStore", "imei":"123456789" } 字段经过base64加密。(iOS无versionCode概念，故该字段为空字符串)

客户端与网页通信

1. 客户端初始化webView时注册名为webView2345KWApp的messageHandler用于支持2345自运营网页调用原生方法。前端可通过window.webkit.messageHandlers.webView2345KWApp.postMessage()向客户端发送消息。
2. 前端发送数据格式。每条数据都应包括method字段，指定调用那个原生方法。可参考以下格式：
3. { "method": "onShareClick", /* 必选 */"title": "后裔射日活动", "detail": "中秋活动", "url": "http://ww1.sinaimg.cn/large/0065oQSqly1ft3fna1ef9j30s210skgd.jpg", "imgUrl":"http://ww1.sinaimg.cn/large/0065oQSqly1ft3fna1ef9j30s210skgd.jpg", "supportPlatformType": ["Wechat","WechatMoments","QQ","QZone","SinaWeibo","ShortMessage"] }
4. 客户端调用网页方法时，需网页定义好相应的js方法。将方法名称，调用参数、调用时机告知客户端即可。

已有交互方法

• 调用原生分享功能

场景：点击h5页面分享按钮，调起原生分

参数名	详情
method	调用的方法名(onShareClick)
title	分享的标题
detail	分享的详细内容
url	分享的url(已url encode过)
imgUrl	分享时显示的图片地址
supportPlatformType	该分享支持的平台

• 客户端通知分享是否成功

场景: 用户分享后通知网页，客户端调用onShareCallback(int resultCode，String platformType)方法

参数名	详情
resultCode	分享状态(1：成功 2：失败 3:取消)
platformType	分享的平台 可选值:"Wechat","WechatMoments","QQ","QZone","SinaWeibo","ShortMessage"

• 客户端检查网页支持分享的平台

场景: 网页加载完成后,客户端调用js方法onCheckShare()检查网页需要分享的内容，以便用户点击原生页面分享时使用。网页需返回包含以下参数的JSON对象。

参数名	详情
title	分享的标题
detail	分享的详细内容
url	分享的url(已url encode过)
imgUrl	分享时显示的图片地址
supportPlatformType	该分享支持的平台

 

 

 

第二部分 js里去调用客户端方法

html

<button id="btn1">test</button>
<div id="callback1"></div>

js

点击之后的回调函数：

window.callback = function(data) {
　　document.getElementById('callback1').innerText = JSON.stringify(data);
};

点击调用客户端的方法：
$("#btn1").click(function(){
　　try {
　　　　window.webkit.messageHandlers.webView2345KWApp.postMessage({
　　　　method: 'onShareClick',
　　　　params: {
　　　　　　title: '分享测试',
　　　　　　detail: '揭秘前世今生六道轮回',
　　　　　　url: 'http://www.77tianqi.com/frame/sm/pcqianshi',
　　　　　　imgUrl: 'http://www.77tianqi.com/images/prediction/qianshi/ming.png',
　　　　　　supportPlatformType: ["Wechat", "WechatMoments", "QQ", "QZone", "SinaWeibo", "ShortMessage"]
　　　　},
　　　　　　callback: 'callback'
　　　　});
　　} catch (e) {
　　　　window.callback(e.message);
　　　　}
　　})
一进入页面 客户端会向H5注入一个对象，里面存储了用户的设备信息，是base64 加密过的，需要会解密下，这里推荐Base64.js

引入后直接调用即可

Base64.decode(mobileKWInjectConfig)；//mobileKWInjectConfig客户端注入对象

后来得知H5和客户端交互用的最多的方法如下：

1.H5通知Native拦截返回事件，调用这个方法后Native的返回事件会调起H5的某个回调方法

2.版本号，包括内部版本号
3..获取app基本信息
4.用户登录信息
5.登录、登出
6.跳转至“首页”，跳转至“我的”
7.复制字符串
8.调起电话

9.获取appUA、获取用户cookie
10.跳转app登录
11.分享成功回调
12.告知app数据变化以刷新所有页面

希望有机会去一一尝试然后做个总结。