移動綜管2.0交互規(guī)范

移動綜管2.0交互規(guī)范

date: 2020-02-18 16:27:52
tags:

[TOC]

Js和原生交互規(guī)范

forward 跳轉(頁面跳轉h5或原生)

字段名 說明 值 是否必填 備注
type 跳轉類型:原生或者h5 Native/H5 Y
animate 跳轉形式 push/pop/present N 跳轉/回退/無層級關系(底部彈出),
默認為push
toPage type為H5時為頁面路徑列表
(animate為pop時可為空字符串鸯匹，
默認返回上一級),
為Native時則是與原生約定好的字段		 Y animate為push時不可為空
refreshUrl 向后跳轉時需刷新url N animate為pop時候toPage若為空字符串則直接返回；
若toPage非空跳轉到指定界面火惊，
refreshUrl非空且為*時以原url刷新頁面，
若為url時加載當前url(重定向)
hasNavigation 新頁面是否展示導航欄 true/false N 默認為true
float 導航欄是否懸浮展示 true/false N 默認為false
params 原生跳轉時的傳參,H5外鏈時傳參 例：{} N 
{
  "type": "H5", 
  "toPage": ["www.baidu.com"],
  "hasNavigation": "true",
  "float":"true"
}

{
  "type": "H5", 
  "toPage": ["www.baidu.com"],
  "hasNavigation": "true"
   "params": {
    "from": "yjt",//來自哪個平臺
    "title": "醫(yī)健通"http://模塊名稱或平臺名稱
  }
}

{
  "type": "H5", 
  "toPage": ["www.baidu.com"],
  "animate": "pop",
  "refreshUrl": "www.baidu.com/home",
  "hasNavigation": "true"
}

{
  "type": "Native", 
  "toPage": ["mapPage"],
  "hasNavigation": "true",
  "animate": "push"
  "params": {
    "longitude": "32.324324234234",
    "latitude": "32.234324234234"
  }
}

{
  "type": "Native", 
  "toPage": ["BindBluetoothDevice"],
  "hasNavigation": "true",
  "animate": "push"
  "params": {
    "deviceType": "BloodPressureMeter" // 設備類型：BloodPressureMeter（血壓儀）、WeighingScale（體重秤）、Glucometer（血糖儀）、Thermometer（體溫計）
  }
}

setHeader 設置導航

字段名 說明 值 是否必填 備注
type 操作類型 init/update N init：初始化titlebar撑蚌，清空原h(huán)eader；update時更新titlebar搏屑。默認為update
left 左邊barActionView對象 N
right 右邊barActionView對象 N
titleView 中間barTitleView對象 N

barActionView對象 左右操作欄

字段名 說明 值 是否必填 備注
type view類型 back/image/title /collection N left為空時默認為back展示
title 按鈕名稱 例：完成 N 只顯示文字時包含此參數(shù)
backUrl 返回鍵時返回的頁面url N type為back時配置此參數(shù)
imgName 按鈕圖片名稱 例：search N 只顯示圖片時包含此參數(shù)
imgUrl 按鈕圖片地址 www.123.jpg N 圖片從網(wǎng)絡獲取時包含此參數(shù)
collectionView 圖標和文字類型的組合控件,collectionView對象 {} N
mark 按鈕圖片角標 例：1 N
callBackMethod 點擊按鈕的回調(diào)方法 N
collectionView 組合功能view
字段名 說明 值 是否必填 備注
title 按鈕名稱 N
imgUrl 圖標地址 N
imgPosition 圖標在名稱的相對位置 left/top/right/bottom N 默認圖標在名稱的左側

barTitleView

