落地页强化下载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(可选)作为参数,参数中的各个字段含义及默认值如下表:
| 参数 | 类型 | 说明 | 默认值 |
| 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() {}, } |
- 隐藏下载弹框
DownloadGuide.hide();