ding-open-org-trial-entry
v1.4.2
Published
isv开通组织试用入口插件
Downloads
5
Readme
ding-open-org-trial-entry
为了避免多个isv
商家重复开发开通组织的入口,并且可以维持UI的一致性,这里提供的一个开通组织的插件。
安装
浏览器
<script src="ding-open-org-trial-entry.umd.js"></script>
npm
npm i ding-open-org-trial-entry --save
参数
h5
skuQuery
跳转sku商品规格页参数,默认会取location.search
的参数(即 xxx.html?a=1&b=2skuQuery
为 { a: 1, b: 2 })。goodsCode
商品code是毕传参数。slice
meta=viewport
标签scale
的比例。组件的默认样式会根据slice
放大缩小。默认值为 1。openWrapStyle
开通组织试用的容器样式。openTextStyle
开通组织试用的提示文案样式。openButtonStyle
开通组织试用的按钮样式。insertElement
开通组织试用的容器挂载的节点。默认为body
节点。
钉钉小程序
openWrapClass
开通组织试用的容器class
。openTextClass
开通组织试用的提示文案class
。openButtonClass
开通组织试用的按钮class
。skuQuery
跳转商品规格页参数。
H5示例
直接调用
import dingOpenOrgTryEntry from 'ding-open-org-trial-entry';
dingOpenOrgTryEntry.init();
自定义参数
import dingOpenOrgTryEntry from 'ding-open-org-trial-entry';
dingOpenOrgTryEntry.config({
insertElement: document.querySelector('#customizeElement'),
}).init();
浏览器引入
if (window.__DingOpenOrgTryEntry) {
window.__DingOpenOrgTryEntry.init();
}
小程序示例
钉钉小程序依赖 dingtalk-jsapi。请确保下载了这个依赖包,并确保在入口文件引入 dingtalk-jsapi/entry/mobile
{
"usingComponents": {
"ding-open-org-trial-entry": "ding-open-org-trial-entry/ding/index"
}
}
import 'dingtalk-jsapi/entry/mobile';
<ding-open-org-trial-entry skuQuery="{{ goodsCode: 'xxx', corpId: 'xxx' }}"/>
注意事项
开通组织试用的容器,样式使用了固定定位、默认高度为
64px
。为了避免视图内容展示,请预留好足够的空间。也可以通过自定义openWrapStyle
覆盖默认样式。开通组织试用文案尽量避免覆盖修改,各个商户文案保持统一。
开通组织试用的容器高度为固定值
64px
,如果在css
中预留空间时被转换为了rem
或vw
等。请配置相应的转化工具的class
白名单。例如postcss-px-to-viewport
。
module.exports = {
plugins: {
'postcss-px-to-viewport': {
selectorBlackList: ['.ding-open-reserved-space'],
}
}
}
.ding-open-reserved-space {
margin-top: 64px;
}