1.4.17 • Published 4 years ago
boqiijssdk v1.4.17
波奇 H5 与 Native 交互 jssdk
基于 jsbridge 的 hybrid 开发模式，建立 H5 与 Native 之间的通讯桥梁，使 h5 在 app 里面的交互体验无限接近原生体验，减少 H5 与 Native 间交互产生的问题，统一 IOS 于 Android 的交互 API.
Install
Install with npm:
$ npm install --save boqiijssdkInstall
Install with yarn:
$ yarn add boqiijssdk --dev使用
-es6 方式
import BoqiiJsApi from "boqiijssdk";
window.BoqiiJsApi = BoqiiJsApi;-commonjs 方式
const BoqiiJsApi = require("boqiijssdk");
window.BoqiiJsApi = BoqiiJsApi;-常规方式
<script src="https://h5.boqiicdn.com/api/boqiijssdk.js"></script>;
然后在项目中使用`BQJSAPI`;Notes: 所有 api 调用时传入的参数值都必须使用字符串（特别说明的除外）
Version 1.0.0
1.增加 openNewPage 打开新页面 方法
2.增加 checkInsideApp 检查是否在波奇 APP 环境内方法
3.增加 goBackToPage 返回 方法
4.增加 goBackToRootPage 返回到首页 方法
5.增加 getLbsInfo 获取当前地址方法
6.增加 setItemSync 方法
7.增加 getItemSync 方法
8.增加 removeItemSync 方法
9.增加 requireAuth 方法
10.增加 getAuthInfo 方法
11.增加 showShareWindow 方法
12.增加 onMenuShareAppMessage 方法
Version 1.1.0
1.增加 navigateToMallProductDetail 方法
2.增加 navigateToDiscountPackage 方法
3.增加 navigateToMallClassification 方法
4.增加 navigateToMallProductDetailSecondsKill 方法
5.增加 navigateToMallProductDetailOpenBooking 方法
6.增加 navigateToMineViewController 方法
7.增加 navigateToMallProductCustomList 方法
8.增加 navigateToMallProductList 方法
9.增加 navigateToCouponsView 方法
10.增加 navigateToPrizeExchangeView 方法
11.增加 navigateToBQBeanView 方法
12.增加 navigateToMagicalCardView 方法
13.增加 navigateToMallHomePage 方法
14.增加 navigateToRootPage 方法
Version 1.1.1
1.增加 setNavigationBar 方法
2.增加 openAddressSelector 方法
Version 1.1.2
1.增加 navigateToAddressList 跳转管理地址列表 方法
2.增加 navigateToModifyPassword 跳转修改密码 方法
3.增加 navigateToRetrievePayPassword 跳转找回支付密码 方法
4.增加 navigateToSafetyVerification 跳转修改绑定手机 方法
5.增加 navigateToTalkerChat 跳转在线客服 方法
6.增加 navigateToRedPackets 跳转我的红包 方法
Version 1.1.3
1.增加 refreshPrevWebwiew 刷新上一个 Webview 方法
Version 1.1.4
1.增加 navigateToPublishNote 打开发布页 方法
Version 1.1.5
1.增加 chooseImage 拍照或从手机相册中选图接口 方法
2.增加 previewImage 预览图片 方法
3.增加 setBreakbackInfos 设置中断回退信息 方法
4.增加 clearBreakbackInfos 清除中断回退信息 方法
Version 1.2.2
1.增加 navigateToMerchantDetailView 跳转服务详情页 方法
- Install
- Install
- 使用
<openNewPage><checkInsideApp><goBackToPage><goBackToRootPage><getLbsInfo><setItemSync><getItemSync><removeItemSync><requireAuth><getAuthInfo><showShareWindow><onMenuShareAppMessage><navigateToMallProductDetail><navigateToDiscountPackage><navigateToMallClassification><navigateToMallProductDetailSecondsKill><navigateToMallProductDetailOpenBooking><navigateToMineViewController><navigateToPerson><navigateToMallProductCustomList><navigateToMallProductList><navigateToCouponsView><navigateToPrizeExchangeView><navigateToBQBeanView><navigateToMagicalCardView><navigateToMallHomePage><navigateToRootPage><redirectTo><setNavigationBar><openAddressSelector><chooseImage><previewImage><setBreakbackInfos><clearBreakbackInfos><navigateToMerchantDetailView>
<openNewPage>
打开新页面
/**
* @parms {string} title 新打开页面标题
* @parms {string} packagepath 新打开页面url 绝对路劲
* @parms {string} pageidentifier 新打开页面标示
* @parms {string} sharebtn 新打开页面右上角是否带分享按钮
* @parms {string} enableHideNavigationBar 新打开页面是否影藏头部导航栏（导航栏背景色透明，webview撑满）
* @parms {string} navigationBarBackgroundColor 新打开页面导航栏背景色（enableHideNavigationBar:true的时候，页面滑动后的背景色）
* @parms {string} navigationBarTextStyle 新打开页面导航栏文字颜色 white | black
* @parms {string} enableNavigationBarBadge 新打开页面导航栏右侧按钮
* @parms {string} navigationBarBadgeText 新打开页面导航栏右侧按钮文字内容
* @parms {string} navigationBarBadgeIconUrl 新打开页面导航栏右侧按钮图标链接
* @parms {string} navigationBarBadgeIconLink 新打开页面导航栏右侧按钮链接
*
*/
BoqiiJsApi.openNewPage({
title: "测试",
packagepath: "https://m.boqii.com",
pageidentifier: "boqiiHome",
sharebtn: false
});<checkInsideApp>
检查是否在波奇 App 内
const checkInsideApp = BoqiiJsApi.checkInsideApp;
console.log(checkInsideApp); // true | false<goBackToPage>
调用 app 返回，默认返回上一页
BoqiiJsApi.goBackToPage({
pageidentifier: "boqiiHome"
});<goBackToRootPage>
回退到 APP 首页
BoqiiJsApi.goBackToRootPage();<getLbsInfo>
获取地址位置信息
BoqiiJsApi.getLbsInfo({
success(lbs) {
console.log(lbs);
},
error(error) {
console.log(error);
}
});<setItemSync>
设置存储信息.
BoqiiJsApi.setItemSync(
"test",
{ value: 1, id: 2, name: "test" },
{
success(lbs) {
console.log(lbs);
},
error(error) {
console.log(error);
}
}
);<getItemSync>
获取存储信息.
BoqiiJsApi.getItemSync("test", {
success(data) {
console.log(data);
},
error(error) {
console.log(error);
}
});<removeItemSync>
获取存储信息.
BoqiiJsApi.removeItemSync("test", {
success(data) {
alert("删除成功");
console.log(lbs);
},
error(error) {
console.log(error);
}
});<requireAuth>
唤起登录.
BoqiiJsApi.requireAuth({
success(auth) {
console.log(auth);
},
error(error) {
console.log(error);
}
});<getAuthInfo>
获取授权信息.
BoqiiJsApi.getAuthInfo({
success(auths) {
console.log(auths);
},
error(error) {
console.log(error);
}
});<showShareWindow>
唤起分享.
BoqiiJsApi.showShareWindow({
title: "测试一下",
content: "测试一下，你就知道",
link: "https://www.baidu.com",
imgUrl: "https://h5.boqiicdn.com/boqiishop20180618worldcup-share..jpg",
shareType: "h5", // 分享类型，从APP内分享出来的链接， 默认为 miniProgram ,分享出来的是小程序页面 h5 || miniProgram
success(auths) {
console.log(auths);
},
error(error) {
console.log(error);
}
});<onMenuShareAppMessage>
设置分享信息.
BoqiiJsApi.onMenuShareAppMessage({
title: "测试一下",
content: "测试一下，你就知道",
link: "https://www.baidu.com",
imgUrl: "https://h5.boqiicdn.com/boqiishop20180618worldcup-share..jpg",
shareType: "h5", // 分享类型，从APP内分享出来的链接， [miniProgram 商城小程序, groupon拼团小程序, h5]
sharePlatform: "wechat", // app只分享 微信平台
miniProgramPath: "" // 设置小程序 的分享路径
});<navigateToMallProductDetail>
跳转原生商品详情页.
/**
* @param {string} goodsId 商品ID
* @param {object} onMenuShareMessage 商品分享信息
* Example :
* onMenuShareMessage: {
* title: '测试一下',,
* content: '测试一下，你就知道',,
* link: 'https://www.baidu.com',,
* imgUrl: 'https://h5.boqiicdn.com/boqiishop20180618worldcup-share..jpg'
* }
*/
BoqiiJsApi.navigateToMallProductDetail({
goodsId: "xxx",
onMenuShareMessage: {
title: "测试一下",
content: "测试一下，你就知道",
link: "https://www.baidu.com",
imgUrl: "https://h5.boqiicdn.com/boqiishop20180618worldcup-share..jpg"
}
});<navigateToDiscountPackage>
跳转原生套餐详情页.
/**
* @param {string} goodsId 商品ID
* @param {string} packageId 套餐ID
*/
BoqiiJsApi.navigateToDiscountPackage({
goodsId: "23893",
packageId: "1"
});<navigateToMallClassification>
跳转原生分类列表页.
/**
* @param {string} typeId
*/
BoqiiJsApi.navigateToMallClassification({
typeId: "1"
});<navigateToMallProductDetailSecondsKill>
跳转原生秒杀详情页.
/**
* @param {string} goodsId 商品ID
* @param {string} activeId 活动ID
* @param {int} seckillShows 剩余时间
*/
BoqiiJsApi.navigateToMallProductDetailSecondsKill({
goodsId: "xxx",
activeId: "xxx",
seckillShows: "xxx"
});<navigateToMallProductDetailOpenBooking>
跳转原生预售详情页.
/**
* @param {string} goodsId 商品ID
* @param {string} activeId 活动ID
*/
BoqiiJsApi.navigateToMallProductDetailOpenBooking({
goodsId: request.goodsId,
activeId: request.activeId
});<navigateToMineViewController>
跳转原生个人中心.
/**
* @param {string} goodsId 商品ID
* @param {string} activeId 活动ID
*/
BoqiiJsApi.navigateToMineViewController();<navigateToPerson>
跳转原生 社区个人中心
/**
* @param {string} ID 个人uid
*/
BoqiiJsApi.navigateToPerson();<navigateToMallProductCustomList>
跳转原生自定义列表页.
/**
* @param {string} mainValue
* @param {string} templateDetailId
* @param {string} type
* @param {string} templateId
*/
BoqiiJsApi.navigateToMallProductCustomList({
mainValue: "",
templateDetailId: "",
type: "",
templateId: ""
});<navigateToMallProductList>
跳转原生商品列表.
/**
* @param {string} firstTypeId 一级分类ID
* @param {string} thirdTypeId 分类ID
* @param {string} keyword 关键词
* @param {string} brandId 品牌ID
* @param {string} couponId 优惠券ID
* @param {string} couponDesc 优惠券DES
*/
BoqiiJsApi.navigateToMallProductList({
firstTypeId: request.firstTypeId,
thirdTypeId: request.thirdTypeId,
keyword: request.keyword,
brandId: request.brandId
});<navigateToCouponsView>
跳转原生优惠券页.
BoqiiJsApi.navigateToCouponsView();<navigateToPrizeExchangeView>
跳转原生奖品兑换页.
BoqiiJsApi.navigateToPrizeExchangeView();<navigateToBQBeanView>
跳转原生波奇豆页.
BoqiiJsApi.navigateToBQBeanView();<navigateToMagicalCardView>
跳转神奇卡.
BoqiiJsApi.navigateToMagicalCardView({
URL?: '神奇卡url' // 可不传
})<navigateToMallHomePage>
跳转商城首页.
BoqiiJsApi.navigateToMallHomePage({
URL?: '神奇卡url' // 可不传
})<navigateToRootPage>
跳转 App 首页.
BoqiiJsApi.navigateToRootPage();<redirectTo>
关闭当前页面 WebView，跳转到新的某个页面.
BoqiiJsApi.redirectTo({
...
// 同openNewPage
})<setNavigationBar>
设置导航栏.
//////////
//
// setNavigationBar 设置导航栏.
//
// request:示例
// {
// "enableHide": false, // 是否隐藏导航栏
// "backgroundColor": 'xx', // 标题栏背景颜色
// "textStyle": false, // 标题栏文字颜色
// "enableBadge": enableBadge // 是否有右侧按钮
// "badgeText": badgeText // 按钮内容文字
// "badgeIconUrl": badgeIconUrl // 按钮icon Url
// "badgeIconLink": badgeIconLink // 按钮跳转地址
// "badgeClick": badgeClick // 按钮点击事件
// }
//
//////////
BoqiiJsApi.setNavigationBar({
...
// 同openNewPage
})<openAddressSelector>
设置导航栏.
//////////
//
// openAddressSelector 打开地址选择器.
//
// request:示例
// {
// "success": function(address) {
// console.log(address)
// },
// "error": function(err) {
// console.log(err)
// },
// "cancel": function() {
// console.log('取消选择)
// }
// }
//
//////////
BoqiiJsApi.openAddressSelector({
addressId: "", // 初始地址Id active
enableGlobalGoods: false, // 是否全球购商品
success: function(info) {
console.log(info);
}
});<chooseImage>
拍照或从手机相册中选图接口.
//////////
//
// chooseImage 拍照或从手机相册中选图接口.
//
// request: {
// count: 1, // 默认9
// sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
// sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
// success: function(images) {
// console.log(images)
// }
// }
//////////
BoqiiJsApi.chooseImage({
count: 2, // 默认9
sizeType: ["original", "compressed"],
sourceType: ["album", "camera"],
success: function(info) {
console.log(info);
}
});<previewImage>
预览图片.
//////////
//
// previewImage 预览图片.
//
// request: {
// current: 0, //当前显示图片的 索引 index
// urls: ['https://xxx', 'https://xxx'], // 需要预览的图片http链接列表
// }
//////////
BoqiiJsApi.previewImage({
current: "",
urls: []
});<setBreakbackInfos>
设置中断回退信息, 比如：正在编辑 forms 表单，未保存的情况下，用户点击回退，弹出确认放弃编辑提示框.
//////////
//
// setBreakRollbackInfos 设置中断回退信息.
//
// request: {
// message: '确认取消上传认证信息吗？', // 提示信息.
// cancelBtnText: '继续上传' // 取消回退按钮文字
// confirmBtnText: '确认取消' // 确认回退按钮文字
// }
//////////
BoqiiJsApi.setBreakbackInfos({
message: "确认取消上传认证信息吗？",
cancelBtnText: "继续上传",
confirmBtnText: "确认取消"
});<clearBreakbackInfos>
清除中断回退信息, 用户保存 forms 表单后，清除之前设置的中断回退信息.
//////////
//
// clearBreakbackInfos 清除中断回退信息.
//
// }
//////////
BoqiiJsApi.clearBreakbackInfos();<navigateToMerchantDetailView>
跳转原生服务详情页.
/**
* @param {string} ID 商户ID
*/
BoqiiJsApi.navigateToMerchantDetailView({
ID: "xxx"
});1.4.17
4 years ago