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

`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: () =>


}
].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 = () => ;
App.displayName = 'Siamese';
window.Siamese = App;
window.INTEGRATION_ENV || ReactDOM.render(, 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

内置 model

内部 mobx model 使用与普通 model 无异

`js
@inject('breadcrumb', 'loading')
export default class Detail extends Component {}
`

breadcrumb model: 预设置的主站行为

`js
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 废弃)

`js
@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

`js
@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'] ?

: 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
``