@bbtfe/downloadguide NPM

落地页强化下载dialog组件

实现了功能：强化工具的分享落地页下载引导在任意工具H5页面浏览超过3个页面时，在请求打开新的页面时会出现此引导弹窗

注意点

已经做了在孕育app中不显示下载弹框
如果页面中没有引入deeplink，tracking和w2a的相关js的话，会自动引入
下载框的显示方式只有：position: fixed 固定全屏覆盖，z-index: 999
在下载框中已经集成了dp和w2a的功能

confluence文档地址： http://confluence.dayin.com/pages/viewpage.action?pageId=20991951

引用方式

目前所有引用方式，都需要引入这个样式文件

<link href="//static02.babytreeimg.com/img/bca/downloadGuide/0.0.1/dist.min.css" rel="stylesheet" />

npm引用

npm i @bbtfe/downloadguide

import DownloadGuide from '@bbtfe/downloadguide';

script引用

支持HTTPS和HTTP，建议在通常页面中使用下面去掉协议头的形式引用即可。

<link href="//static02.babytreeimg.com/img/bca/downloadGuide/0.0.1/dist.min.css" rel="stylesheet" />
<script src="//static02.babytreeimg.com/img/bca/downloadGuide/0.0.2/dist.min.js"></script>

开发说明

拉取源码到本地，源码目录：bbt-fe-comp/downloadGuide
npm i
npm run build
bbt-common-asset项目下对应的SDK目录(bbt-common-asset/static/downloadGuide)新建版本号文件夹
将dist下文件拷至新版本号目录里
以gittool方法提交代码, 编译后的代码bbt-common-asset，源码bbt-fe-comp，都需要提交
项目中引入并验证

API

初始化弹框dom和弹框出现逻辑

在html中的script中初始引导组件的dom

DownloadGuide.initDom({
    toolName: 'bbt_canido_access_key',
    dpParams: {
        download: {
            android: 'http://r.babytree.com/65k9cy0',
	  		ios: 'http://r.babytree.com/65k9cy0',
  		}
    }
});

在点击页面事件的地方调用页面访问次数的方法，访问3次以上时弹出下载框

if (window.DownloadGuide) {
  	var isShowDialog = window.DownloadGuide.access()
  	console.log('isShowDialog', isShowDialog)
  	if (isShowDialog) {
    	return
 	}
}

DownloadGuide.initDom 可以接受一个object（可选）作为参数，参数中的各个字段含义及默认值如下表：

| 参数 | 类型 | 说明 | 默认值 |

dpParams参数说明：

| 参数 | 类型 | 说明 | 默认值 |

| download | object | 下载app的链接 | { android: 'http://r.babytree.com/8iSVC2b', ios: 'http://r.babytree.com/8iSVC2b', } |

| coverImage | object | 引导蒙层的配置 | { 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', } |

| universalLinkConfig | object | universalLink的配置项 | { refcode: '', downloadUrl: 'http://r.babytree.com/8iSVC2b', url: 'bbtrp://com.babytree.pregnancy/home/homepage', success: function() {}, fail: function() {}, } |

隐藏下载弹框

DownloadGuide.hide();

@everything-registry/sub-chunk-115 @zalastax/nolb-_bb

0.0.2

4 years ago

0.0.1

4 years ago