---
date: 2016-10-16 11:11
status: public
title: 開始眾籌Web與Native交互通訊協(xié)議規(guī)范（暫行）
version: 1.0
---
#開始眾籌Web（H5）與Native交互通訊協(xié)議規(guī)范（暫行）
##一、簡介
為實(shí)現(xiàn)Web與Native的交互，現(xiàn) Web，IOS，Android 三端統(tǒng)一使用該協(xié)議進(jìn)行交互，其原理是Native通過WebView組件和Web之間進(jìn)行屬性的傳遞，方法的調(diào)用。Native通過相關(guān)方法 如OC的 stringByEvaluatingJavaScriptFromString 獲取JS返回的結(jié)果 實(shí)現(xiàn) Native->Web的通訊，而Web通過Native向?yàn)g覽器的Window對象注入方法或?qū)傩詠韺?shí)現(xiàn)相關(guān)交互。
##二、命名規(guī)范
### 1. 三方均使用駝峰小駝峰命名法 如 方法 getUserInfo 屬性 userInfo
### 2. 三方交互的方法 均注入到 Window.native 中
### 3. 三方返回值必須嚴(yán)格約定返回值的類型
~~~
Web中項(xiàng)目有語法檢查 所以 返回值 是字符串還是數(shù)字要有相應(yīng)說明 一般傳值以O(shè)bject或者字符串形式，返回值也同樣。
在Web中 我們項(xiàng)目判斷使用 ＝＝＝ 進(jìn)行判斷的 所以 1 ＝＝＝ ‘1’ 是false 這點(diǎn)需要注意
~~~
##三、用戶信息的傳遞
### 1. 登錄注冊的情況
App端打開之后 通過 Web提供的借口方法 window.native.setNativeStorage 將用戶信息寫到
localStorage里 約定localStorage的用戶key為 userinfo
### 2. token過期或登出的情況
token過期 需要續(xù)租的情況 請將續(xù)租后的新信息 重新寫入到nativeUserInfo里
登出 請 直接清空 userinfo 的信息
### 3. 用戶信息更新的情況
用戶信息更新后 請更新 userinfo
##四、協(xié)議類型的約定
### 1. 項(xiàng)目跳轉(zhuǎn)類
協(xié)議約定： kaishiba://www.kaistart.com/project?id='123'
Web端的鏈接使用 該約定協(xié)議 Native端攔截到ID 跳到相應(yīng)項(xiàng)目頁
### 2. 特殊跳轉(zhuǎn)類
協(xié)議約定 kaishiba://www.kaistart.com/specail?id=''
Web端根據(jù)具體情況定義 specail后面的參數(shù) Native端做出相應(yīng)處理
### 3. 方法調(diào)用類
三方均將方法注入到瀏覽器中的window.native 或者 window.KaiJsBridge中
然后調(diào)用公共接口的方法，具體可以看 五 六
##五、Web 調(diào)用 Native
1. Native將封裝好的方法 注入到 window.KaiJsBridge 中
2. Web可以獲取到window.KaiJsBridge下的方法 傳遞相關(guān)參數(shù)
3. Native攔截到方法 做出相應(yīng)處理
示例：
以之前活動報(bào)名的分享為例
> Native將封裝好的share方法注入到 window.native下
> Js這時(shí)候可以在window對象中獲取到 share方法
> window.native.share(id, desc, title, pic) 將參數(shù)調(diào)用方法傳遞過去
> Native收到相應(yīng)方法以及參數(shù) 做相應(yīng)處理
> 以上完成了 Web->Native的 單項(xiàng)通信
支付示例（偽代碼）
1. 約定 pay() 為調(diào)起參數(shù)的方法名 參數(shù)為 itemid, price
2. Native 寫好相應(yīng)方法 注入到window.native下
3. js調(diào)起 window.native.pay(itemid, price)
4. Native 處理相關(guān)內(nèi)容
5. 支付完成后 Native回調(diào) Js的相關(guān)內(nèi)容 參見 六 中的示例
##六、Native 調(diào)用 Web
原理和 五 一樣 Web將方法注入到window.native 或者 window.KaiJsBridge中
Native直接調(diào)用Js的相關(guān)方法，并傳遞相關(guān)參數(shù)，執(zhí)行js的相關(guān)內(nèi)容。
示例：
1. js約定 payCallback(itemid, res) 為支付完成后 Native調(diào)去Js的方法
2. payCallback(item, res)
{
if (!res) return false;
window.localhost.
}
3. Native支付完成后 調(diào)去 js中的? window.native.payCallBack 并傳遞相關(guān)參數(shù)
4. 示例中如果支付成功 則跳轉(zhuǎn)到 www.kaistart.com
5. 至此完成了 Native調(diào)用Web的相關(guān)方法
##七、 說明
本文檔僅做現(xiàn)階段開發(fā)參考，日后會根據(jù)需求三方協(xié)商并修訂文檔。
##八、另見 接口文檔
