nv-jsbridge
v0.0.28
Published
jsbridge for za
Downloads
2
Readme
za-jsbridge
承接众安 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>
开启 debug 模式
JSBridge.debug = true;
获取当前 JSBridge 环境
console.log(JSBridge.env);
| 参数 | 类型 | 默认值 | 可选值 | 功能说明 | | ---- | ------ | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | | env | String | | node:nodejs 渲染wechat:微信客户端miniprogram: 微信小程序za:直营 Appiyunbao:i 云保 Appifuli:最福利 Appbrowser:普通浏览器 |
获取系统信息
JSBridge.getSystemInfo(callback);
| 参数 | 类型 | 默认值 | 可选值 | 功能说明 | | -------- | -------- | ------------------------- | ----------------------------------------------------------------------------------------- | -------- | | callback | Function | function(res, success) {} | res: { appName:'品牌', appVersion:'版本', appPlatform:'平台' } success:是否成功 | 回调方法 |
设置前端路由
import { browserHistory } from 'react-router';
JSBridge.router = browserHistory;
使用以下方法时请用ready
方法包裹,以确保当前 APP 内部的桥接 js 在 jsbridge 代码运行前加载完成。例:
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 | | | 要跳转的小程序页面地址 |
设置页面 title
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 支持) |
重置设置(直营 App 专用)
JSBridge.resetConfig();
打印小票(最福利 App 专用)
JSBridge.print(obj, callback);