React学习笔记2

整理了下N年前我写的VueSSR学习笔记

[官方文档](https://cn.vuejs.org/guide/scaling-up/ssr)



# 为什么需要SSR(服务端渲染)

1. 主要是为了解决搜索引擎爬虫的问题

> 传统SPA返回的html的body是空dom和一个script引入，爬虫不会等待ajax响应完成填充dom，想要让seo知道你的东西就需要服务端返回完整的html，这就是ssr的用途

2. 它可以提高首屏体验

# 服务端渲染逻辑分析

1. 服务端渲染SSR应用与单页应用SPA仅仅是首屏不一样，
    - SSR应用首屏需要在服务端生成完整的DOM结构，
    - 之后的逻辑页面跳转、Store、Ajax走的都是客户端，与SPA完全相同。
2. 尽管只是首屏一个页面在服务端渲染，但所有页面都可能是首屏，需要处理服务端渲染逻辑。

首屏渲染如何实现呢？

3. 服务端需有一套与客户端相同的机制来处理Ajax请求和模版渲染
    - 服务端请求数据后，对模版进行渲染生成html
    - 然后将html和数据发送到客户端
    - 客户端拿到数据对模版进行校验，并施加交互效果， 这一过程被称为**注水**

服务端渲染与客户端渲染有哪些区别呢？
1. 首先是服务端环境与客户端环境的区别
- 服务端的全局对象是global， 客户端是 window； document, location, setTimeout, 事件监听等在服务端不能运行
- 服务端要根据请求重新生成版本，而客户端天然是多个，不需要考虑该问题
- 生命周期： `data`、 `beforeCreate`、`created`会在服务端执行, `beforeMount`、`mounted`只在客户端执行

Vue官方是如何处理客户端与服务端渲染的差异呢？

官方提供了一个asyncData的钩子
- 如果是首屏渲染，在服务端执行asyncData函数请求数据，然后调用render进行渲染，并将数据挂在到`window.__INITIAL_STATE__`对象上，客户端拿到数据后不再执行asyncData函数，而是从该对象取数据。在执行`beforeCreate`、`created`等钩子。
- 如果不是首屏，在客户端进行渲染，官方脚手架在路由钩子beforeEach进行拦截，执行asyncData钩子，然后在运行之后的生命周期，完成页面渲染。


# VueSSR项目开发的主要工作

- `asyncData`的实现。`asyncData`并不是vue实际的生命周期之一，而是官方项目提供的一种优雅解决服务端渲染问题的方案，会在所有vue生命周期之前调用且在异步（ajax）执行完成后再执行vue的其他生命周期函数，其原理详见`entry-client.js`, `entry-server.js`。
- 避免有状态的单例模式。 试想一下，SPA应用js运行在客户端。js运行产生的数据在不同用户的手机上互不影响。而ssr渲染产生的数据在服务器，如果有单例模式或缓存那么不同用户访问到的数据就一样了，更新也是个问题了（不同时间段返回的内容一样了）。所以前端路由每次请求服务器都要重新生成一份`store`、`router`等继而在渲染页面。

这里有一个N年前我写的[VueSSR的脚手架](https://github1s.com/guojingwen/vue-ssr-scaffold)，内置了一些基本的功能。

# 如何书写通用代码

1. 用store存储数据，ajax请求写在asyncData里面
2. 首屏的数据挂在 window.initStatus 对象上，到了客户端直接读取这个对象获得首屏数据，这样就首页数据就不需要重复请求了
3.  生命周期 
    - 服务端不能用window, document, location, navigator 其全局对象是global; 客户端不能出现仅服务端才能运行的代码 如 global
    - data、 beforeCreate、created会在服务端执行, beforeMount、mounted只在客户端执行
    - 服务端会运行的代码最好不要写定时器
4. 服务端渲染不支持指令，推荐使用组件这种抽象机制


# SSR构建原理


![image.png](/static/img/16ce74477746feeda5f15bb4dfcb6694.image.webp)

由于环境差异问题（服务端使用node进行渲染，客户端是浏览器渲染），客户端与服务端要单独进行打包

1. 如table标签到客户端会动态插入tbody标签
2. 服务端不需要解析CSS
3. 服务端与客户端模块加载机制不同 commonjs/es modules
4. 数据的响应在服务端不是必要的
5. ajax请求，（当然axios已经做了）

**具体实现**

综合上述问题，所以构建的想法为：
1. 使用 webpack 同时打包客户端和服务端应用。
2. 服务端的包会被引入到服务端用来渲染 HTML，
3. 同时客户端的包会被送到浏览器用于激活静态标记

具体实现关键节点、
- 分别指定客户端和服务端构建入口
- 定义一个变量指明工作环境
- 构建配置如编译目标设置
- 分别生成manifest。服务端渲染完成后根据客户端manifest推断并向渲染出来的 HTML 中注入 preload / prefetch 指令、`<link>` 和 `<script>` 标签。
- 路由和代码分离， 服务端每次createRouter，按需加载

**客户端激活**

> Vue 会断言客户端生成的虚拟 DOM 树与从服务器渲染出来的 DOM 结构是相匹配的。如果不匹配，则它会放弃激活的过程，抛弃已生成的 DOM 并从头开始渲染。这会在浏览器控制台产生一个警告，但网站还是能正常工作。

这里其实也是出于性能优化的考虑，除了避免DOM重新渲染，首屏数据也要避免客户端重复请求。<br>
具体实现是需要服务端渲染的数据放在store里面，服务端通过注入JS对象，客户端运行进而接收。


# 常见问题

Q：只想对页面的部分内容进行服务端渲染怎么办？<br>
A：ssr渲染的内容放在 里面，将其放在合适位置即可

Q: 可以某部分页面（如个人中心）不走服务端渲染吗？<br>
A: 将ajax请求放在只会在客户端运行的生命周期即可。如beforeMount、mounted

Q： SSR与预渲染的区别<br>
A： 预渲染构建后生成静态的HTML，而ssr是运行时构建动态的HTML.

VueSSR学习笔记

曾经用过AntV/g2开发过报表相关项目，当记了一点笔记（个人草稿，不推荐阅读）



吐槽一句， 之前用过`Echart` 配置项很繁琐，有些细节的配置要找半天，所以这次用了`antV`，官方声称所谓的**渐进式语法**、**函数式编程**、**声明式API**看起来很美好，但是要学习它的概念，最重要的还是绕不开繁琐的配置项，踩坑挺多的，毕竟图表太复杂了！

这里只是按照我的理解，记录我的理解、感受及遇到的问题， 推荐还是先认真过一遍 [官方文档@antv/g2](https://g2.antv.antgroup.com/)


# 学习笔记
1. 首先需要认真过一下[官网](https://g2.antv.antgroup.com/)， 这是最新版本的文档，重点是了解相关概念。
2. 接着再看一遍[V4版本的文档](https://g2-v4.antv.vision/zh/docs/manual/getting-started)， 貌似文档是不连续的，v5的文档是基于v4的，当时还v5貌似没放出来，所以用的时V4.2
3. 另外再补充一下 [V2版本的官网](https://antv.vision/old-site/g2/doc/index.html)，因为在查问题的时候，包括google搜索、问GPT4、github issues 等很多内容都是V2版本的，比较坑

## 核心概念

G2是一个简介的渐进式语法，主要用于制作基于网页的可视化。它提供一它函数风格式、声明形式的API和组件化的编程规范，希望能帮助用户能快速完成报表搭建的需求


![image.png](/static/img/58f580c9270821cc64b4d65ca324c7b7.image.webp)

- 滚动条 Scrollbar
- 坐标轴 axis
    - <img src='/static/img/ea45fadcf5aeee25d32db681059a0075.image.webp' width=300>
- 图例legend ： 图表的辅助元素，用于图表中数据的筛选。 
    - <img src='/static/img/9e11316106a5bff43193d61670bca27a.image.webp' width=150>
- 提示信息: Tooltip
    - <img src='/static/img/6bfbb92f7eabd1a9972e297be9abec34.image.webp' width=300>
    - 相关事件`tooltip:show`、`tooltip:change`、`tooltip:hide`
- 图形标注 Annotation
    - <img src='/static/img/76f7165092b7e7ad7c263f3169b20bb6.image.webp' width=300>
- 滑块 Slider 
- 滚动条 Scrollbar


视图模型：**视图区域 > 绘制区域 > 主区域 > 内容区域**


tooltip  [官方文档](https://g2.antv.antgroup.com/manual/core/tooltip)

一个复杂案例
```js
.tooltip({
  title: (d) => d[this.config.xKey], // 标题
  items: [(d, index, data, column) => {
    return {
      color: COLORS[dataIndexs.indexOf(d.name)],
      name: d.name,
      value: d.count,
    };
  }], // 数据项
})
```

还有更高级的自定义模版

```js
.interaction('tooltip', {
  // render 回调方法返回一个innerHTML 或者 DOM
  render: (event, { title, items }) => `<div>
    <h4 style="padding:0 0 4px;margin:0;font-weight: normal;color: #999">${title}</h4>
    <ul style="list-style: none;padding: 0;margin:0">
      <li style="display:flex;align-items: center;">
        <span style="background-color: ${items[1].color};height:10px;width:10px;display:inline-block;border-radius:50%"></span>
        &nbsp;${this.config.y1Title}&emsp;&emsp;${items[1].value}
      </li>
      <li style="display:flex;align-items: center;">
        <span style="background-color: ${items[0].color};height:10px;width:10px;display:inline-block;border-radius:50%"></span>
        &nbsp;${this.config.y2Title}&emsp;&emsp;${items[0].value * 100}%
      </li>
    </ul>
  </div>`,
})
```

**legend**

当只有单一指标是不显示图例的，

当有多个指标（分组柱状图、分组折线图）会展示图例

图例的配置

```js
.legend('size', {
  // ...
})
```


图例踩坑
1. 无法跟坐标轴右对齐

网上说 v3 v4版本可以设置offsetX解决，v5（我使用的版本）是 transfrom  [原文](https://github.com/antvis/G2/issues/5635)
然后我试了并没有卵用，

我想到自己绘制图例，由于图例和图表有checkbox效果，这条路太费劲

我又想到自定义图例

2. 自定义的图例文字与图标不能上下对齐

 [可参考这个案例](https://github.com/antvis/G2/issues/5082)
 
 ```js
 .legend({
  color: {
    transform: 'translate(100, 0)',
    itemMarker: (_, index) => () => {
      const { document } = chart.getContext().canvas;
      const image = document.createElement('image', {
        style: {
          width: 20,
          height: 20,
          anchor: '0.5 0.5',
          src: logo[index][1],
        },
      });
      return image;
    },
    itemMarkerSize: 40,
    itemLabelText: (_, index) => logo[index][0],
  },
})
 ```
 
 <img src='/static/img/682c2fa44ab9759b98e295d0508feabd.image.webp' width=300>
 
官方将图例分成两块 图片+ 文字，itemMarker方法里只支持创建image，由于图片和文字无法上下对齐(左右可以调，我偷懒不做demo了)，那么图例就不能放在右上角了

我提了一种居中方案， UI 比较纠结， 还的折腾

```js
.legend('color', {
  layout: { // 当该值为对象时，是flex布局
    justContent: 'center',
    flexDirection: 'column',
  },
})
```

最后将antV版本从5.1.15 升级到 5.1.19，在显示y轴文字的情况下勉强对齐了

3. 滚动条与图例的冲突

分组柱状图、分组折线图会展示图例，当X轴太长是须展示滚动条，当拖动滚动调试图例发生抖动（往上移动了）

解决方案 容器追加样式

```js
new G2.Chart({
  paddingTop: 50,
  paddingBottom: 10,
  marginTop: 10,
})
```
其实还有个问题， X轴和滚动条之间间距太大， 实在没有办法了

# 踩坑

1. 网上很多v2版本的解决方案，与v4不兼容
2. 分组柱状图，柱子之间间距控制 无法控制， 通过设置滚动条解决
3. 滚动条不支持样式自定义，好在 默认效果，UI接受了
4. 没有分组（指标=坐标轴数量）时不显示图例，有分组才显示图例
5. 同时渲染多个相同的图表，滚动条可能无法滚动，解决方案串行渲染
    - 后来发现同时渲染不同的方法也会出问题，我写了一个队列异步渲染的方法
```js
const queue = [];
let isFlushPending = false;
async function queueFlush() {
  if (!isFlushPending) {
    isFlushPending = true;
    await sleep(0);
    for (const it of queue) {
      it.cb();
      await sleep(it.ms);
    }
    queue.length = 0;
    isFlushPending = false;
  }
}
/**
 * 因 antV 同时渲染多张图表时 可能会存在问题
 * 因此每渲染一张图表要等待一定时间再渲染下一张图表
 */
export function queuePostFlushCb(cb, ms = 0) {
  queue.push({ cb, ms });
  queueFlush();
}


// 使用
queuePostFlushCb(() => {
  // todo  渲染图表
}, 100/*渲染时间间隔*/)
```

# 使用技巧
1. 注折混合图， 在同一个图层 多次渲染 得到 柱状图 + 折线图 
2. 滚动轴，需要动态计算轴的占比

# 个人感受
1. ant的函数式编程语法写出的代码相对而言比Echart好一些
2. ant内部却是做了很多事情，比如图例的颜色、换行展示等，它的目标是让开发者更少的配置，但是带来的问题是如果UI有高度自定义的效果实现起来比较困难。

AntV/g2统计图表学习&踩坑笔记

本文要实现的需求如下

通过一个二维码，用户用不同的方式扫码，打开对应的端，具体如下
1. 用APP扫码，打开APP页面（或者通过h5中转在跳转到原生页面）
2. 用微信扫码，打开微信小程序页面
3. 用支付宝扫码，打开支付宝小程序
4. 其他方式扫码（用浏览器或苹果手机扫码器），打开微信小程序

另外要求二维码能携带动态参数



假设二维码对应的链接如下`https://m.warmplace.com/#/scan-qrcode?scheme=${encodeURIComponent("app://warmplace.com/pagea?source=source_xx&shopid=shopid_xx")}`
- 这里`shopid`是动态的

# 浏览器和app扫码的实现

伪代码如下
```html
<script>
// map维护跳转原生链接的最低版本要求和小程序路径关系
const map = {
  // 跳转小程序
  // 示例: https://m.warmplace.com/#/scan-qrcode?scheme=app%3A%2F%2Fwarmplace.com%2Fpagea%3Fsource%3Dsource_xx%26shopid%3Dshopid_xx
  // scheme示例："app://warmplace.com/pagea?source=source_xx&shopid=shopid_xx"
  'app://warmplace.com/pagea': {
    APP_VERSION: '1.0.0',
    MP_HITCH_PATH: 'pages/pagea/pagea',
  },
};

exec();

asyn function exec() {
 /**
   * 1. 首先支付宝和微信环境扫码，通过在小程序后台配置的规则
   * 平台会为我们自动重定向到相应小程序, 所以不会走这里的逻辑
   */
  const { scheme } = this.$route.query;
  let config;
  for (const [key, val] of Object.entries(map)) {
    if (scheme.startsWith(key)) {
      config = val;
      break;
    }
  }
  if (!config) { // 需升级app版本
    await toast.show(`暂不支持该scheme：“${scheme.split('?')[0]}” 请检查`, { duration: 3000 });
    // 调用app bridge方法关闭webview
    bridge.closeWebView();
    return;
  }
  
  // 2. 你公司的app
  if (/your_app_sign/.test(navigator.userAgent)) {
    const { APP_VERSION } = config;
    if (tools.versionCompare(env.appVersion, APP_VERSION) >= 0) {
      window.location.href = scheme;
      // 返回时，不想看到中间页
      setTimeout(() => {
          Native.closeWebView();
      }, 200);
      return;
    }
    await toast.show(`请将APP更新至${APP_VERSION}及以上版本后扫码`, { duration: 3000 });
    Native.closeWebView();
    return;
  }
  // 3. 其他环境 微信小程序
  // 请求后段接口生成小程序链接
  // 示例：window.location.href = 'weixin://dl/business/?t=xxx';
  const { jumpUrl } = fetch('https://api.warmplace.cn/get_mp_url', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        // 'Authorization': 'Bearer your_token_here'
      },
      body: JSON.stringify({
        bizCode: 'xxx',
        query: scheme.split('?')[1] || '', // 把核心参数携带过去
        envVersion: process.env.NODE_ENV !== 'development' ? 'release' : 'develop', // 正式版传release 开发版传develop
      })
  })
  .then(response => {
    // 检查请求是否成功
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    // 解析 JSON 数据
    return response.json();
  })
  .then(data => {
    // 处理返回的数据
    console.log('获取到的数据:', data);
    const {url} = data
    if (url) {
        window.location.href = url;
    }
  })
  .catch(error => {
    // 处理错误
    console.error('请求出错:', error);
  });
}
</script>
```
注： 真正跑通还需要后端开发和APP开发配合。

# 微信扫码打开微信小程序

微信小程序后台配置扫普通二维码

登录微信小程序后台  点击 开发 —> 开发管理 —>  扫普通二维码 —> 添加


![image.png](/static/img/1ba6b7ef21fe57a5ae537c944e774af5.image.webp)

补充说明下

| 字段 | 说明 |
| --- | --- |
| 前缀占用规则 | 不占用（可以设置动态参数） |
| 配置校验文件 | 针对域名来的，需要配置校验文件 |
| 小程序功能页面 | 对应小程序的页面地址 |
| 测试范围  | 开发中选择开发版本，发布后选择线上版本进行验证 |
| 测试链接 | 开发中，必须天完整链接，否则测试无效 |

**支付宝扫码打开小程序**

![image.png](/static/img/44140e119fa92e7f34c86101703dd8a7.image.webp)


| 字段 | 说明 |
| --- | --- |
| 前缀占用规则 | 不占用（支持动态参数 |
| 配置校验文件 | 针对域名来的，需要配置校验文件 |
| 小程序功能页 | 对应小程序的页面地址  |

开发阶段如何测试
1. 支付宝扫体验码， 打开 联调设置 --》联调扫码版本
2. 链接以上面二维码地址为前缀就行了，建议用和微信一样的二维码测试

# 具体方案

由于支付宝和微信的机制差异较大，所以分开来写伪代码

## 支付宝小程序伪代码实现
首先来看支付宝，支付宝扫码打开小程序，参数在app启动时获取，为了通用性（后续可能有扫码打开小程序其他页面的需要），封装一个通用方法`launchStore.ts`，将参数信息存在一个大对象里，通过key(页面路径)取参数信息.

1. 支付宝小程序启动时（app onLaunch）接收到扫码参数信息
```tsx
class App extends Component {
    onLaunch(launchParams: any) {
      dealAlipayLaunchParams(launchParams);
   }
   // ...
}
```

2. launchStore.ts的伪代码
```ts
interface Params {
  ts: number;  
  // key: 小程序页面路径  value: 参数
  [key: string]: PageParams;
  // 示例
  // {source: "source_xx", shopid: "shopid_xx"}
}
export interface PageParams {[key: string]: string;}

// 这个对象用来存储扫码参数信息
const launchParams: Params = {};

export function setLaunchParams(key: string, val: PageParams) {
    this.launchParams[key] = {
        ts: Date.now(), // 辅助销毁参数使用
        ...val,
    };
}
export function getLaunchParams(path: string) {
    return this.launchParams[path]
}
export function removeLaunchParamsByPath(path: string) {
    delete this.launchParams[path];
}

 /**
  * 扫码打开小程序通用方法
  * 注意： 这里只记录小程序参数，是否扫码进入还是普通跳转，业务需要根据参数自行判断
  */
export async function dealAlipayLaunchParams(alipayParams?: any) {
  let params: PageParams = { };
  let scancode_time = '';
  let q = '';
  const  { router } = getCurrentInstance();
  let key = 'never';
  if (!router?.path) return;
  key = router.path;
  if (!key.startsWith('/')){ // 支付宝小程序的路径不以“/”开头，这里统一
    key = `/${key}`;
  }
  q = (alipayParams!.query || {})?.qrCode || '';

  // 更新params
  if (q?.startsWith('https')) {
      const str = q.split('?')[1];
      params = parseUrlParams(str);
      params = parseUrlParams((params.scheme || '').split('?')[1]);
      // 测试桩
      /* setTimeout(() => {
        Taro.showToast({ title : JSON.stringify(params), icon : 'none', duration : 6000 });
      }, 5000); */
   }
   this.launchParams[key] = {
      ...params,
      scancode_time,
      q // 保留原始以便业务处理
   };
}

export function parseUrlParams(search: string) {
    return search.split('&').reduce((sum, item) => {
        const [key, value] = item.split('=')
        sum[key] = decodeURIComponent(value);
        return sum;
    }, {} as {[key: string]: string})
}
```
3. 在业务代码中取参数信息 getLaunchParams(PAGE_PATH)
4. 记得在合适的时机销毁扫码信息
    - 比如 在存入扫码信息的时候设置了一个存入时间ts, 取得时候可以根据当前时间-ts，如果大于某个值如30min, 或者当订单创建的时候销毁

# 微信小程序

微信小程序是在 页面 `onLoad`钩子接收的, 我们可以在`useLayoutEffect`或 `componentWillMount`中调用 `dealWeappPageParams(pageParams);`

当使用浏览器扫码或微信扫码时 打开微信小程序，但是参数格式略有一些区别，伪代码如下

```ts
export async dealWeappPageParams(pageParams?: any) {
    let params: PageParams = { };
    let scancode_time = '';
    let q = '';
    const  { router } = getCurrentInstance();
    let key = 'never';
    if (!router?.path) return;
    
    // 1. 浏览器扫码的场景 打开微信程序
    params = (router?.params || {}) as PageParams;
    // 2. 微信扫码  打开微信小程序
    q = decodeURIComponent(params.q || '');
    ({ scancode_time } = params);
    
  // 更新params
  if (q?.startsWith('https')) {
      const str = q.split('?')[1];
      params = parseUrlParams(str);
      params = parseUrlParams((params.scheme || '').split('?')[1]);
      // 测试桩
      /* setTimeout(() => {
        Taro.showToast({ title : JSON.stringify(params), icon : 'none', duration : 6000 });
      }, 5000); */
   }
   this.launchParams[key] = {
      ...params,
      scancode_time,
      q // 保留原始以便业务处理
   };
}
```

取参数和销毁扫码信息同支付宝。

# 踩坑

扫码打开小程序在微信和支付宝都有坑，

先说下微信的坑

1. 必须是自己的微信扫码，也就是开发者工具和扫码的微信 是同一个人
2. 如果URL参数有调整比如shopid，需要重新执行第三步，然后在扫码
3. android 扫码有坑， 将开发版小程序装入微信后，然后扫码讲道理是能如期打开小程序的，但实际小程序一直在loading, 等他loading 5分钟吧，然后杀死小程序进程杀死微信进程，重启打开微信扫码就正常了


支付宝小程序的坑
1. 在发布平台发布支付宝小程序 体验码，扫码后打开联调设置
    - 联调设置， 点击小程序右上角三个点  --> 点击联调试着 --> 打开开关


 
参考文档：
- [一个二维码同时支持多平台（微信、百度、字节、支付宝）小程序](https://www.zhuige.com/news/296.html)
- [微信 扫普通链接二维码打开小程序](https://developers.weixin.qq.com/miniprogram/introduction/qrcode.html)
- [支付宝 关联普通二维码](https://opendocs.alipay.com/b/04ne6i?pathHash=96e14d44)

Taro小程序实现一码打开多端方案

今天要实现一个下图的效果(常用在出行小程序中)

| 微信IOS小程序 | 微信Android小程序 | 支付宝IOS小程序 | 支付宝Android小程序 |
| --- | --- | --- | --- |
| ![ios_wx.gif](/static/img/f29ddd9ba3ccdeb507a72875b203d853.ios_wx.gif) | ![android_wx.gif](/static/img/a4d12c8a035cce2ffb0cc7ac7b21375c.android_wx.gif) | ![ios_alipay.gif](/static/img/56041d6b0b54cf4133739017a2cd4d9c.ios_alipay.gif) | ![android_alipay.gif](/static/img/ec9b0931983fc1bdc7b2d45f7c663e03.android_alipay.gif) |

这个两层滚动的效果看似简单，但是由于小程序机制及兼容性问题，实现起来却到处是坑。



# 功能拆解
1. 涉及两层滚动

外层（整个页面）滚动是下方卡片内容拉上去覆盖地图，可自动吸附；<br>
当卡片吸附后开启内层滚动（卡片中的内容滚动）

2. 具体规则

如果上拉，先触发外层滚动，自动吸顶；接着上拉，触发内层滚动。<br>
如果下拉，先滚动内层，内层ScrollView的scrollTop=0时，接着下拉触发外层滚动，自动吸附。

3. 导航头特效


| 卡片未吸附时 | 卡片吸附后 | 卡片中内容往上滚动一段距离 |
| --- | --- | --- |
|![image.png](/static/img/11624157b127fcff45b11e40bdf0be4e.image.webp)|![image.png](/static/img/d653722e1e4056d34e6f89cb9780490c.image.webp) | ![image.png](/static/img/d261a3161723cc94d4cff03364d08c14.image.webp)|

4. 其他要求

- 第二层滚动卡片的高度是动态的，可能不足70vh，可能刚好100vh多一点（有滚动），也可能很长很长（远超过100vh）
- 卡片的内容是定时更新的，可能每隔3s或5s，更新后卡片内容的高度可能发生变化
- 初始化可能卡片吸附可能不吸附，业务逻辑（订单类型）决定

# 小程序实现的难点

1. 对于h5来说，可以通过`preventDefault()`、`stopPropagation()`在滚动过程中控制是否阻止默认事件和冒泡事件，再结合css的`translate`可以实现虚拟滚动、惯性滚动的效果（如IScroll.js）及长列表的优化（无限滚动）。但是对于小程序来说，如有双线程隔离，必须事先声明（是否阻止冒泡），而不是滚动过程中条件控制。

2. IOS粘性回弹效果，如果在回弹效果是进行手势操作，会有事件击穿的效果
> 具体来说情况是这样的<br>
> 当卡片吸附后，卡片内容滚动接近滚动到底，<br>此时来一个快速回马枪（快速上拉， 待回弹没有消失，快速下拉，这时会触发外层滚动）<br>
> 用户就看到一个尴尬的页面状态。

3. 微信小程序的`<ScrollView>`组件，要避开`<ScrollView>`的重新渲染，因为这样会导致滚动的位置会丢失（scrollTop=0）.

4. 支付宝小程序不支持catchMove（阻止事件冒泡）也就是对里面`<ScrollView>`进行上拉或下拉操作，外面一层（页面）也会触发滚动。

5. 由于小程序双线程机制，要控制`setData`的频次，否者在拖动过程中会看到页面抖动很厉害！

# 为什么不用`<movable-view>`、`<movable-area>`?

之前团队有人用`<movable-view>`、`<movable-area>`实现过，但是有一些难以修复的bug及其他体验问题

1. 卡片吸顶后，下拉漏出地图，这个没有跟手势的效果，是因为`<movable-view>`、`<movable-area>`没这个能力，通过一个hack方案判断首饰方向实现的

2. 卡片吸顶后，下拉，地图拉不出来，这个是小程序双线程问题，记录的`scrollTop`有误差，即使用上`upperThreshold`、`onScrollToUpper`缓解，当内容过长且快速滚动，可以说仍旧必现！

3. 由于卡片高度动态变化，`<movable-view>`、`<movable-area>`要进行适配，加上小程序双线程机制，查询卡片高度很耗性能。

4. 支付宝小程序不支持`catchMove`，使得在同一个组件实现这个效果使得逻辑混乱（逻辑难以解耦）

5. 老得组件夹杂其他功能--配置多段吸附。

由于以上上述原因不止是代码量巨大（单js就800行左右），加上有一些页面在用， 使得该组件难以修复bug，难以维护。因此我重新写了一个组件。

# 实现思路

简单说一下思路

1. 外层滚动我其实是利用小程序页面滚动，地图和卡片内容是绝对定位，监听手势自动吸附。

2. 卡片吸附后开启内层滚动，在内层滚动的过程中微信通过`catchMove`控制不触发外层滚动，而支付宝是通过hack的方式实现（状态判断）

3. 前面讲过由于小程序双线程机制，导致`scrollTop`记录不准确，未避免地图拉不出来的情况，通过判断用户下拉的距离大于`scrollTop`，就将`scollTop`置为0，且拉出地图

4. 是否吸附、卡片`scrollTop`在组件（`TwoScroll`）自身维护（是否吸附的初始状态由业务层告知，组件取默认值），通过事件通知业务层，业务层维护导航头状态。

5. 组件支持配置卡片左上方Icon和右上方Icon，地图高度是业务层控制实现

核心思路是这样。

# 代码实现

- 页面配置`scroll.config.ts`
```ts
export default definePageConfig({
  navigationBarTitleText: '',
  navigationStyle : 'custom',
  transparentTitle: 'always'
})
```
- 页面代码`scroll.tsx`
```tsx
import { View } from "@tarojs/components";
import MyNav from '../../components/MyNav';
import { useEffect, useState } from "react";
import './index.scss'
import TwoScroll from "../../components/TwoScroll";
import Taro from "@tarojs/taro";

let _showTitle = false;
let _lintType: 'top' | 'middle' = 'middle';
const MyPage = () => {
    const [lintType, setLineType] = useState<'top' | 'middle'>(_lintType);
    const [showTitle, setShowTitle] = useState(_showTitle);
    useEffect(() => {
        const event = Taro.eventCenter;
        event.on('line-type', (type: 'top' | 'middle') => {
            if(_lintType !== type) {
              _lintType = type;
              setLineType(type);
            }
        });
        event.on('scroll-top', (scrollTop) => {
            if(scrollTop > 50 && !_showTitle) {
              _showTitle = true;
              setShowTitle(true);
            }
            else if(_showTitle && scrollTop <= 50) {
              _showTitle = false;
              setShowTitle(false);
            }
        })
        return () => {
            event.off('line-type');
        }
    }, []);

    const [time, setTime] = useState(new Date().getSeconds());
    useEffect(() => {
        const timer = setInterval(() => {
            setTime(new Date().getSeconds());
        }, 1000);
        return () => {
            clearInterval(timer);
        }
    }, []);
    const backgroundColor = lintType !== 'top' ? 'transparent' : '#fff';
    return <View className="p-scroll">
        <MyNav style={{backgroundColor}} hideBackIcon={process.env.TARO_ENV === 'alipay'}>
            {showTitle ? 'scrollTop大于50 展示标题' : ''}
        </MyNav>
        <View className="p-scroll__map">
            地图 fixed to top of 30%
        </View>
        <TwoScroll
            leftNode={<View className="p-scroll__left">Icon-1</View>}
            rightNode={<View className="p-scroll__right">Icon-2</View>}
            top={300}
        >
            { lintType === 'top'
                ? <MyNav className='p-scroll__nav-placeholder' hideBackIcon={process.env.TARO_ENV === 'alipay'}></MyNav>
                : null
            }
            <View style={{lineHeight: '20vh', backgroundColor: '#fec', textAlign: 'center'}}>20vh</View>
            <View style={{lineHeight: '30vh', backgroundColor: '#ecf', textAlign: 'center'}}>30vh--模拟页面刷新--{time}</View>
            <View style={{lineHeight: '10vh', backgroundColor: '#f8c', textAlign: 'center'}}>10vh</View>
            <View style={{lineHeight: '30vh', backgroundColor: '#ecf', textAlign: 'center'}}>30vh--模拟页面刷新--{time}</View>
            <View style={{lineHeight: '20vh', backgroundColor: '#9ec', textAlign: 'center'}}>20vh</View>
            <View style={{lineHeight: '20vh', backgroundColor: '#bac', textAlign: 'center'}}>20vh--模拟页面刷新--{time}</View>
            <View style={{lineHeight: '30vh', backgroundColor: '#ecf', textAlign: 'center'}}>30vh</View>
            <View style={{lineHeight: '20vh', backgroundColor: '#bda', textAlign: 'center'}}>20vh--模拟页面刷新--{time}</View>
            <View style={{lineHeight: '10vh', backgroundColor: '#999', textAlign: 'center'}}>10vh</View>
        </TwoScroll>
    </View>
};

export default MyPage;
````

- 页面scss `index.scss`
```scss
.p-scroll {
    &__map {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 45vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #eee;
    }
    &__left, &__right {
        position: absolute;
        top: -80rpx;
        height: 60rpx;
        width: 120rpx;
        background-color: transparent;
        color: white;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10rpx;
    }
    &__left {
        left: 20rpx;
        background-color: red;
    }
    &__right {
        right: 20rpx;
        background-color: blue;
    }
    &__nav-placeholder {
        position: static;
        background-color: transparent;
    }
    .my-nav {
        background-color: transparent;
    }
}
```

- 组件`TwoScroll.tsx`
```tsx
import React from "react";
import Taro from "@tarojs/taro";

import { BaseEventOrig, BaseTouchEvent, ITouch, ScrollView, ScrollViewProps, View } from "@tarojs/components";

import './TwoScroll.scss';

const defaultTop = 300;
const touchStartPoint = {
    clientX: 0,
    clientY: 0
}

interface IProps {
    leftNode?: React.ReactNode;
    rightNode?: React.ReactNode;
    children?: React.ReactNode;
    top?: number;
}
class TwoScroll extends React.Component<IProps> {
    state: Readonly<{
        top: number
    }>;
    isOnBottom = false;
    scrollTop = 0;
    constructor(props: IProps){
        super(props);
        this.state = {
          top: this.props.top || defaultTop,
        }
    }

    touchStart = (e: BaseTouchEvent<ITouch>) => {
        const point = e.changedTouches[0];
        const {clientX, clientY} = point;
        console.log(clientX, clientY);
        Object.assign(touchStartPoint, {
            clientX,
            clientY
        });
    }
    
    touchEnd = (e: BaseTouchEvent<ITouch>) => {
        const point = e.changedTouches[0];
        const {clientX, clientY} = point;
        const diffX = clientX - touchStartPoint.clientX;
        const diffY = clientY - touchStartPoint.clientY;
        if(Math.abs(diffY) < Math.abs(diffX)) {
          console.log('水平滑动');
          return;
        }
        if(Math.abs(diffY) < 30) {
          console.log('没有触发阀值');
          return;
        }
        if(diffY < 0) {
          // 上拉
          if(this.state.top !== 0) {
            this.setState({
              top: 0,
            });
            Taro.eventCenter.trigger('line-type', 'top');
          }
          return;
        }
        // 下拉
        if(diffY > this.scrollTop) {
          this.setState({
            top: this.props.top || defaultTop,
          });
          Taro.eventCenter.trigger('line-type', 'middle');
        }
    }
    onScroll = (e: BaseEventOrig<ScrollViewProps.onScrollDetail>) => {
        this.scrollTop = e.detail.scrollTop;
        Taro.eventCenter.trigger('scroll-top', this.scrollTop);
    }

    /**
     * hack alipay
     * 以为支付宝小程序不支持catchMove,
     * 为了解决内部Scroll触发外层滚动。
     */
    onScrollToLower = () => {
      this.isOnBottom = true;
    }
    onScrollToUpper = () => {
      this.isOnBottom = false;
    }
    onScrollTouchEnd = (e: BaseTouchEvent<ITouch>) => {
      if(this.state.top === 0 && this.isOnBottom){
        e.stopPropagation();
      }
    }
    /* hack alipay end */
    
    render(): React.ReactNode {
        const { leftNode, rightNode, children } = this.props;
        const {top} = this.state;

        return <View className="two-scroll"
            style={{top: `${top}px`}}
            onTouchStart={this.touchStart}
            onTouchEnd={this.touchEnd}
            catchMove
        >
            {leftNode}
            {rightNode}
            {
              process.env.TARO_ENV === 'alipay' ? <ScrollView
              className="two-scroll__scroll"
              scrollY={top === 0}
              onScrollToLower={this.onScrollToLower}
              onScrollToUpper={this.onScrollToUpper}
              onTouchEnd={this.onScrollTouchEnd}
              onScroll={this.onScroll}
            >
              {children}
              </ScrollView> : <ScrollView
                className="two-scroll__scroll"
                onScroll={this.onScroll}
                scrollY={top === 0}
              >
                {children}
              </ScrollView>
            }
        </View>

    }
}

export default TwoScroll;
```
- 组件`TwoScroll.scss`
```scss
.two-scroll {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: transparent;
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;
    transition-timing-function: linear;
    transition-duration: 300ms;
    &__wrap {
      max-height: 100vh;
      width: 100vw;
    }
    &__scroll {
      max-height: 100vh;
      width: 100vw;
    }
}
```

**其他辅助代码** 
- `MyNav.tsx`
```tsx
import { View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import './MyNav.scss'

const info = Taro.getSystemInfoSync();
const statusBarHeight = info.statusBarHeight || info.safeArea?.top || 40;
const menu = Taro.getMenuButtonBoundingClientRect();
const navConHeight = menu.height + 2 * (menu.top - statusBarHeight);

// const statusBarHeight = 47;
// const navConHeight = 40;

const MyNav = (props: {
  hideBackIcon?: boolean;
  children?: React.ReactNode;
  title?: string;
  className?: string;
  style?: React.CSSProperties;
}) => {
  return <View style={props.style} className={`my-nav ${props.className || ''}`}>
    <View className="my-nav__statusbar" style={{height: `${statusBarHeight}px`}} />
    <View className="my-nav__content" style={{height: `${navConHeight}px`, paddingLeft: process.env.TARO_ENV === 'alipay' ? '30px' : '0px'}}>
      {
        !props.hideBackIcon ? <View className="my-nav__icon">🔙</View> : null
      }
      {
      props.children ? props.children :
        props.title ? <View>{props.title}</View> :null
      }
    </View>
  </View>
}

export default MyNav;
```
- `MyNav.scss`
```scss
.my-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  background-color: white;
  &__statusbar {
    width: 100vw;
  }
  &__content {
    width: 100vw;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
  }
  &__icon {
    margin-right: 20rpx;
  }
}
```

最后还是的承认一下，新组件接入还是有一些成本的，但这个是特殊业务场景决定的。组件+demo 才200行，不只维护成本也大大降低，更是解决了老组件的难以解决bug。