Aterrizaje de una semana JD E-card Spring Festival juego de marketing de múltiples extremos

tres preguntas

Entrega rápida de proyectos: aplicación de la solución CodMi-M
Salida de solución interactiva multiterminal
Exploración colaborativa perfecta multijugador

Primero, use una imagen para comprender los requisitos del producto

Debido a que el tiempo de desarrollo para este requisito es de solo una semana, y el desarrollo y el borrador visual se generan simultáneamente, necesitamos que varias personas participen en el desarrollo al mismo tiempo, por lo que es muy importante comprender los requisitos y dividir los módulos. bueno, lo cual es muy importante para saber si podemos entregar el proyecto a tiempo.

Antes de ingresar al desarrollo, intentamos hacer un dibujo (basado en el lenguaje unificado de DDD): división auxiliar del trabajo y estudiantes en cada nodo para verificar rápidamente; al mismo tiempo, los puntos de riesgo conocidos se mostraban directamente en el lado del producto. .

La parte izquierda es el final de la entrega y la adaptabilidad, la parte roja es el riesgo que prevemos, la parte derecha desmonta el flujo de interacción de todo el producto y brinda soluciones técnicas en la interacción del nodo.

Después de dicho desmontaje, cada estudiante solo debe prestar atención a sus propias partes y la capacidad de adaptación durante el desarrollo.

Lógica de salto interactivo de mini programa

A continuación, echemos un vistazo a la implementación de cada extremo, cómo entregar rápidamente el proyecto en una semana.

Implementación de la página de actividad principal de H5

Centrarse en la resolución de problemas 1. Entrega rápida de proyectos: aplicación de solución CodMi-M

Aplicación de CodMi-M

CodMi-M es un conjunto de soluciones generales para móviles H5 basado en nuestro desarrollo de terminales móviles en los últimos dos años.

Basado en el scaffolding CodMi, se enfoca en la encapsulación de la capa de aplicación e integra la encapsulación sdk y api comúnmente utilizada en el sitio, para que los desarrolladores puedan concentrarse más en la lógica comercial.

En este proyecto, el desarrollo de la parte H5 utiliza CodMi-M para construir rápidamente la página de actividades.

Aplicación de Módulos CSS

A veces, los estilos que escribimos afectarán inadvertidamente el CSS de otros estilos, pero no los encontramos a tiempo. O cuando escribimos el estilo, no surte efecto, y el fenómeno de sobreescritura ocurre inexplicablemente. Preguntas como estas, a medida que nuestro proyecto crece y se involucran más desarrolladores, hacen que la gente se desespere cada vez más.

Por lo tanto, usamos el enfoque de Módulos CSS para evitar estos problemas tanto como sea posible.

import styles from "./style.module.scss";
const RedEnvelope = () => {
return (
 <div className={styles.envelopeCover}>xxx</div>
)
}
export default RedEnvelope;
复制代码

Pero escribiendo así, algunos amigos dirán:

Cada vez que necesite usar el caso de camello para nombrar
Es demasiado problemático referirse al objeto de estilos para escribir estilos cada vez.
Combinar módulos CSS con clases CSS globales puede ser difícil de administrar
Las referencias a módulos CSS indefinidos no dan advertencias

ok, de hecho es un poco inconveniente decirlo, así que aquí lo llevaré a actualizar nuevamente.

使用react-css-modules来解决上面css modules的问题

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './table.css';

class Table extends React.Component {
    render () {
        return <div styleName='table'>
            <div styleName='row'>
                <div styleName='cell'>A0</div>
                <div styleName='cell'>B0</div>
            </div>
        </div>;
    }
}

export default CSSModules(Table, styles);
复制代码

这样的话，通过我们使用react-css-modules：

不必再强制使用驼峰式了
无需在styles每次使用CSS模块引用该对象
当引用未定义的CSS模块会收到警告
全局 CSS 和 CSS 模块之间有明显的区别，例如：

<div className='global-css' styleName='local-module'></div>
复制代码

组件化管理及组件实现

组件化管理虽然是老生常谈的话题了，但确是极其重要的，尤其在项目工期紧且多人协作开发的过程中。

首先把页面先拆分成了5个独立组件，5个组件基本上互不影响。这样整个红包活动，只需要在首页配置好具体的组件入口即可，负责具体某个楼层的同学便可以随时进入开发阶段。

