hh-magic-box
v1.0.0
Published
xsite page render
Downloads
7
Readme
MagicBox
desc
建站组件列表渲染
PreInstall
安装之前需要配置npm的registry,以防万一,请将如下配置都执行一遍
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
npm config set @wanmi:registry=http://registry.npm.wanmi.com
npm config set @qianmi:registry=http://registry.npm.qianmi.com
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
npm config set @wanmi:registry=http://registry.npm.wanmi.com --global
npm config set @qianmi:registry=http://registry.npm.qianmi.com --global
Install
npm install --save @wanmi/magic-box
Usage
import MagicBox from "@wanmi/magic-box";
const props = {
renderHost:'http://xxx',
ossHost:'http://xxx',
envCode: "test1",
systemCode: "d2cStore",
uid: "000000",
platform: "weixin",
pageType: "index",
};
// 微信首页显示: 底部导航遮挡
// html,body{height:100%}
<MagicBox {...props} style={{ height: "100vh", paddingBottom: 44 }} />;
// 微信海报页: 无底部导航
// html,body{height:100%}
<MagicBox {...props} />;
// children 默认会加到页面底部
<MagicBox {...props} >
<Other />
</MagicBox>
// PC公共头尾(PLUGIN可选)
<div>
<MagicBox {...props} part="HEADER" />
<div>
<MagicBox {...props} part="MAIN" scroll="window" />
</div>
<MagicBox {...props} part="FOOTER" />
<MagicBox {...props} part="PLUGIN" />
</div>;
API
| 参数 | 说明 | 类型 | 默认值 | 示例值 | | ------------ | ------------------------------------------- | -------- | -------- | ------------------------------------------ | | renderHost | render服务的前缀 | string | - (必需) | http://127.0.0.1:3001 | | ossHost | oss的前缀 | string | - (必需) | http://x-site.oss-cn-shanghai.aliyuncs.com | | envCode | 环境标识(目前是固定值test1) | string | - (必需) | test1 | | systemCode | 业务线标识(目前是固定值d2cStore) | string | - (必需) | d2cStore | | uid | 店铺id | string | - (必需) | 000000 | | platform | 平台类型 | string | - (必需) | pc,weixin | | pageType | 页面类型 | string | index | index,poster,article | | pageCode | 页面编码(pageType===index时不需要pageCode) | string | - | | | part | 渲染部分("HEADER" , "MAIN" , "FOOTER" ) | string | - | PC 公共头尾处理 | | scroll | 滚动条行为(parent,window) | string | parent | | | style | 容器样式 | object | - | | | api | 需要注册的 BusinessDataCenter 的 Api | object | - | | | onDataLoaded | 数据加载后的回调函数 | function | - | ({title,shareInfo})=>{ //handleData } |
额外说明
style
的默认值:
{
height: 100%;
overflow: auto;
}
scroll
: 该属性主要为了懒加载而设置. 直接触发了 window 的滚动条(比如你的 MagicBox 外层没有设置绝对高度),那么需要设置scroll:window
. 不然 MagicBox 默认监听父元素的滚动条行为.使得懒加载失效.- 微信端: 一般
body {height:100%}
,是不会触发 window 滚动条的. - PC 端: 如果 body 没有设置
body {height:100%}
,那么 magicBox 的默认属性{height:100%},当页面过长时,会触发 window 滚动条. 此时需要scroll:window
.
- 微信端: 一般
具体情况,看 window 滚动条有没有触发
注意事项
- reset.css 自己提供
- box-sizing 使用 inherit.建站和业务线区域独自设置 box-sizing.互不干扰
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 50px;
}
- 移动端采用 rem 方案.html font-size 设置建站和业务线必须一致.不然会造成干扰.这部分没法隔离
- 等建站 vw 方案可以绕过 rem.不限制此规则
- ~~ReactDOM.findDOMNode(this) 跨版本有问题(14->15,16).不要使用.this.refs 几乎可以满足需求~~
- 兼容性问题: 自行提供 ES6 兼容环境(如:babel-polyfill)。组件会使用到 Array,Object 上新增的方法。如果不使用 class instance method 可以使用 babel-runtime.
Feature
- 获取 configOrder,barList 数据
- 前置文件依赖: dll,icon 等等
- 加载&执行 widgetFiles
- 渲染页面: configOrder => ComponentTree
千米的TODO
[x] 环境变量 envCode: 'dev'|'test*'|'gray'|'prod'
- 与请求的 host 有关联
- 与下载 cdn 文件路径有关联
[x] 渲染 ComponentList
[x] 对 jquery, lazyload, lazysizes 依赖处理
- PC 还残留对 jquery 和 lazyload 的依赖.等待移除
- 微信端只依赖 lazysizes
[ ] iconfont 的依赖处理.字体子集化处理(理想化)
- 暂时全部 iconfont 依赖
- 问题:以后增加图标.需要同步增加图标
[ ] 支持传入 sceneName, 兼容 systemCode
[x] 支持自定义 loading 组件
[ ] jest 测试
[x] HorizontalLayout 组件单独写