手淘--我的空间--卡片页

我的空间Card总体接入方案

接入规范

我的空间Card页面整体采用react开发，因此建议各接入方最好能够采用react开发。为了避免直接在现有分支上直接改代码造成逻辑混乱使得后期难以维护，最好是通过提供一个组件的形式来进行接入。类似于下面这样:

/* 接入方demo */
/* 接入方的module, 可以发布到tnpm */
export defualt xxxReactModule; 

/* 外层card容器 */
import xxxReactModule from '@alife/xxxReactModule';
import xxxReactModule2 from '@alife/xxxReactModule2';
import xxxReactModule3 from '@alife/xxxReactModule3';

React.render(
    <div className="card-container" data-spm="1">
        <xxxReactModule />
        <xxxReactModule2 />
        <xxxReactModule3 />
    </div>,
    document.querySelector('#root')
);

设计规范

• 卡片设计标准
• 卡片视觉规范

需要注意的点

• 坑位外层结构

  <div class="card-container">
      <!--各个card坑位-->
      <div class="card card-xxx"></div>
      <div class="card card-xxx"></div>
      ...
  </div>

• 点击card跳转

  如果你的card需要点击跳转到一个H5页面，不要使用location.href = xxxurl的方式(因为这样会在现有的webview上打开H5)，如果要实现跳转到新的页面，需借助windvane提供的接口进行跳转。示例如下:

  /* navToH5方法参见src/js/utils/util.js */
  navToH5(url);

• card的spm埋点

  如果点击各接入方card需要跳转到指定的H5页面，需要在外层容器上添加data-spm参数做spm埋点，目前data-spm第三位

  /* 监听你的点击事件, 参见src/js/utils/util.js */
  const jumpHandler = e => {
      let jumpHref = e.currentTarget.getAttribute('data-href');
      try {
        jumpHref = new HttpUrl(jumpHref);
    
        if (window.g_SPM && window.g_SPM.spm) {
          let g = window.g_SPM.spm(currentTarget);
          jumpHref.params.spm = g;
        }
        jumpHref = jumpHref.toString();
      } catch (e) {}
        
      navToH5(jumpHref); // 进行跳转
  };
  /* 监听点击事件 */
  jumpElement.addEventListener('click', jumpHandler, 'false');

技术选型

使用React

目录结构

src/css

• _mixin.scss _reset.scss: 公用css

• index.scss: 主css

src/js

• components 存放展示型component & 容器component

  • Card 卡片页

• utils 一些公共方法，sdk，MtopAPI等

  • api.js 常用api接口

  • utils.js 一些通用方法，navToH5, getUrlWithSpm

• index.js 入口js