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

这里总结下基本的流程,就是前端在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数据变化以刷新所有页面

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

iOS客户端与网页交互文档的更多相关文章

  1. 一款APP的交互文档从撰写到交付

    我第一份工作的设计总监是前百度设计师,34岁,一线设计12年:今年聊天说转了产品总监,如今39岁还活跃在行业中…… 我第二份工作的部门总监是前腾讯工程师,38岁,一线开发14年:2年前在Q群里跟我们说 ...

  2. Oracle client客户端简易安装网上文档一

    Oracle client客户端简易安装网上文档一-------------------------------------------------------------------------一. ...

  3. iOS网络编程笔记——XML文档解析

    今天利用多余时间研究了一下XML文档解析,虽然现在移动端使用的数据格式基本为JSON格式,但是XML格式毕竟多年来一直在各种计算机语言之间使用,是一种老牌的经典的灵活的数据交换格式.所以我认为还是很有 ...

  4. IOS 预览pdf,word文档的集中方式

    在iPhone中可以很方便的预览文档文件,如:pdf.word等等,这篇文章将以PDF为例.介绍三种预览PDF的方式,又分别从本地pdf文档和网络上的pdf文档进行对比. 预览本地PDF文档: 1.使 ...

  5. ios App与网页交互

    随着移动APP的快速迭代开发趋势,越来越多的APP中嵌入了html网页,但在一些大中型APP中,尤其是电商类APP,html页面已经不仅仅满足展示功能,这时html要求能与原生语言进行交互.相互传值. ...

  6. 1230.2——iOS准备(阅读开发者文档时的笔记)

    1.程序启动的过程    .在桌面找到相应的应用的图标 点击图标    .main函数 UIApplication类Every app has exactly one instance of UIAp ...

  7. iOS 企业证书的使用文档

    IN-HOUSE应用程序分发 下面介绍下使用网络方式进行部署的方式,用户直接在iPhone/iPad的Safari浏览器里面输入URL地址即可安装, 注意:目前对于这种企业级开发的应用程序最好的分发方 ...

  8. iOS开发——JS网页交互——javaScript

    JS中调用OC #import "ViewController.h" @interface ViewController () <UIWebViewDelegate> ...

  9. ios中GDataXML解析XML文档

    参考文章 http://blog.csdn.net/ryantang03/article/details/7868246 适合解析一个节点多个属性要用GDataXml 格式如下 <?xml ve ...

随机推荐

  1. Gym - 100801D:Distribution in Metagonia (数学)

    题意:给定一个N,让你把它拆成若干个只含素因子2和3的数之和,且两两之间没有倍数关系,比如10=4+6. 思路:即是2因子的幂递增,3因子的幂递减:或者反之. 对于当前N,我们拆分出的数为num=2^ ...

  2. P1607 [USACO09FEB]庙会班车Fair Shuttle

    题目描述 Although Farmer John has no problems walking around the fair to collect prizes or see the shows ...

  3. mesos的zookeeper变更

    采用rpm方式安装你了mesos,碰到zookeeper(采用了cloudera的zookeeper)的IP地址变化了,肿么办? 在master机器中: /etc/mesos/zk进行编辑修改zk路径 ...

  4. sysbench安装、使用

    二.编译安装 编译非常简单,可参考 README 文档,简单步骤如下:   cd/tmp/sysbench-0.4.12-1.1./autogen.sh./configure --with-mysql ...

  5. 关系运算符 逻辑运算符 if 语句 switch语句

    1. BOOL类型 BOOL isRightOrNo = YES; isRightOrNo = 56;//可以打印出来,在C语言中,非0即真 printf("%d\n" , isR ...

  6. 如何在windows 2003(虚拟主机)上面部署MVC3

    相信有很多朋友和我一样遇到了这个问题,网上大牛说的都不是很清楚,关于这个问题我详细的跟进一下 这个问题呢大致分为两种情况 一.有服务器的控制权限,这个就简单很多, 1.安装mvc3支持组件2.如果可以 ...

  7. HTML表格中<td scope="col">与<td scope="row">的含义

    HTML表格中<td scope="col">与<td scope="row">的含义 表格中 <td scope="c ...

  8. linux命令-vim一般模式下复制剪切粘贴

    删除光标后的一个字符 x 删除光标前的一个字符 shift+x 删除指定个数的字符 数字+x 删除一行字符 dd 剪切指定行数  数字dd  3dd 剪切3行 其实并没有删掉而是保存着剪切板里 粘贴在 ...

  9. 树莓派 Learning 002 装机后的必要操作 --- 07 设置静态IP地址

    树莓派 装机后的必要操作 之 设置静态IP地址 我的树莓派型号:Raspberry Pi 2 Model B V1.1 装机系统:NOOBS v1.9.2 为了避免IP变来变去,我们将IP地址设置为静 ...

  10. Ubuntu12.04安装R ,Rstudio, RHive

    环境: Ubuntu12.04 R-3.1.0 0.Ubuntu安装R官网的介绍 http://mirrors.ustc.edu.cn/CRAN/ Precise Pangolin (12.04; L ...