获奖者列表组件的实现

例如获奖者列表组件便独立开发，而且完全独立自主进行设计。

为了提供活动的氛围感和互动感，在产品形态上设计了获奖者列表，每次进入页面加载获奖者前100位进行滚动。本次需求中的获奖者列表采用无缝滚动方式实现。

目前无缝滚动的算法是将原有数据复制一份，当滚动到复制数据区域时，将滚动重置为初始状态，例如：

Winner
======
Winner
======
复制代码

在上述例子中，’======’包裹的范围我们称之为可视区，超过其包裹范围则内容不可见。上例中是仅有 1条有效数据的滚动状态，由于仅有 1 条数据，我们对这一条数据进行复制，当滚动到AB的复制数据且css 滚动效果结束，我们要马上重置滚动状态为初始状态：

======
Winner
======
Winner
复制代码

本次需求获奖者列表的可视区域仅有一条数据展示，所以我们可以仅将数据列表的第一条数据追加到尾部。

[0,1,2,3,4] // 原始数据列表
[0,1,2,3,4,0] // 复制后的数据列表
复制代码

接下来是实现动效，动效的实现主要借助 setTimeout 和 css transtion：

// tsx
<div onTransitionEnd={handleTransitionEnd}>
  [0,1,2,3,4,0].map(item => <div>item</div>)
<div>

// js
const transitionTimer = () => {
  const delayTime = 2000;
  window.setTimeout(() => {
    // 计算 tranformY 的值
    const y = calculateTranformY();
    // 设置到 style 上
    setTranformYToCSS(y);
  }, delayTime);
};
const handleTransitionEnd = () => {
  if (isNeedResetTransition()) {
    resetTransition();
  }
  transitionTimer();
};
复制代码

常量的提取

整个红包项目逻辑上最复杂的也就是活动状态和用户状态的区分匹配了，用户状态分为：初始状态、助力状态、可开奖状态和已开奖状态。活动状态分为：初始状态、进行中状态、结束状态和异常状态。

而我们要做的就是根据每一个不同的用户状态和每一个不同的活动状态，匹配出不同的页面状态，那么整个项目在设计上就需要提前思考好。

由于不同的框架组件，可能都需要进行状态匹配，这里首先要做的就是对于常量先进行提取，封装在最外层，各组件可以随时调用。

// common/constants.ts
export const USER_STATUS = {
  InitialUserStatus: 1, // 初始状态
  HelpUserStatus: 2, // 助力状态
  CompleteUserStatus: 3, // 可开奖状态
  EndsUserStatus: 4 // 已开奖状态
};
export const STATUS = {
  ProgressStatus: 2, // 进行中状态
  EndsStatus: 4, // 结束状态
  ErrorStatus: 5, // 异常状态
};
复制代码

这样不仅减少了组件中一大堆令人看不懂的数字，提高了维护性和可读性。而且组件之间调用相同的常量状态，较少因为笔误，将状态匹配书写错误。

小程序的实现

本次需求有礼小程序中无新增页面，但需要在现有若干界面中进行改造，需要控制部分元素的显示与否、部分界面新增相关楼层等；同时考虑到春节活动的用户量及用户体验，需要对首页中多tab商品楼层加载缓慢导致首页卡顿问题进行修复。

梳理需求及代码的过程，也是综合考虑新增楼层标识的过程

前后端同时进入开发，在开发前的综合考虑以及接口沟通至关重要。

由于部分界面需要根据礼品卡的标识新增不同的楼层，有些楼层只需判断是否为春晚红包活动，而有些还需要区分普通主题还是活动期间的主题，此时就需要前后端在开发前一起综合考虑礼品卡的标识，之后根据标识各自进入开发。

新增功能类似，对方法进行封装而不是粘贴复制

多个新增楼层涉及到页面跳转，此时不是在页面间粘贴复制而是对方法进行了封装以兼容不同的情况。

function gotoActivity(url) {
  let jumpUrl = url;
  if (jumpUrl && jumpUrl.indexOf("http") == -1) {
    jumpUrl = `https:${jumpUrl}`;
  }
  if (jumpUrl) {
    let url = '/pages/login/wv-common/wv-common?h5_url=' + encodeURIComponent(jumpUrl)
    wx.navigateTo({
      url,
    });
  }
}
复制代码