字段名 說明 值 是否必填 備注
type view類型 title/search/multiTitle Y
title 標題列表 例：個人中心 N type為title時配置此參數(shù)
placeholder 搜索框占位文字 例：請輸入您要搜索的醫(yī)院 N type為search時配置此參數(shù)
searchText 搜索框預置文字 例：中心醫(yī)院 N type為search時配置此參數(shù)
voice 是否支持語音輸入 true/false N type為search時配置此參數(shù)争涌，默認false，顯示的是清除按鈕
callBackMethod 點擊標題后的回調(diào)方法 didClickSearchBtn N 和searchMethods辣恋，此方法存在即非原生搜索
searchMethods 內(nèi)含搜索相關事件回調(diào)方法名 editingdidbegin/
editingdidend/
editingchanged/
editingfinished		 N 方法分別為點擊搜索框獲取焦點/失去焦點時/文本數(shù)據(jù)發(fā)生改變/搜索時的回調(diào)方法亮垫。 
{
    "type": "init",
    "left": [{
        "type": "back",
        "backUrl":"www.baidu.com/home"
    }, {
        "type": "image",
        "imgName":"message",
        "imgUrl":"www.123.jpg",
        "mark":"2"
    },{
        "type": "title",
        "title":"返回",
        "callBackMethod":"didClickFinishBtn"
    },{
        "type": "collection",
        "collection":{
            "title": "位置",
            "imgUrl":"www.123.jpg",
            "imgPosition":"left"
    }
    }],
    "right": [{
        "type": "image",
        "imgName":"share",
        "imgUrl":"www.123.jpg"
    }, {
        "type": "image",
        "imgUrl":"www.123.jpg",
        "callBackMethod":"attent"
    }],
    "titleView": {
        "type": "search",
        "placeHolder": "請輸入您要搜索的醫(yī)院",
        "voice":"true",
        "searchMethods": {
            "editingdidbegin" : "didbegin",
            "editingdidend" : "didend",
            "editingchanged" : "changed",
            "editingfinished" : "finished"
        }
    }
}


{
    "type": "init",
    "left": [{
        "type": "back",
        "backUrl":"www.baidu.com/home"
    }, {
        "type": "image",
        "imgName":"message",
        "imgUrl":"www.123.jpg",
        "mark":"2"
    },{
        "type": "title",
        "title":"返回",
        "callBackMethod":"didClickFinishBtn"
    },{
        "type": "collection",
        "collection":{
            "title": "位置",
            "imgUrl":"www.123.jpg",
            "imgPosition":"left"
    }
    }],
    "right": [{
        "type": "image",
        "imgName":"share",
        "imgUrl":"www.123.jpg"
    }, {
        "type": "image",
        "imgUrl":"www.123.jpg",
        "callBackMethod":"attent"
    }],
    "titleView": {
        "type": "title",
        "title": ["首頁","監(jiān)控"]
    }
}

nativePermission 原生權限

字段名 說明 值 是否必填 備注
type 獲取原生權限的類型 例：nativeStorage/location/qrCodeScan/camera/photoLibrary /video/contacts/phone/track/getUnReadMsgCount/setTabBadge /pay/deqingEnPuPay/liveness/nativePay/dongyingKeyboard /MeasureResult/version/newMessage/share/voice/clearCache /cacheSize/searchContent/download/login/rotate/authentication /authType/gestureAuth/tabConfig Y
params 請求參數(shù) {} N
callBackMethod 執(zhí)行的回調(diào)方法 N 
{
  "type": "tabConfig",  // 底部tab配置
  "params": {
    "selectedTextColor": "#51da8a",
    "unselectedTextColor": "#636363"
    "tabList": [
        {
          "tabName": "首頁", 
          "selectedUrl": "www.123.jpg",
          "unselectedUrl": "www.456.jpg",
          "tabPage": "www.baidu.com/new",
          "hasNavigation": "true",
          "isDialog": "false"
        },
        {
          "tabName": "健康", 
          "selectedUrl": "www.123.jpg",
          "unselectedUrl": "www.456.jpg",
          "tabPage": "/html/gzd/measurement.html",
          "hasNavigation": "false",
          "isDialog": "false"
        },
        {
          "tabName": "個人", 
          "selectedUrl": "www.123.jpg",
          "unselectedUrl": "www.456.jpg",
          "tabPage": "*Mine",
          "hasNavigation": "true",
          "isDialog": "false"
        }
      ]
    }
}

{
  "type": "authentication",  // 調(diào)用原生身份認證（掃臉、指紋伟骨、手勢）
  "params": {
      "type": "" ,    //finger/face/gesture
      "toggle":"",   //true/false 開啟關閉
      "action":""    //toggle/gestureReset/login/switchStatus   切換開關/重置手勢/登錄/開關狀態(tài)
    },
  "callBackMethod": "authResult"   //key：result   ：true/false 認證成功或失敗
}

