iOS客户端与网页交互文档
很少和客户端打交道,这次由于做会活动,要和客户端配合做个分享的功能
这里总结下基本的流程,就是前端在H5 里调用客户端的方法即可
第一部分 客户端提供需求文档
网页请求设置
- 客户端发起请求时在HTTP Header中设置UA标识为
tianqiwang_ios
- 客户端在header中添加名为
mp
字段。字段内容为:{ "versionCode":"", "versionName":"4.6", "channel":"appStore", "imei":"123456789" }
字段经过base64加密。(iOS无versionCode
概念,故该字段为空字符串)
客户端与网页通信
- 客户端初始化webView时注册名为
webView2345KWApp
的messageHandler用于支持2345自运营网页调用原生方法。前端可通过window.webkit.messageHandlers.webView2345KWApp.postMessage()
向客户端发送消息。 - 前端发送数据格式。每条数据都应包括
method
字段,指定调用那个原生方法。可参考以下格式: { "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"] }
- 客户端调用网页方法时,需网页定义好相应的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数据变化以刷新所有页面
希望有机会去一一尝试然后做个总结。
iOS客户端与网页交互文档的更多相关文章
- 一款APP的交互文档从撰写到交付
我第一份工作的设计总监是前百度设计师,34岁,一线设计12年:今年聊天说转了产品总监,如今39岁还活跃在行业中…… 我第二份工作的部门总监是前腾讯工程师,38岁,一线开发14年:2年前在Q群里跟我们说 ...
- Oracle client客户端简易安装网上文档一
Oracle client客户端简易安装网上文档一-------------------------------------------------------------------------一. ...
- iOS网络编程笔记——XML文档解析
今天利用多余时间研究了一下XML文档解析,虽然现在移动端使用的数据格式基本为JSON格式,但是XML格式毕竟多年来一直在各种计算机语言之间使用,是一种老牌的经典的灵活的数据交换格式.所以我认为还是很有 ...
- IOS 预览pdf,word文档的集中方式
在iPhone中可以很方便的预览文档文件,如:pdf.word等等,这篇文章将以PDF为例.介绍三种预览PDF的方式,又分别从本地pdf文档和网络上的pdf文档进行对比. 预览本地PDF文档: 1.使 ...
- ios App与网页交互
随着移动APP的快速迭代开发趋势,越来越多的APP中嵌入了html网页,但在一些大中型APP中,尤其是电商类APP,html页面已经不仅仅满足展示功能,这时html要求能与原生语言进行交互.相互传值. ...
- 1230.2——iOS准备(阅读开发者文档时的笔记)
1.程序启动的过程 .在桌面找到相应的应用的图标 点击图标 .main函数 UIApplication类Every app has exactly one instance of UIAp ...
- iOS 企业证书的使用文档
IN-HOUSE应用程序分发 下面介绍下使用网络方式进行部署的方式,用户直接在iPhone/iPad的Safari浏览器里面输入URL地址即可安装, 注意:目前对于这种企业级开发的应用程序最好的分发方 ...
- iOS开发——JS网页交互——javaScript
JS中调用OC #import "ViewController.h" @interface ViewController () <UIWebViewDelegate> ...
- ios中GDataXML解析XML文档
参考文章 http://blog.csdn.net/ryantang03/article/details/7868246 适合解析一个节点多个属性要用GDataXml 格式如下 <?xml ve ...
随机推荐
- [CJOJ2425][SYZOI Round1]滑稽的树
cjoj sol 子树转化成dfs序上的区间. 所以就变成了:区间Kth,区间内[a,b]范围内的数有多少个,单点修改 裸的树套树啊. code #include<cstdio> #inc ...
- 自定义type为file型input控件+该控件具有本地图片预览功能
最近的一个项目需求是写一个type为filex型的input控件,这个控件: 第一,要自定义样式: 第二,要能直接在本地预览上传的图片: 第三,要能检测图片的尺寸是否符合要求. 故综合网上的资源写了下 ...
- Git 系列之tag的用法---为你的代码标记版本号
版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[-] 本地仓库操作 远程仓库操作 其他 tag 操作 在做app开发的时候经常有版本的概念,比如v1.0.v1.1之类的,不同 ...
- linux shell查询
查看当前版本可用的shell cat /etc/shells 查看当前使用的shell echo $0 查看当前用户默认使用的shell echo $SHELL
- java类加载器-----用户自定义类加载器实现
java类加载器主要分为如下几种: jvm提供的类加载器 根类加载器:底层实现,主要加载java核心类库(如:java.lang.*) 扩展类加载器:使用java代码实现,主要加载如:jre/lib/ ...
- oracle--事物---
一.什么是事务 事务用于保证数据的一致性,它由一组相关的dml语句组成,该组的dml(数据操作语言,增删改,没有查询)语句要么全部成功,要么全部失败. 如:网上转账就是典型的要用事务来处理,用于保证数 ...
- 自定义echart tooltip格式
formatter: function (tipData) { return tipData[0].name + '</br>' + '<span style="displ ...
- LAMP 1.9域名301跳转
给两个域名分主次.输入次域名跳转到主域名然后进行访问. 首先打开虚拟机配置文件. vim /usr/local/apache2/conf/extra/httpd-vhosts.conf 把这段配置添加 ...
- CSS之边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 情况1:当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元 ...
- 记一次SQL xml字段关联查询
需求: 一张表是APP表,结构如下: app_category为该游戏所属的类别ID,xml字段类型 另一张表是类别表,就ID对应名称,这就不上图了. 还有一张表是每个游戏的下载记录,结构如下: Do ...