通过微信开发者工具自带的mock功能模拟接口数据以减轻后期接口联调压力。

多端交互的实现

关注解决问题2：多端交互方案输出

本次视觉稿时间和前端时间部分重合，正好可以利用此空档做多端交互的调研方案。整个流转里有两个主体，1是H5活动页，用来引流；2是京东有礼小程序里的拼手气页面，即主体页面。

从图中拆解为以下几步：

从JD APP的“H5活动页”直接跳转到京东有礼小程序“拼手气页面“；
从JD APP的“H5活动页”分享到微信会话框；
从微信会话框打开微信小程序，并定位到京东有礼小程序里的 H5 活动页；【在第二步中，只要设置好小程序id和路径，微信会处理这次的跳转。】
从微信京东有礼小程序里的 H5 活动页，打开有礼小程序“拼手气页面”。

同时复用老的批量绑卡的逻辑，以及实现有礼小程序里的登录态的打通。

我们这里关注多端交互的实现方法。

跳转1. 从JD APP的“H5活动页”直接跳转到京东有礼小程序“拼手气页面“

因为原生与H5之间有时需要主动交互，例如H5去使用调用原生的功能（比如拍照等），原生去唤起通知H5事件等，所以这里我们借助京东商城WebView，来为我们的红包活动的H5提供了丰富的定制化的能力。

export const gotoMP = (id: string) => {
  //跳转至小程序
  const u = navigator.userAgent;
  let jsonParams = {
    businessType: "jumpToMiniProgram", //string类型，固定字段，必须是这个
    callBackName: "cb", //string类型，h5用来接收callback的方法名称，如h5想在window.callback(jsonStr) 方法中接收回调，此项传值为"window.callback"
    params: {
      username: "gh_xxx", //填小程序原始id(有礼小程序)
      path: `pages/xx/xx?id=${id}`, //拉起小程序页面的可带参路径，不填默认拉起小程序首页
      miniProgramType: 0, //可选。打开开发版，体验版或正式版
    },
  };
  const jsonString = JSON.stringify(jsonParams);
  if (!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
    //iOS
    window.webkit.messageHandlers.JDAppUnite.postMessage({
      method: "notifyMessageToNative",
      params: jsonString,
    });
  } else {
    //Android
    window.JDAppUnite && window.JDAppUnite.notifyMessageToNative(jsonString);
  }
};
复制代码

这段代码基本可以拿去直接使用，完成从JD APP 跳转到小程序的实现。几点注意：

这里要区分好iOS的环境和Android环境，两者调用方式存在差异。
跳转到微信小程序的jsonParams对象下的params中，有个miniProgramType属性。这里0是跳转到线上开发版，2是跳转到体验版
对于ts的警告Property 'webkit & JDAppUnite' does not exist on type 'Window & typeof globalThis',我们需要在xxx.d.ts中进行全局interface Window的声明。

跳转2. 从JD APP的“H5活动页”分享到微信会话框

这里我们借助京东App的分享组件@jmfe/jm-jdshare，来为我们的H5 页面提供简洁的客户端分享接口。

此jnpm不仅支持分享，也支持京口令的功能，感兴趣的童靴可以去查看下：npm.m.jd.com/package/@jm…

import jdShare from "@jmfe/jm-jdshare";
jdShare.setShareInfo({
  title: "快来！你即将错过1888元京东E卡！",
  content: "好友心意专递 速来领取",
  url: window.location.href,
  img: "https://img10.360buyimg.com/imagetools/jfs/t1/175484/6/25230/10720/61d3e626Eac21a76e/de6be01ec69895cd.jpg",
  /**
    * 以下非必填
    */
  channel: "Wxfriends",
  callback: null,
  clickcallback: null,
  qrparam: null,
  keyparam: null,
  timeline_title: "",
  showFriendList: "",
  /**
    * 以下是小程序参数与上面的参数没有关联
    */
  mpId: "gh_xxx",
  mpIconUrl:
    "https://img12.360buyimg.com/imagetools/jfs/t1/101710/27/20890/155471/61e52ebdE1e249fe6/e70a71969319eaa7.jpg",
  mpPath: `pages/login/wv-xx/wv-xx?h5_url=${encodeURIComponent(
    window.location.href.replace("#/", "&source=YLWX"),
  )}`,
  mpType: "0",
  /**
    * 以下是分享有礼参数
    */
  // incentiveBizType: "1",
  // incentiveBizId: "INCENTIVEBIZID_DEMO",
});
复制代码

