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

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

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

[TOC]

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

forward 跳轉(zhuǎn)(頁面跳轉(zhuǎn)h5或原生)

字段名 說明 值 是否必填 備注
type 跳轉(zhuǎn)類型:原生或者h(yuǎn)5 Native/H5 Y
animate 跳轉(zhuǎn)形式 push/pop/present N 跳轉(zhuǎn)/回退/無層級關(guān)系(底部彈出),
默認(rèn)為push
toPage type為H5時為頁面路徑列表
(animate為pop時可為空字符串，
默認(rèn)返回上一級),
為Native時則是與原生約定好的字段		 Y animate為push時不可為空
refreshUrl 向后跳轉(zhuǎn)時需刷新url N animate為pop時候toPage若為空字符串則直接返回；
若toPage非空跳轉(zhuǎn)到指定界面，
refreshUrl非空且為*時以原url刷新頁面，
若為url時加載當(dāng)前url(重定向)
hasNavigation 新頁面是否展示導(dǎo)航欄 true/false N 默認(rèn)為true
float 導(dǎo)航欄是否懸浮展示 true/false N 默認(rèn)為false
params 原生跳轉(zhuǎn)時的傳參,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" // 設(shè)備類型：BloodPressureMeter（血壓儀）、WeighingScale（體重秤）、Glucometer（血糖儀）、Thermometer（體溫計）
  }
}

setHeader 設(shè)置導(dǎo)航

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

barActionView對象 左右操作欄

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

barTitleView

字段名 說明 值 是否必填 備注
type view類型 title/search/multiTitle Y
title 標(biāo)題列表 例：個人中心 N type為title時配置此參數(shù)
placeholder 搜索框占位文字 例：請輸入您要搜索的醫(yī)院 N type為search時配置此參數(shù)
searchText 搜索框預(yù)置文字 例：中心醫(yī)院 N type為search時配置此參數(shù)
voice 是否支持語音輸入 true/false N type為search時配置此參數(shù)，默認(rèn)false，顯示的是清除按鈕
callBackMethod 點擊標(biāo)題后的回調(diào)方法 didClickSearchBtn N 和searchMethods，此方法存在即非原生搜索
searchMethods 內(nèi)含搜索相關(guān)事件回調(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 原生權(quán)限

字段名 說明 值 是否必填 備注
type 獲取原生權(quán)限的類型 例：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)用原生身份認(rèn)證（掃臉、指紋、手勢）
  "params": {
      "type": "" ,    //finger/face/gesture
      "toggle":"",   //true/false 開啟關(guān)閉
      "action":""    //toggle/gestureReset/login/switchStatus   切換開關(guān)/重置手勢/登錄/開關(guān)狀態(tài)
    },
  "callBackMethod": "authResult"   //key：result   ：true/false 認(rèn)證成功或失敗
}

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

{
  "type": "rotate",  // 旋轉(zhuǎn)
  "params": {
      "direction": "" //橫屏、豎屏 ： landscape、portrait
    }
}

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

{
  "type": "download",  //文件導(dǎo)出
  "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è)務(wù)后續(xù)再定
    }
  "callBackMethod": "syncNewMessage" //取時有回調(diào)
}

{
  "type": "nativeStorage", //原生存儲
  "params": {
    "method": "get",//get:取 set:存 delete:刪 init:配置手機(jī)本地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，直接返回掃描結(jié)果
  }
"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下標(biāo)，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"
    }//支付對應(yīng)的相關(guān)參數(shù)，示例為銀聯(lián)支付
  }
  "callBackMethod": "finishPay" 
}

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

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

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

{
  "type": "bluetoothDevice", // 藍(lán)牙設(shè)備
  "params": {
    "deviceType": "BloodPressureMeter" // 設(shè)備類型：BloodPressureMeter（血壓儀）、WeighingScale（體重秤）、Glucometer（血糖儀）、Thermometer（體溫計）
  },
  "callBackMethod": "MeasureResult" // 測量結(jié)果
}

lifeCycle 生命周期方法

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

手機(jī)端設(shè)計規(guī)范

本地存儲

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

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

推送消息

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

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

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

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

全局接口 config

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

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

字段名 說明 值 是否必須 備注
type 原生或H5頁面 Native/H5
tabName tab的名稱 首頁 Y
tabPage tab的Url www.baidu.com/new N type為Native時，以*開頭的字段作為原生頁面的標(biāo)識。
selectedUrl 選中的圖標(biāo)url www.123.jpg Y
unselectedUrl 未選中的圖標(biāo)url www.456.jpg Y
selectedTextColor 選中文字的顏色 #51da8a N 配置默認(rèn)顏色
unselectedTextColor 未選中文字的顏色 #636363 N 配置默認(rèn)顏色
hasNavigation 是否顯示導(dǎo)航欄 true/false Y
isDialog 頁面是否以dialog展示 true/false N 默認(rè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)行頁面和跳轉(zhuǎn)的控制，所以針對返回進(jìn)行了處理，設(shè)計兩個返回按鈕，返回和關(guān)閉，返回默認(rèn)是根據(jù)回退棧一級一級返回，關(guān)閉是直接退出當(dāng)前頁面。

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

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。