移动综管2.0交互规范

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

[TOC]

Js和原生交互规范

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": "医健通"//模块名称或平台名称
  }
}

{
  "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，清空原header；update时更新titlebar。默认为update
left	左边barActionView对象		N
right	右边barActionView对象		N
titleView	中间barTitleView对象		N

barActionView对象左右操作栏

字段名	说明	值	是否必填	备注
type	view类型	back/image/title /collection	N	left为空时默认为back展示
title	按钮名称	例：完成	N	只显示文字时包含此参数
backUrl	返回键时返回的页面url		N	type为back时配置此参数
imgName	按钮图片名称	例：search	N	只显示图片时包含此参数
imgUrl	按钮图片地址	www.123.jpg	N	图片从网络获取时包含此参数
collectionView	图标和文字类型的组合控件,collectionView对象	{}	N
mark	按钮图片角标	例：1	N
callBackMethod	点击按钮的回调方法		N

collectionView 组合功能view

字段名	说明	值	是否必填	备注
title	按钮名称		N
imgUrl	图标地址		N
imgPosition	图标在名称的相对位置	left/top/right/bottom	N	默认图标在名称的左侧

barTitleView

字段名	说明	值	是否必填	备注
type	view类型	title/search/multiTitle	Y
title	标题列表	例：个人中心	N	type为title时配置此参数
placeholder	搜索框占位文字	例：请输入您要搜索的医院	N	type为search时配置此参数
searchText	搜索框预置文字	例：中心医院	N	type为search时配置此参数
voice	是否支持语音输入	true/false	N	type为search时配置此参数，默认false，显示的是清除按钮
callBackMethod	点击标题后的回调方法	didClickSearchBtn	N	和searchMethods，此方法存在即非原生搜索
searchMethods	内含搜索相关事件回调方法名	editingdidbegin/ editingdidend/ editingchanged/ editingfinished	N	方法分别为点击搜索框获取焦点/失去焦点时/文本数据发生改变/搜索时的回调方法。

{
    "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": "请输入您要搜索的医院",
        "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": ["首页","监控"]
    }
}

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	请求参数	{}	N
callBackMethod	执行的回调方法		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",  // 调用原生身份认证（扫脸、指纹、手势）
  "params": {
      "type": "" ,    //finger/face/gesture
      "toggle":"",   //true/false 开启关闭
      "action":""    //toggle/gestureReset/login/switchStatus   切换开关/重置手势/登录/开关状态
    },
  "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"  // 生物认证的状态(开启或关闭)
//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",  //搜索内容配置
  "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", //消息类型根据业务后续再定
    }
  "callBackMethod": "syncNewMessage" //取时有回调
}

{
  "type": "nativeStorage", //原生存储
  "params": {
    "method": "get",//get:取 set:存 delete:删 init:配置手机本地key值
      "key":@"",
      "value":@""
  }
  "callBackMethod": "getValue" //取时有回调
}

{
  "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 发信息
    "phoneNumber": "13312341234",
    "content": "你好"//发短信时的内容
  }
}
{
  "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" //回调方法参数为{faceImage:base64}
}

{
  "type": "nativePay", //直接与原生支付交互(东营)
  "params": {
    "payment": "uppay",//支付途径：银联（uppay）、支付宝(alipay)、微信(wxpay)
    "parameters":{
        "tn": "tn6465435453465"
    }//支付对应的相关参数，示例为银联支付
  }
  "callBackMethod": "finishPay" 
}

{
  "type": "nativePay", //直接与原生支付交互(东营)
  "params": {
    "payment": "uppay",//支付途径：银联（uppay）、支付宝(alipay)、微信(wxpay)
    "parameters":{
        "tn": "tn6465435453465"
    }//支付对应的相关参数，示例为银联支付
  }
  "callBackMethod": "finishPay" 
}

{
  "type": "dongyingUMSPosPay", //东营银商综合支付
  "params": {
    "payment": "uppay",//支付途径：银联（uppay）、支付宝(alipay)、微信(wxpay)
    "parameters":{
    }//支付对应的相关参数
  }
  "callBackMethod": "finishPay" //返回code,message.code:0.成功 1.失败 2.取消
}

{
  "type": "dongyingKeyboard", //东营银行密码键盘
  "params": {
    "inputKey": "",//调用callBack时作为key回传用于区分输入项
    "username": ""
  }
  "callBackMethod": "finishEdit" //调用键盘失败时回调会有errorCode及errorMsg
}

{
  "type": "yunnanICBCPay", //云南工行综合支付
  "params": {
    "payment": "icbcpay",//支付途径：工行（icbcpay）、支付宝(alipay)、微信(wxpay)
    "parameters":{
    }//支付对应的相关参数
  }
  "callBackMethod": "finishPay" //返回code,message.code:0.成功 1.失败 2.取消
}

{
  "type": "toIpsmap", //南通医院室内导航
  "params": {
    "mapId": "PG2ZGYDFd5",//医院mapId
    "targetName": "",//医院名称（预留字段，导航时必填）
    "targetId": ""//医院ID（预留字段，导航时必填）
  }
}

{
  "type": "bluetoothDevice", // 蓝牙设备
  "params": {
    "deviceType": "BloodPressureMeter" // 设备类型：BloodPressureMeter（血压仪）、WeighingScale（体重秤）、Glucometer（血糖仪）、Thermometer（体温计）
  },
  "callBackMethod": "MeasureResult" // 测量结果
}

lifeCycle 生命周期方法

字段名	说明	值	是否必填	备注
type	生命周期阶段类型	例：lifeCycle	Y	页面即将可见/不可见/销毁
callBackMethod	各生命周期的回调方法	例：onVisible /onInvisible/onDestory	Y	H5对页面生命周期的回调

{
  "type": "onVisible", 
  "callBackMethod": "onVisible"
}

手机端设计规范

本地存储

本地存储使用SharedPreferences，存储获取时对数据加解密处理

字段名	说明	值
session	登录凭证
username	用户名
password	密码
isAutoLogin	是否自动登录
isSavePass	是否保存密码
serverUrl	服务端地址
tab	底部tab相关属性	{}

推送消息

h5页面若有需要与推送消息关联的内容时，通过nativePermission 传值type=newMessage并设置回调方法，并注册到通知类中，当有新消息推送过来，调用注册列表中的回调方法进行数据同步

message对象后台推送消息内容

字段名	说明	值	是否必填
title	标题		Y
text	消息内容		Y
msgType	消息类型	openH5Page	Y
url	h5页面地址		N

extra:

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

全局接口 config

在启动页通过全局接口获得tab各属性值及登录接口path，若无网络APP端固定几个产品模块默认展示。

全局接口的作用是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端页面一样进行页面和跳转的控制，所以针对返回进行了处理，设计两个返回按钮，返回和关闭，返回默认是根据回退栈一级一级返回，关闭是直接退出当前页面。

对三方链接的判断时增加域名判断。

移动综管2.0交互规范

移动综管2.0交互规范

Js和原生交互规范

forward 跳转(页面跳转h5或原生)

setHeader 设置导航

barActionView对象 左右操作栏

collectionView 组合功能view

barTitleView

nativePermission 原生权限

lifeCycle 生命周期方法

手机端设计规范

本地存储

推送消息

message对象 后台推送消息内容

全局接口 config

对第三方链接的处理

你可能感兴趣的:(移动综管2.0交互规范)

barActionView对象左右操作栏

message对象后台推送消息内容