xsite page render
npm install @wanmi/magic-box建站组件列表渲染
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --globalnpm 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
jsx
import MagicBox from "@wanmi/magic-box";
const props = {
renderHost:'http://xxx',
ossHost:'http://xxx',
envCode: "test1",
systemCode: "d2cStore",
uid: "000000",
platform: "weixin",
platformEnv: "taro",
pageType: "index",
};// 微信首页显示: 底部导航遮挡
// html,body{height:100%}
// 微信海报页: 无底部导航
// html,body{height:100%}
// children 默认会加到页面底部
// PC公共头尾(PLUGIN可选)
;
`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 |
| platformEnv | 平台类型(细化) | string | - (必需) | pc,taro,app |
| 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 } |
$3
*
的默认值:`css
{
height: 100%;
overflow: auto;
}
`*
: 该属性主要为了懒加载而设置.
直接触发了 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.互不干扰
`css
*,
*::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.
* 获取 configOrder,barList 数据
* 前置文件依赖: dll,icon 等等
* 加载&执行 widgetFiles
* 渲染页面: configOrder => ComponentTree
[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 组件单独写