落地页强化下载dialog组件

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

注意点

1. 已经做了在孕育app中不显示下载弹框

2. 如果页面中没有引入deeplink，tracking和w2a的相关js的话，会自动引入

3. 下载框的显示方式只有：position: fixed 固定全屏覆盖，z-index: 999

4. 在下载框中已经集成了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和弹框出现逻辑

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

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

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

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

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

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

| toolName | string | 工具名，此值用于统计工具访问次数超过3次时弹框使用 | 必传值 名字定义规则如： bbt_canido_access_key |

| title | string | 含义 | 喜欢我们的内容吗 |

| desc | string | 下载弹框描述 | 更多精彩内容尽在宝宝树， 专家课程、孕育工具，快来试一下吧！ |

| btnText | string | 按钮文案 | 点我解锁 |

| logo | string | 下载条图标src | //pic01.babytreeimg.com/img/wp/ic/download_guide_app_2x.png |

| showClose | boolean | 是否显示关闭按钮 | true |

| dpSDKV | string | deeplink sdk的版本号,此属性是用来自动加载deeplink sdk | dp的版本号为1.2.0 |

| trackSDKV | string | track sdk的版本号,此属性是用来自动加载track sdk | 0.2.3 |

| onClose | function | 点击关闭按钮的回调函数 | 空函数 |

| onClick | function | 点击"点我解锁"按钮的回调函数 | 空函数 |

| dpParams | object | deeplink的配置参数 | 必传值 |

dpParams参数说明：

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

| autoDp | boolean | 是否自动dp | false |

| schemeUrl | string | dp打开app的路由 | 'bbtrp://com.babytree.pregnancy/home/homepage' |

| 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', } |

| yybUrl | string | 打开应用宝下载的链接 | 'http://a.app.qq.com/o/simple.jsp?pkgname=com.babytree.apps.pregnancy&ckey=CK1351100144579' |

| universalLink | boolean | 是否开启universal link | false |

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

3. 隐藏下载弹框

DownloadGuide.hide();