DownloadBar通用下载条组件
分享页的通用下载条, 一般显示在顶部或底部
引用方式
npm引用
npm i @bbtfe/downloadbar
import DownloadBar from '@bbtfe/downloadbar';
script引用
支持HTTPS和HTTP,建议在通常页面中使用下面去掉协议头的形式引用即可。
<script src="//static02.babytreeimg.com/img/bca/downloadBar/0.0.2/dist.min.js"></script>
开发说明
- 拉取源码到本地,源码目录:bbt-fe-comp/downloadBar
- npm i
- npm run build
- bbt-common-asset项目下对应的SDK目录(bbt-common-asset/static/downloadBar)新建版本号文件夹
- 将dist下文件拷至 新版本号 目录里
- 以gittool方法提交代码, 编译后的代码bbt-common-asset,源码bbt-fe-comp, 都需要提交
- 项目中引入验证下
API
1. 显示下载条
DownloadBar.show([object Object]);
DownloadBar.show方法的各参数的默认值为:
const options = {
title: '宝宝树孕育',
desc: '孕育养娃神器',
btnText: '立即下载',
logo: '//pic01.babytreeimg.com/img/wp/ic/lg_pregnancy_big_2020.png',
showClose: true,
dpParams: {
autoDp: false,
schemeUrl: 'bbtrp://com.babytree.pregnancy/home/homepage',
download: {
android: 'http://r.babytree.com/8iSVC2b',
ios: 'http://r.babytree.com/8iSVC2b',
},
coverImage: {
canClose: true,
ios: '//static02.babytreeimg.com/img/preg-fe/caneat/common/ios-cover.png',
android: '//static02.babytreeimg.com/img/preg-fe/caneat/common/android-cover.png',
},
yybUrl: 'http://a.app.qq.com/o/simple.jsp?pkgname=com.babytree.apps.pregnancy&ckey=CK1351100144579',
},
dpSDKV: '1.2.0',
trackSDKV: '0.2.3',
mode: 'default',
position: 'top',
onClose: () => {},
onClick: () => {},
closeAnimate: false,
}
DownloadBar.show方法各参数含义:
a. onClick: 下载按钮的点击事件回调 b. onClose: 点击关闭bar的事件回调 c. title: 要显示的title,默认为:'宝宝树', d. desc: 要显示的描述,默认为:'孕育养娃神器', e. btnText: 下载按钮的文案,默认为:'立即下载', f. logo: 要显示的logo,默认为:'//pic01.babytreeimg.com/img/wp/ic/lg_pregnancy_big_2020.png', g. showClose: 是否可以关闭bar,默认为:true, h. dpSDKV: deeplink sdk的版本号, 默认为: '1.1.7', i. trackSDKV: tracking埋点sdk的版本号,默认为: '0.2.1', j. mode: bar的固定方式,默认为:'default',可以设置为‘fixed’ k. position: bar显示位置,默认为‘top’显示在顶部,可以设置为‘bottom’,要mode设置为fixed才会生效 l. dpParams: dp时所需要的一些参数,object
1.schemeUrl: 需要dp起来的app的路由,默认: 'bbtrp://com.babytree.pregnancy/home/homepage',
2.download:ios和android下载的链接,默认:
3.coverImage:在ios和安卓中弹出的遮罩和是否可以关掉该遮罩,
4.yybUrl:应用宝下载链接, 默认为:'http://a.app.qq.com/o/simple.jsp?pkgname=com.babytree.apps.pregnancy&ckey=CK1351100144579',
2. 隐藏下载条
DownloadBar.hide();
3. 注意点
a. 已经做了在孕育app中不显示下载bar b. 如果页面中没有引入deeplink,tracking和w2a的相关js的话,会自动引入 c. 下载bar的固定方式有两种: ‘default’和‘fixed’