承接众安 JSBridge 接口,用于统一多平台下调用原生 App 的 api 方法。
支持的平台有:
- 普通浏览器(仅支持 go,goBack,setTitle)
- 微信客户端(同普通浏览器)
- 微信小程序(仅支持 navigateTo,小程序内嵌的 h5 跳转到小程序页面,其余同普通浏览器)
- 直营 App(除 setBackButton 外全支持)
- 最福利 App(全支持)
- i 云保 App(全支持)
-
commonJS 方式
npm install za-jsbridge;
import JSBridge from 'za-jsbridge';
-
外链方式(umd)
<script type="text/javascript" src="dist/za-jsbridge.js"></script>
JSBridge.debug = true;
console.log(JSBridge.env);
参数 | 类型 | 默认值 | 可选值 | 功能说明 |
---|---|---|---|---|
env | String | node:nodejs 渲染 wechat:微信客户端 miniprogram: 微信小程序 za:直营 App iyunbao:i 云保 App ifuli:最福利 App browser:普通浏览器 |
JSBridge.getSystemInfo(callback);
参数 | 类型 | 默认值 | 可选值 | 功能说明 |
---|---|---|---|---|
callback | Function | function(res, success) {} | res: { appName:'品牌', appVersion:'版本', appPlatform:'平台' } success:是否成功 |
回调方法 |
import { browserHistory } from 'react-router';
JSBridge.router = browserHistory;
JSBridge.ready(function () {
JSBridge.setTitle('标题');
});
JSBridge.go('/xxx/xxx.html');
JSBridge.go('https://www.zhongan.com');
参数 | 类型 | 默认值 | 可选值 | 功能说明 |
---|---|---|---|---|
url | String | 要跳转的链接地址,可以是前端路由,也可以是完整 url |
JSBridge.goBack();
JSBridge.goLogin();
JSBridge.navigateTo('/xxx/xxx');
参数 | 类型 | 默认值 | 可选值 | 功能说明 |
---|---|---|---|---|
url | String | 要跳转的小程序页面地址 |
JSBridge.setTitle('标题');
参数 | 类型 | 默认值 | 可选值 | 功能说明 |
---|---|---|---|---|
title | String | 标题 |
// 设置左上角按钮
JSBridge.setBackButton(
{
title: '返回',
},
callback
);
// 设置右上角按钮
JSBridge.setRightButton(
{
imageUrl:
'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png',
},
callback
);
参数 | 类型 | 默认值 | 可选值 | 功能说明 |
---|---|---|---|---|
title | String | 分享按钮名称 | ||
imageUrl | String | 图片按钮 url 地址 | ||
callback | Function | function(res, success) {} | res:返回值 success:是否成功 |
按钮触发事件 |
JSBridge.share(
{
platform: ['wechat', 'wechat-timeline'],
title: '分享标题',
desc: '分享摘要',
imageUrl:
'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png',
link: 'https://www.zhongan.com',
},
callback
);
参数 | 类型 | 默认值 | 可选值 | 功能说明 |
---|---|---|---|---|
platform | Array | 全部 | ['wechat', 'wechat-timeline', 'qq', 'qzone', 'zuifuli'] wechat:微信 wechat-timeline:朋友圈 qq:手机 QQ qzone:QQ 空间 zuifuli:最福利(仅最福利 app 中支持) |
分享可选平台 |
title | String | 分享标题 | ||
desc | String | 分享摘要 | ||
imageUrl | String | 分享图片 | ||
link | String | 分享链接 | ||
direct | Boolean | false | true:直接分享 fase:用户触发分享 |
是否直接分享 |
callback | Function | function(res, success) {} | res:返回值 success:是否成功 |
回调方法 |
// 二维码识别(用于长按二维码)
JSBridge.scanQRCode(
{
url: 'https://www.zhongan.com',
},
callback
);
// 二维码扫描
JSBridge.scanQRCode(
{
direct: false,
},
callback
);
// 条形码扫描
JSBridge.scanQRCode(
{
direct: true,
},
callback
);
参数 | 类型 | 默认值 | 可选值 | 功能说明 |
---|---|---|---|---|
url | String | 二维码地址 | ||
direct | Boolean | false | true:扫完直接返回 fase:用户触发返回 |
扫码后是否立即返回 |
callback | Function | function(res, success) {} | res:返回值 success:是否成功 |
回调方法 |
JSBridge.setNavigationStyle(
{
fontColor: '#ffffff',
backgroundColor: '#000000',
},
callback
);
参数 | 类型 | 默认值 | 可选值 | 功能说明 |
---|---|---|---|---|
fontColor | String | 字体颜色 | ||
backgroundColor | String | 背景颜色 | ||
navigationBarHidden | Boolean | false | 是否隐藏导航栏(仅最福利 App 支持) | |
statusBarMode | Number | 0 | 0:白底黑字 1:黑底白字 |
状态栏模式(仅最福利 App 支持) |
JSBridge.resetConfig();
JSBridge.print(obj, callback);