---
date: 2016-10-16 11:11
status: public
title: 开始众筹Web与Native交互通讯协议规范（暂行）
version: 1.0
---
#开始众筹Web（H5）与Native交互通讯协议规范（暂行）
##一、简介
为实现Web与Native的交互，现 Web，IOS，Android 三端统一使用该协议进行交互，其原理是Native通过WebView组件和Web之间进行属性的传递，方法的调用。Native通过相关方法 如OC的 stringByEvaluatingJavaScriptFromString 获取JS返回的结果 实现 Native->Web的通讯，而Web通过Native向浏览器的Window对象注入方法或属性来实现相关交互。
##二、命名规范
### 1. 三方均使用驼峰小驼峰命名法 如 方法 getUserInfo 属性 userInfo
### 2. 三方交互的方法 均注入到 Window.native 中
### 3. 三方返回值必须严格约定返回值的类型
~~~
Web中项目有语法检查 所以 返回值 是字符串还是数字要有相应说明 一般传值以Object或者字符串形式，返回值也同样。
在Web中 我们项目判断使用 ＝＝＝ 进行判断的 所以 1 ＝＝＝ ‘1’ 是false 这点需要注意
~~~
##三、用户信息的传递
### 1. 登录注册的情况
App端打开之后 通过 Web提供的借口方法 window.native.setNativeStorage 将用户信息写到
localStorage里 约定localStorage的用户key为 userinfo
### 2. token过期或登出的情况
token过期 需要续租的情况 请将续租后的新信息 重新写入到nativeUserInfo里
登出 请 直接清空 userinfo 的信息
### 3. 用户信息更新的情况
用户信息更新后 请更新 userinfo
##四、协议类型的约定
### 1. 项目跳转类
协议约定： kaishiba://www.kaistart.com/project?id='123'
Web端的链接使用 该约定协议 Native端拦截到ID 跳到相应项目页
### 2. 特殊跳转类
协议约定 kaishiba://www.kaistart.com/specail?id=''
Web端根据具体情况定义 specail后面的参数 Native端做出相应处理
### 3. 方法调用类
三方均将方法注入到浏览器中的window.native 或者 window.KaiJsBridge中
然后调用公共接口的方法，具体可以看 五 六
##五、Web 调用 Native
1. Native将封装好的方法 注入到 window.KaiJsBridge 中
2. Web可以获取到window.KaiJsBridge下的方法 传递相关参数
3. Native拦截到方法 做出相应处理
示例：
以之前活动报名的分享为例
> Native将封装好的share方法注入到 window.native下
> Js这时候可以在window对象中获取到 share方法
> window.native.share(id, desc, title, pic) 将参数调用方法传递过去
> Native收到相应方法以及参数 做相应处理
> 以上完成了 Web->Native的 单项通信
支付示例（伪代码）
1. 约定 pay() 为调起参数的方法名 参数为 itemid, price
2. Native 写好相应方法 注入到window.native下
3. js调起 window.native.pay(itemid, price)
4. Native 处理相关内容
5. 支付完成后 Native回调 Js的相关内容 参见 六 中的示例
##六、Native 调用 Web
原理和 五 一样 Web将方法注入到window.native 或者 window.KaiJsBridge中
Native直接调用Js的相关方法，并传递相关参数，执行js的相关内容。
示例：
1. js约定 payCallback(itemid, res) 为支付完成后 Native调去Js的方法
2. payCallback(item, res)
{
if (!res) return false;
window.localhost.href = 'http://www.kaistart.com'
}
3. Native支付完成后 调去 js中的 window.native.payCallBack 并传递相关参数
4. 示例中如果支付成功 则跳转到 www.kaistart.com
5. 至此完成了 Native调用Web的相关方法
##七、 说明
本文档仅做现阶段开发参考，日后会根据需求三方协商并修订文档。
##八、另见 接口文档