{
"type":"authType", //獲取原生支持的認證方式
"callBackMethod": "authResult"  // key:type ,open ,gestureOpen ：finger/face/gesture  指紋/人臉/手勢饮潦；open 是否開啟;手勢是否打開
//key1:type          value: finger/face   // 支持哪種生物認證
//key2:open          value: "true/false"  // 生物認證的狀態(tài)(開啟或關閉)
//key3:gestureOpen   value: "true/false"  // 手勢開啟或關閉
}

{
  "type": "rotate",  // 旋轉
  "params": {
      "direction": "" //橫屏、豎屏 ： landscape携狭、portrait
    }
}

{
  "type": "login",  // 登錄
  "params": {
      "result": "" //true继蜡、false   通知原生登錄結果
    },
  "callBackMethod": "login"   //key：username、password
}

{
  "type": "download",  //文件導出
  "params": {
      "downloadUrl": ""
    }
}

{
  "type": "searchContent",  //搜索內(nèi)容配置
  "params": {
      "content": ""
    }
}

{
  "type": "cacheSize", //獲得本地緩存大小
  "callBackMethod": "getCacheSize" //key:cacheSize
}

{
  "type": "clearCache", 
  "callBackMethod": "clearSuccess"  
}

{
  "type": "voice", 
  "callBackMethod": "searchContent"  //key:word
}

{
  "type": "version", 
  "callBackMethod": "getVersion"   //key:currentVersion暑中、lastVersion
}

{
  "type": "share", //分享
  "params": {
      "title": "分享的title", 
      "content": "http://www.baidu.com"
    }
}

{
  "type": "newMessage", //消息推送
  "params": {
      "msgType": "alert", //消息類型根據(jù)業(yè)務后續(xù)再定
    }
  "callBackMethod": "syncNewMessage" //取時有回調(diào)
}

{
  "type": "nativeStorage", //原生存儲
  "params": {
    "method": "get",//get:取 set:存 delete:刪 init:配置手機本地key值
      "key":@"",
      "value":@""
  }
  "callBackMethod": "getValue" //取時有回調(diào)
}

{
  "type": "location", 
  "params": {
        "coordinate":1  // 1:高德壹瘟、2、百度鳄逾、3稻轨、騰訊
 }
  "callBackMethod": "finishLocation"
}
{
  "type": "photoLibrary", 
  "params": {
    "maxCount": "5",
    "maxBytes": "524288",
    "quality": "1"
  }
  "callBackMethod": "finishSelectPhoto" 
}

{
  "type": "video", 
  "params": {
    "maxDuration": "5",
    "minDuration": "2",//單位秒
  }
  "callBackMethod": "finishShoot"   
}

{
  "type": "qrCodeScan", 
  "params": {
        "needResult":"0"  // 值0/1 ; o:原生自己處理，1雕凹，直接返回掃描結果
  }
"callBackMethod": "getqrCodeScan"
}
{
  "type": "phone", 
  "params": {
    "mode": "call", //call 打電話 //send 發(fā)信息
    "phoneNumber": "13312341234",
    "content": "你好"http://發(fā)短信時的內(nèi)容
  }
}
{
  "type": "track", 
  "name": "news",
  "content": "110101"
}
{
  "type": "getUnReadMsgCount", 
  "callBackMethod": "unReadMsgCount"
}
{
  "type": "setTabBadge", 
  "params": {
    "0": "99",//key為tab下標殴俱，value為顯示的badge
    "1": "9" ,
    "2": "7" 
  }
}
{
  "type": "pay", 
  "params": {
    "appid": "",
    "appSecret": "",
    "channelType": "",
    "submerno": "",
    "goods_desc": "",
    "billTotalFee": "",
    "billNum": "",
    "order_desc": ""
  }
}

{
  "type": "liveness", 
  "callBackMethod": "finishLiveness" //回調(diào)方法參數(shù)為{faceImage:base64}
}

{
  "type": "nativePay", //直接與原生支付交互(東營)
  "params": {
    "payment": "uppay",//支付途徑：銀聯(lián)（uppay）、支付寶(alipay)枚抵、微信(wxpay)
    "parameters":{
        "tn": "tn6465435453465"
    }//支付對應的相關參數(shù)线欲，示例為銀聯(lián)支付
  }
  "callBackMethod": "finishPay" 
}

{
  "type": "nativePay", //直接與原生支付交互(東營)
  "params": {
    "payment": "uppay",//支付途徑：銀聯(lián)（uppay）、支付寶(alipay)汽摹、微信(wxpay)
    "parameters":{
        "tn": "tn6465435453465"
    }//支付對應的相關參數(shù)李丰，示例為銀聯(lián)支付
  }
  "callBackMethod": "finishPay" 
}