同样，这段代码也是可以直接拿去使用的一段代码片段。需要注意的是：分享到微信小程序的卡片中，有个mpType属性。为0，点击卡片进入到线上开发版，为2进入到体验版。

跳转3. 从微信京东有礼小程序里的 H5 活动页，打开有礼小程序“拼手气页面”

这里我们借助微信官方的web-view，来作为承载网页的容器。其作为开放能力，官方也是给我们提供了相关的方法（wx.miniProgram.navigateTo）。

这里要注意：跳转的路径最前面要有/，亲测如果没有/的话，根本就跳转不过去。

// <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

// javascript
export const toGiftMiniProgram = (id:string)=>{
  wx.miniProgram.navigateTo({url:`/pages/xx/xx?id=${id}`})
}
复制代码

半路杀进项目，如何快速了解并响应需求？

Concéntrese en resolver el problema 3: cómo agregar personas rápidamente y el efecto de +1>2 después de agregar personas.

El primero debe ser "buen diseño + gestión de módulos por componentes", que ha sentado una base sólida y no se repetirá.

Esta parte se centra en el trabajo y la experiencia de los nuevos alumnos que se incorporaron al proyecto a mitad de camino.

Comprensión del proyecto

El cronograma de este proyecto es relativamente ajustado y hay pocos participantes iniciales. Para asegurar el progreso normal, la intervención de los desarrolladores se incrementó a la mitad. Lo primero que debe hacer es comprender rápidamente la información básica, como los antecedentes del proyecto, el progreso del diseño visual, los nodos clave (desarrollo, prueba y lanzamiento).

Posibles problemas y soluciones

Este desarrollo es responsable de la representación de las dos listas de banners en la parte inferior de la página de actividades, y los datos provienen de la interfaz as. Para obtener la tarea, primero comprenda algunos puntos:

Las tareas involucran una variedad de tareas.Para los desarrolladores front-end, deben comprender los requisitos del producto conectado, el diseño visual, las interfaces de datos y los casos de prueba. Por ejemplo, esta tarea de desarrollo está representada por dos banners independientes, y los datos solo dependen de la interfaz as y no implican la transferencia con el personal de back-end. Para este requisito de lógica independiente y baja dependencia de datos, podemos comenzar de inmediato desarrollo.
Correspondiente al progreso de desarrollo de prd y borrador visual. Si el proceso no está claro, las imágenes cambian con frecuencia o pueden revisarse más tarde. Luego, debe comunicarse activamente con el producto visualmente y confirmar la lógica y el borrador visual. Y haz un buen trabajo.
Las páginas también son componentes. Para los proyectos, el mapeo de la arquitectura general se puede reflejar en el diseño de enrutamiento.Los desarrolladores deben confirmar si la lógica actual se almacena solo en la página o se hace referencia a otras páginas como un componente. Por ejemplo, solo es necesario escribir dos listas de anuncios como componentes.
comunicación personal. La eficiencia del personal de atraque y la confiabilidad de la información determinan el progreso del desarrollo. Si es necesario, la eficiencia de la comunicación se puede mejorar mediante el desarrollo conjunto de salas de conferencias fuera de línea.

Resumir

El lenguaje unificado se toma prestado de DDD y se muestra en forma de diagrama, y la solución general de CodMi-M juega un papel clave en este momento; cuando se realiza la función, se reserva un espacio para facilitar la integración de componentes múltiples. acceso, y también es conveniente para varias personas Apoyar proyectos con menos estrés.

Al mismo tiempo, en el proyecto se precipita la realización de varios componentes y el esquema de salto interactivo.

Lo más importante es que el proyecto se puede entregar en 1 semana, y también se han hecho algunas precipitaciones técnicas y pensando en la entrega de dichos proyectos en el futuro.

Me gustaría agradecer a los pequeños socios del grupo por su cooperación en este artículo~