公共英语三-教材-Unit13-Unit15

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)

Unit 13 Travel