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’