{
  "type": "dongyingUMSPosPay", //東營銀商綜合支付
  "params": {
    "payment": "uppay",//支付途徑：銀聯(lián)（uppay）、支付寶(alipay)逼泣、微信(wxpay)
    "parameters":{
    }//支付對應的相關參數(shù)
  }
  "callBackMethod": "finishPay" //返回code,message.code:0.成功 1.失敗 2.取消
}

{
  "type": "dongyingKeyboard", //東營銀行密碼鍵盤
  "params": {
    "inputKey": "",//調(diào)用callBack時作為key回傳用于區(qū)分輸入項
    "username": ""
  }
  "callBackMethod": "finishEdit" //調(diào)用鍵盤失敗時回調(diào)會有errorCode及errorMsg
}

{
  "type": "yunnanICBCPay", //云南工行綜合支付
  "params": {
    "payment": "icbcpay",//支付途徑：工行（icbcpay）趴泌、支付寶(alipay)、微信(wxpay)
    "parameters":{
    }//支付對應的相關參數(shù)
  }
  "callBackMethod": "finishPay" //返回code,message.code:0.成功 1.失敗 2.取消
}

{
  "type": "toIpsmap", //南通醫(yī)院室內(nèi)導航
  "params": {
    "mapId": "PG2ZGYDFd5",//醫(yī)院mapId
    "targetName": "",//醫(yī)院名稱（預留字段拉庶，導航時必填）
    "targetId": ""http://醫(yī)院ID（預留字段嗜憔，導航時必填）
  }
}

{
  "type": "bluetoothDevice", // 藍牙設備
  "params": {
    "deviceType": "BloodPressureMeter" // 設備類型：BloodPressureMeter（血壓儀）、WeighingScale（體重秤）氏仗、Glucometer（血糖儀）吉捶、Thermometer（體溫計）
  },
  "callBackMethod": "MeasureResult" // 測量結果
}

lifeCycle 生命周期方法

字段名 說明 值 是否必填 備注
type 生命周期階段類型 例：lifeCycle Y 頁面即將可見/不可見/銷毀
callBackMethod 各生命周期的回調(diào)方法 例：onVisible /onInvisible/onDestory Y H5對頁面生命周期的回調(diào) 
{
  "type": "onVisible", 
  "callBackMethod": "onVisible"
}

手機端設計規(guī)范

本地存儲

本地存儲使用SharedPreferences，存儲獲取時對數(shù)據(jù)加解密處理

字段名 說明 值
session 登錄憑證
username 用戶名
password 密碼
isAutoLogin 是否自動登錄
isSavePass 是否保存密碼
serverUrl 服務端地址
tab 底部tab相關屬性 {}

推送消息

h5頁面若有需要與推送消息關聯(lián)的內(nèi)容時，通過nativePermission 傳值type=newMessage并設置回調(diào)方法呐舔，并注冊到通知類中币励，當有新消息推送過來，調(diào)用注冊列表中的回調(diào)方法進行數(shù)據(jù)同步

message對象 后臺推送消息內(nèi)容

字段名 說明 值 是否必填 備注
title 標題 Y
text 消息內(nèi)容 Y
msgType 消息類型 openH5Page Y
url h5頁面地址 N 
extra:

{
  "msgType": "openH5Page", 
  "url": "https://www.baidu.com"
}

全局接口 config

在啟動頁通過全局接口獲得tab各屬性值及登錄接口path滋早，若無網(wǎng)絡APP端固定幾個產(chǎn)品模塊默認展示榄审。

全局接口的作用是tab各值在啟動頁的時候進行初始化，進入首頁可以快速展示杆麸，同時可以兼容非必須登錄的邏輯搁进。

