目录
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"
}
}
}