@bbtfe/downloadguide

0.0.2 • Public • Published

落地页强化下载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',
  		}
    }
});
  1. 在点击页面事件的地方调用页面访问次数的方法,访问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() {}, } |

  1. 隐藏下载弹框
DownloadGuide.hide();

Readme

Keywords

none

Package Sidebar

Install

npm i @bbtfe/downloadguide

Weekly Downloads

0

Version

0.0.2

License

ISC

Unpacked Size

21.6 kB

Total Files

8

Last publish

Collaborators

  • showstin
  • juhengze
  • most_xiaoya
  • huxinli
  • sisimengchen
  • huijuan_lv