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 滚动条有没有触发

注意事项

1. reset.css 自己提供
2. box-sizing 使用 inherit.建站和业务线区域独自设置 box-sizing.互不干扰

*,
*::before,
*::after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
  font-size: 50px;
}

3. 移动端采用 rem 方案.html font-size 设置建站和业务线必须一致.不然会造成干扰.这部分没法隔离

• 等建站 vw 方案可以绕过 rem.不限制此规则

4. ~~ReactDOM.findDOMNode(this) 跨版本有问题(14->15,16).不要使用.this.refs 几乎可以满足需求~~
5. 兼容性问题: 自行提供 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 组件单独写