字段名 說明 值 是否必須 備注
type 原生或H5頁面 Native/H5
tabName tab的名稱 首頁 Y
tabPage tab的Url www.baidu.com/new N type為Native時，以*開頭的字段作為原生頁面的標識昔头。
selectedUrl 選中的圖標url www.123.jpg Y
unselectedUrl 未選中的圖標url www.456.jpg Y
selectedTextColor 選中文字的顏色 #51da8a N 配置默認顏色
unselectedTextColor 未選中文字的顏色 #636363 N 配置默認顏色
hasNavigation 是否顯示導航欄 true/false Y
isDialog 頁面是否以dialog展示 true/false N 默認是頁面 
{
    "selectedTextColor": "#51da8a",
    "unselectedTextColor": "#636363"
    "tabList": [
        {
          "tabName": "首頁", 
          "selectedUrl": "www.123.jpg",
          "unselectedUrl": "www.456.jpg",
          "tabPage": "www.baidu.com/new",
          "hasNavigation": "true",
          "isDialog": "false"
        },
        {
          "tabName": "健康", 
          "selectedUrl": "www.123.jpg",
          "unselectedUrl": "www.456.jpg",
          "tabPage": "/html/gzd/measurement.html",
          "hasNavigation": "false",
          "isDialog": "false"
        },
        {
          "tabName": "個人", 
          "selectedUrl": "www.123.jpg",
          "unselectedUrl": "www.456.jpg",
          "tabPage": "*Mine",
          "hasNavigation": "true",
          "isDialog": "false"
        }
    ]
}

對第三方鏈接的處理

由于第三方鏈接不能像自己的web端頁面一樣進行頁面和跳轉的控制饼问，所以針對返回進行了處理，設計兩個返回按鈕揭斧，返回和關閉莱革，返回默認是根據(jù)回退棧一級一級返回，關閉是直接退出當前頁面讹开。

對三方鏈接的判斷時增加域名判斷盅视。

最后編輯于 ：
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市旦万，隨后出現(xiàn)的幾起案子闹击，更是在濱河造成了極大的恐慌，老刑警劉巖成艘，帶你破解...
    沈念sama閱讀 222,252評論 6贊 516
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件赏半，死亡現(xiàn)場離奇詭異，居然都是意外死亡淆两，警方通過查閱死者的電腦和手機断箫，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,886評論 3贊 399
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來秋冰，“玉大人仲义，你說我怎么就攤上這事〗９矗” “怎么了光坝？”我有些...
    開封第一講書人閱讀 168,814評論 0贊 361
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長甥材。 經(jīng)常有香客問我，道長性含，這世上最難降的妖魔是什么洲赵？ 我笑而不...
    開封第一講書人閱讀 59,869評論 1贊 299
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上叠萍，老公的妹妹穿的比我還像新娘芝发。我一直安慰自己，他們只是感情好苛谷，可當我...
    茶點故事閱讀 68,888評論 6贊 398
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布辅鲸。 她就那樣靜靜地躺著，像睡著了一般腹殿。 火紅的嫁衣襯著肌膚如雪独悴。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 52,475評論 1贊 312
  • 城市分裂傳說
    那天锣尉，我揣著相機與錄音刻炒，去河邊找鬼。 笑死自沧，一個胖子當著我的面吹牛坟奥，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播拇厢，決...
    沈念sama閱讀 41,010評論 3贊 422
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼爱谁，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了孝偎？” 一聲冷哼從身側響起访敌，我...
    開封第一講書人閱讀 39,924評論 0贊 277
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎邪媳，沒想到半個月后捐顷，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 46,469評論 1贊 319
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡雨效，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,552評論 3贊 342
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年迅涮，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片徽龟。...
    茶點故事閱讀 40,680評論 1贊 353
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡叮姑，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出据悔，到底是詐尸還是另有隱情传透，我是刑警寧澤，帶...
    沈念sama閱讀 36,362評論 5贊 351
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布极颓，位于F島的核電站朱盐，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏菠隆。R本人自食惡果不足惜兵琳，卻給世界環(huán)境...
    茶點故事閱讀 42,037評論 3贊 335
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一狂秘、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧躯肌，春花似錦者春、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,519評論 0贊 25
  • 一樁弒父案钱烟，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至嫡丙，卻和暖如春拴袭，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背迄沫。 一陣腳步聲響...
    開封第一講書人閱讀 33,621評論 1贊 274
  • 情欲美人皮
    我被黑心中介騙來泰國打工稻扬， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人羊瘩。 一個月前我還...
    沈念sama閱讀 49,099評論 3贊 378
  • 代替公主和親
    正文 我出身青樓泰佳，卻偏偏與公主長得像，于是被迫代替她去往敵國和親尘吗。 傳聞我的和親對象是個殘疾皇子逝她，可洞房花燭夜當晚...
    茶點故事閱讀 45,691評論 2贊 361