目錄
1 概述
1.1 引入的js文件
2 原生基礎接口
2.1 直接調用原生方法
2.1.1 調用原生身份認證
2.1.2 獲取原生支持的認證方式
2.1.3 橫豎屏
2.1.4 登錄
2.1.5 文件導出
2.1.6 搜索內容配置
2.1.7 獲得本地緩存大小
2.1.8 清除本地緩存
2.1.9 語音
2.1.10 獲取版本號
2.1.11 消息推送
2.1.12 視頻
2.1.13 藍牙設備
2.2 注冊原生回調方法
2.3 生命周期
3 多端兼容接口
3.1 分享
3.2 掃碼
3.3 獲取經緯度
3.4 獲取相冊圖片
3.5 調用相機
3.6 信息緩存
3.7 撥打電話
4 頁面跳轉
4.1 打開新頁面
4.2 返回指定頁
4.3 打開原生頁面
5 公用頭部
5.1 設置原生頭部
5.2 barActionView
5.3 collectionView
5.4 barTitleView
5.5 示例
概述
該平臺對原生、微信公眾號、政務釘釘的原生方法進行封裝，按照平臺的對接文檔開發，可直接調用各個平臺的相機、相冊、掃碼、語音、位置等原生方法，一次調用可兼容各個平臺。
引入的js文件
1、public/static/JSbridge.js 與原生交互的基礎引用文件
2、
① assets/js/utils.js 調用原生方法的封裝
② assets/js/public.js 判斷設備類型、獲取日期等公用方法封裝
2 原生基礎接口
2.1 直接調用原生方法
this.$JSbridge.nativePermission({
type: 'typeName ', // 原生方法名稱。Y
params: {}, //參數，N
callBackMethod:'funName', // 回調方法名稱 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
2.1.1 調用原生身份認證
this.$JSbridge.nativePermission({
'type': 'authentication', //注冊方法名 Y
"params": {
"type": "" , //finger/face/gesture
"toggle":"", //true/false 開啟關閉
"action":"" //toggle/gestureReset/login/switchStatus 切換開關/重
置手勢/登錄/開關狀態
},
"callBackMethod": "authResult"
})
2.1.2 獲取原生支持的認證方式
this.$JSbridge.nativePermission({
'type': 'authType',
"callBackMethod": "authResult"
//key1:type value: finger/face // 支持哪種生物認證
//key2:open value: "true/false" // 生物認證的狀態(開啟或關閉)
//key3:gestureOpen value: "true/false" // 手勢開啟或關閉
})
2.1.3 橫豎屏
this.$JSbridge.nativePermission({
'type': 'rotate',
"params": {
"direction": "" //橫屏、豎屏 ： landscape、portrait
}
})
2.1.4 登錄
this.$JSbridge.nativePermission({
"type": "login", // 登錄
"params": {
"result": "" //true、false 通知原生登錄結果
},
"callBackMethod": "login" //key：username、password
})
2.1.5 文件導出
this.$JSbridge.nativePermission({
"type": "download", //文件導出
"params": {
"downloadUrl": ""
}
})
2.1.6 搜索內容配置
this.$JSbridge.nativePermission({
"type": "searchContent", //搜索內容配置
"params": {
"content": ""
}
})
2.1.7 獲得本地緩存大小
this.$JSbridge.nativePermission({
"type": "cacheSize", //獲得本地緩存大小
"callBackMethod": "getCacheSize" //key:cacheSize
})
2.1.8 清除本地緩存
this.$JSbridge.nativePermission({
"type": "clearCache",
"callBackMethod": "clearSuccess"
})
2.1.9 語音
this.$JSbridge.nativePermission({
"type": "voice",
"callBackMethod": "searchContent" //key:word
})
2.1.10 版本號
this.$JSbridge.nativePermission({
"type": "version",
"callBackMethod": "getVersion" //key:currentVersion、lastVersion
})
2.1.11 消息推送
this.$JSbridge.nativePermission({
"type": "newMessage", //消息推送
"params": {
"msgType": "alert", //消息類型根據業務后續再定
}
"callBackMethod": "syncNewMessage" //取時有回調
})
2.1.12 視頻
this.$JSbridge.nativePermission({
"type": "video",
"params": {
"maxDuration": "5",
"minDuration": "2",//單位秒
}
"callBackMethod": "finishShoot"
})
2.1.13 藍牙設備
this.$JSbridge.nativePermission({
"type": "bluetoothDevice", // 藍牙設備
"params": {
"deviceType": "BloodPressureMeter" // 設備類型：BloodPressureMeter（血壓儀）、WeighingScale（體重秤）、Glucometer（血糖儀）、Thermometer（體溫計）
},
"callBackMethod": "MeasureResult" // 測量結果
})
2.2 注冊原生回調方法
this.$JSbridge.jsbridgeRegister(
'funName', //注冊方法名，必傳；
function (res) {}, // 注冊方法回調，必傳；
params, //參數，非必傳；
)
2.3 生命周期
this.$JSbridge.lifeCycle(
function (res) {
//頁面即將可見回調
}，
function (res) {
//頁面即將不可見回調
}，
function (res) {
// 頁面銷毀回調
}，
)
3 多端兼容接口
3.1 分享
this.$JSbridge.share({
params: {
title: '分享的title',
desc: '分享描述',
link: 'http://www.baidu.com', // 分享鏈接，
imgUrl: '', // 分享圖標
type: 0 //分享類型，0:全部組件 默認；1:只能分享到釘釘；2:不能分享，只有刷新按鈕
},
callBackName: 'shareback', //回調方法名
callBackMethod: this.shareback //回調方法
})
3.2 掃碼
this.$JSbridge.qrCodeScan({
params: {
needResult: '1' //微信 默認為0，掃描結果由微信/原生直接處理，1則直接返回掃描結果，
},
callBackName: 'getqrCodeScan', //回調方法名
callBackMethod: this.getqrCodeScan //回調方法
})
3.3 獲取經緯度
this.$JSbridge.getLocation({
params: {
coordinate: 1 //0：獲取標準坐標（微信）； 1：獲取高德坐標；2百度； 3.騰訊
},
callBackName: 'backLocation',
callBackMethod: this.backLocation
})
3.4 獲取相冊圖片
this.$JSbridge.chooseImage({
params: {
maxCount: '1', //最多選取張數
maxBytes: '524288', //單張最大byte
quality: '1' ，//質量
},
callBackName: 'backPic',
callBackMethod: this.backPic
})
3.5 調用相機
this.$JSbridge.camera({
params: {
count:"1" , //最大張數
},
callBackName: 'backCamera',
callBackMethod: this.backCamera
})
3.6 信息緩存
this.$JSbridge.nativeStorage({
params: {
method: 'get', //get:取 set:存 delete:刪
key: 'nativeStorage'
},
callBackName: 'getnativeStorage',
callBackMethod: this.getnativeStorage
})
3.7 撥打電話
this.$JSbridge.phoneCall({
params: {
phoneNumber: '13415567432' //號碼
}
})
4 頁面跳轉
4.1 打開新頁面
this.$JSbridge.toPage(
'/router', //頁面路由或訪問網址 Y
{a:1}, //頁面傳參 N
{b:2}, //原生所需參數 N
'refreshUrl', // 向后跳轉時需刷新url N
'hasNavigation', //原生新頁面是否展示導航欄 ,默認為'true' N
)
4.2 返回指定頁
this.$JSbridge.toBack(
'/router', //返回指定頁 ，不傳默認返回上一頁 N
{a:1}, //頁面傳參 N
{b:2}, //原生所需參數 N
'refreshUrl', // 需要刷新的頁面地址 N
'hasNavigation', //原生頁面是否展示導航欄 ,默認為'true' N
)
4.3 打開原生頁面
this.$JSbridge.toNative(
'mapPage' , //原生頁面名稱 Y
{b:2}, //原生所需參數 N
'refreshUrl', // 需要刷新的頁面地址 N
'animate', // 原生頁面跳轉形式 push/pop/present 跳轉/回退/無層級關系(底部彈出)，默認為push 如：‘push’ N
'hasNavigation', //原生頁面是否展示導航欄 ,默認為'true' N
left:
)
5 公用頭部
5.1 設置原生頭部
this.$JSbridge.setHeader(
type:'init/update', // init：初始化titlebar，清空原header；update
//時更新titlebar。默認為update N
left :[], //左邊barActionView對象 N
right:[], //右邊barActionView對象 N
titleView:[], //中間barTitleView對象 N
)
5.2 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 |
5.3 collectionView 組合功能view
| 字段名 | 說明 | 值 | 是否必填 | 備注 |
|---|---|---|---|---|
| title | 按鈕名稱 | N | ||
| imgUrl | 圖標地址 | N | ||
| imgPosition | 圖標在名稱的相對位置 | left/top/right/bottom | N | 默認圖標在名稱的左側 |
5.4 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 | 內含搜索相關事件回調方法名 | editingStatus |
N | 方法分別為點擊搜索框獲取焦點/失去焦點時/文本數據發生改變/搜索時的回調方法。 |
editingStatus:editingdidbegin/editingdidend/editingchanged/editingfinished
5.5 示例：
{
"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"
}
}
}
