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

内置 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