number-utils
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

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

publish

npm set registry http://registry.npm.wanmi.com
npm publish

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;
}
  1. 移动端采用 rem 方案.html font-size 设置建站和业务线必须一致.不然会造成干扰.这部分没法隔离
  • 等建站 vw 方案可以绕过 rem.不限制此规则
  1. ReactDOM.findDOMNode(this) 跨版本有问题(14->15,16).不要使用.this.refs 几乎可以满足需求
  2. 兼容性问题: 自行提供 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 组件单独写

Readme

Keywords

Package Sidebar

Install

npm i number-utils

Weekly Downloads

8

Version

1.0.3

License

ISC

Unpacked Size

335 kB

Total Files

36

Last publish

Collaborators

  • dbuuu