shoplazza sdk
此 SDK 包含 Shoplazza UI 组件规范(基于 ant design)以及嵌入 Admin 后台 app 的脚手架
应用此 SDK 能构建前端微服务高度模块化应用 EmbedApp
和 SmartApp
shoplazza sdk 使用技术栈 React+ReatIntl+Mobx+ReactRouter+Webpack
Get started
启动实例
cd examples
npm i
npm run dev
应用模块开发
在 src
目录下每一个文件夹即一个模块.模块的构成包括 路由定义,mobox model 定义,多语言语料定义. 这些定义都放在模块入口index.js
中
demo : src/mymodule/index.js
export default ({ routes, models, messages, locale }) => {
const rootRoute = routes.filter(r => r.path === '/')[0];
rootRoute.routes = [
{
path: '/admin/smart_apps/abc',
exact: true,
component: () => <div>my component</div>
}
].concat(rootRoute.routes);
Object.assign(models, { mymodel });
Object.assign(messages, require('./locale/' + locale).default);
};
App 启动入口 ShoplazzaApp
ShoplazzaApp 适用于 EmbedApp
和 SmartApp
两种 app 形式入口,开发者可以无区别的开发应用模块.SmartApp 会有一些特殊的约定
下面是 SmartApp 项目文件示例 index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { ShoplazzaApp } from 'shoplazza-sdk';
let basename = '/';
/* {{basename}} */
const modules = app => {
/* {{modules}} */
};
const App = () => <ShoplazzaApp modules={modules} basename={basename} />;
App.displayName = 'Siamese';
window.Siamese = App;
window.INTEGRATION_ENV || ReactDOM.render(<App />, document.getElementById('root'));
/* {{basename}} */
注释会在 webpack 中 loader 替换成 环境变量中的 basename /* {{modules}} */
会被替换成系统模块的入口注册代码,module 可以在启动时指定(npm run dev -- --modules=module1,module2
),默认全部启动
开发嵌入式应用 EmbedApp
- EmbedApp 是以 iframe 方式嵌入到父窗口中,用于强隔离实现.
- 部署后 app 是以 iframe 方式嵌入到主站中,通过 iframe post message 双向通信来控制顶部条
- 开发嵌入式应用与主站 module 开发基本一致,详见主站开发文档
开发 SmartApp
-
SmartApp 是以 js 注入方式嵌入到主站中. 相比 SmartApp 需要遵循如下约定
-
根组件需要全局暴露.而且所有路由必须以
/admin/smart_apps/{rootComponentName}
开头,这样跟主站的路由是一致的 -
根组件条件 render,集成模式
window.INTEGRATION_ENV = true
,根组件的生命周期由主站接管 -
webpack output 配置 防止多个 webpack 对象冲突
output: { jsonpFunction: 'webpackJsonp' + Math.random().toString(16).substr(2) }
,SmartApp 跟主站使用 package 是隔离的.除了 external 引入的 vendor lib -
样式隔离
- 配置 style-loader
{ loader: 'style-loader', options: { attrs: { class: appName } } }
,给生成的 style 元素增加类名,SmartApp 卸载时将会移除其相关的样式,避免形成样式污染 - 配置 prefixCls
app.prefixCls = appName
替换 antd 的 class 前缀,防止对主站样式形成污染 - 如需使用
loading
这个 model,需使用import { request } from shoplazza-sdk
- 配置 style-loader
内置 model
内部 mobx model 使用与普通 model 无异
@inject('breadcrumb', 'loading')
export default class Detail extends Component {}
breadcrumb model: 预设置的主站行为
const defaultValues = {
backStatus: false, // 是否显示返回按钮
backClick: () => {}, // 返回点击事件
breadcrumbName: '', // 返回文案
onConfirmSave: () => {}, // 保存按钮事件回调
onConfirmCancel: () => {}, // 取消更改按钮事件回调
showButtonsWhenDirty: true, // 是否显示保存按钮
isBreadCrumbDirty: false, // model 是否已经修改
raw: '', // 原始数据
// 自定义顶部按钮(尚未实现)
extraButtons: [
/*{ name:'btn1', children:"普通按钮" },{ name:'btn2', type:"primary", children:"首选按钮", disabled:true }*/
],
onExtraButtonClick: () => {}
};
保存取消按钮部分逻辑建议使用方法修改.不需要直接访问,breadcrumb 提供的方法(withUnSavedWarning HOC 废弃)
@inject('breadcrumb', 'loading')
export default class Detail extends Component {
componentDidMount() {
const { breadcrumb } = this.props;
breadcrumb.reset(); //所有状态恢复成默认值
breadcrumb.setSnapshot(); //设置比较基准快照
breadcrumb.getSnapshot(); //设置比较基准快照
breadcrumb.resetSnapshot(); //设置比较基准快照
breadcrumb.setSaveHandler(); //设置保存回调
breadcrumb.setCancelHandler(); //设置取消保存回调
breadcrumb.push(); //主站安全的跳转.参数同`history.push`
breadcrumb.open(); //安全的打开窗口.参数从'window.open'
}
}
loading model
intercept axios request,请求 url 作为 key, 记录请求是否 pending
@inject('breadcrumb', 'loading')
export default class Detail extends Component {
async componentDidMount() {
const { loading } = this.props;
const res = await Axios.get('admin/data'); // loading['admin/data'] = true
}
render() {
const { loading } = this.props;
return loading['admin/data'] ? <div>loading</div> : null;
}
}
_ 注意请求 url 不能以/开头 _
默认的 axios baseURL 配置 request.defaults.baseURL = basename + 'api/';
定制组件详见src/index.js
发布 package 新版本
export NPM_TOKEN="xxxxxxxxx"
npm version patch
npm i
npm run build
nrm use npm
npm publish