本文要实现的需求如下

通过一个二维码，用户用不同的方式扫码，打开对应的端，具体如下
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. 涉及两层滚动

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

2. 具体规则

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

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。

Taro实现一个出行小程序拖拽滑动的特效

本文以`taro@3.3.3`、`react@16.10`讲解Taro开发小程序的生命周期，
- 页面生命周期
- 组件生命周期
- APP生命周期
- 错误处理钩子

[Tarojs官网](https://docs.taro.zone/docs/)


# 页面生命周期

## 初始化

class页面组件初始化时生命周期

```tsx
import React from 'react';
import { View } from '@tarojs/components';
class Index extends React.Component {

 // 可以使用所有的 React 生命周期方法
 constructor(...args: any[]) {
 console.log('1. constructor 仅初始化执行一次');
 super(args);
 }
 componentWillMount() {
 console.log('2. componentWillMount 仅初始化执行一次', getCurrentInstance().router?.params);
 }
 componentDidMount() {
 console.log('4. componentDidMount 仅初始化执行一次');
 }

 // 小程序生命周期 onLoad
 onLoad(options: unknown) {
 console.log('5. onLoad 仅初始化执行一次', '这里能拿到页面参数', options);
 }
 
 // 小程序生命周期 onShow
 onShow() {
 console.log('6. onShow');
 }

 // 小程序生命周期 onReady
 onReady() {
 console.log('7. onReady 仅初始化执行一次');
 }
 

 render() {
 console.log('3. render');
 return <View className='index' >
 <View>AAAA</View>
 </View>;
 }
}

export default Index;
```
:::tip{title=补充}
关于页面参数，Taro非常灵活，可以在任意生命周期钩子 如 constructor中获取页面参数
:::

```tsx
import { getCurrentInstance } from '@tarojs/taro';

class Index extends React.Component {

 constructor(...args: any[]) {
 console.log(getCurrentInstance().router?.params);
 super(args);
 }
}

export default Index;
```

## 更新时
```tsx
import React from 'react';
import { View } from '@tarojs/components';

class Index extends React.Component {

 state = {
 count : 0,
 }
 shouldComponentUpdate() {
 console.log('1. shouldComponentUpdate', this.state.count === 2);
 if (this.state.count === 2) {
 return false;
 }
 return true;
 }
 componentWillUpdate() {
 console.log('2. componentWillUpdate 随页面或子组件更新执行多次');
 }
 componentDidUpdate(prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any): void {
 console.log('4. componentDidUpdate 随页面或子组件更新执行多次');
 }

 render() {
 console.log('3. render');
 return <View className='index' >
 <View>{this.state.count}--</View>
 </View>;
 }
}

export default Index;
```
注意事项
1. 这里面没有再列初始化的生命周期， 它们晚于初始化的生命周期
2. shouldComponentUpdate 返回false 会阻断后面的生明周期执行

## 卸载时

小程序还有两个生命周期`onShow`、 `onHide` 对应`taro`页面组件中的`componentDidShow`和`componentDidHide`
- `componentDidShow`会在小程序切到前台， 返回当前页面执行
- `componentDidHide`会在小程序切到后台， 或者跳转到其他页面执行

class页面组件卸载时生命周期
```tsx
import React from 'react';
import { View } from '@tarojs/components';

class Index extends React.Component {

 
 onUnload() {
 console.log('onUnload'); // 实测这里不会触发
 // 一般情况下建议使用 React 的 componentWillUnmount 生命周期处理页面卸载时的逻辑。
 // 当某些特殊情况需要在页面的 onUnload 的同一个事件循环中实现逻辑时才使用它（如对小程序的生命周期执行顺序有强依赖关系时）
 }

 // 小程序生命周期 onHide
 componentDidHide() {
 console.log('onHide');
 }

 componentWillUnmount() {
 console.log('componentWillUnmount');
 }

 render() {
 return <View className='index' >
 <View>AAAA</View>
 </View>;
 }
}

export default Index;
```

页面卸载有两种场景
1. 页面重定向
2. 返回前一个页面

以上两种场景小程序的处理逻辑一致，实测表现如下
- 微信小程序 和支付宝小程序 都不会触发小程序的 onUnload，所以我们只能用 componentWillUnmount
- 当微信小程序会触发 componentWillUnmount
- 支付宝小程序会依次触发componentDidHide、componentWillUnmount

注意一个特殊场景： 当页面重定向到自身页面，会先触发这个页面的卸载，然后重新执行这个页面的初始化生命周期

## react16.4新增生命周期
我们知道`react16.4`新增了两个生命周期`static getDerivedStateFromProps` 和 `getSnapshotBeforeUpdate`
- `static getDerivedStateFromProps`
 - 它会取代了 `componentWillMount`、 `componentWillUpdate`、 `componentWillReceiveProps`
- `getSnapshotBeforeUpdate`
 - 在`render`之后，在`componentDidUpdate`之前。
 - 在最近⼀次渲染输出(提交到 DOM 节点)之前调用。它使得组件能在发生更改之前从 DOM 中捕获⼀些信息(例如，滚动位置)。

## 小程序的其它钩子
```tsx
import React from 'react';
import { View } from '@tarojs/components';

class Index extends React.Component {
 // 对应 onPullDownRefresh，
 // 除了 componentDidShow/componentDidHide 之外，
 // 所有页面生命周期函数名都与小程序相对应
 onPullDownRefresh() {
 console.log('onPullDownRefresh');
 }
 render() {
 return <View className='index' >
 <View>AAAA</View>
 </View>;
 }
}

export default Index;
```

## 函数组件生命周期

函数组件，页面生命周期
```tsx
import React, { useEffect, useState } from 'react';
import { View } from '@tarojs/components';
import { useReady, useDidShow, useDidHide, usePullDownRefresh } from '@tarojs/taro';

function Index() {
 // 可以使用所有的 React Hooks
 const [count, setCount] = useState(0);
 useEffect(() => {
 // 相当于componentDidMount
 console.log('useEffect 1');
 const timer = setInterval(() => {
 setCount((_count) => {
 const newCount = _count + 1;
 if (newCount === 2) {
 clearInterval(timer);
 }
 return newCount;
 });

 }, 1000);
 return () => {
 // 相当于 componentWillUnmount
 console.log('clear 1');
 };
 }, []);
 useEffect(() => {
 // 相当于componentDidMount + componentDidUpdate(有依赖项的情况)
 console.log('useEffect 2');
 }, [count]);

 /* 对应 onLoad Taro v3.5.0+ 开始支持
 useLoad(() => {
 console.log('onLoad');
 }); */
 // 对应 onReady
 useReady(() => {
 console.log('useReady');
 });

 // 对应 onShow
 useDidShow(() => {
 console.log('useDidShow');
 });

 // 对应 onHide
 useDidHide(() => {
 console.log('useDidHide');
 });

 // Taro 对所有小程序页面生命周期都实现了对应的自定义 React Hooks 进行支持
 // 详情可查阅：【Hooks】
 usePullDownRefresh(() => {});

 return <View className='index' >
 <View>XX</View>
 <View>{count}</View>
 </View>;
}

export default Index;
```

这里我们对标一下页面组件
- 初始化时的 `constructor`和`componentWillMount` 钩子没有了
- 小程序的钩子 `useLoad` 目前项目不支持，需要升级 `taro` 至`3.5+`
- 更新时
 - 没有`shoudleComponentUpdate`，
 - 你需要对`state` 进行`diff` 决定是否`setData`
 - 对于`props`变更需要在父组件同级使用 `useMemo`包裹子组件
 - 没有`componentWillUpdate`
 - `useEffect`的第二个参数是更新依赖，相当于`componentDidUpdate`
- 卸载时 `useEffect`的返回函数 对应 `componentWillUnmount`


# 组件生命周期

组件的生命周期钩子与页面相比 
- 少了小程序的页面级别钩子`onLoad`、`onReady`、`onShow`、`onHide`
- 多了一个`componentWillReceiveProps`钩子
 - 如果`props`改变，会依次触发
 - `componentWillReceiveProps`、`shouldComponentUpdate`、`componentWillUpdate`、`render`、`componentDidUpdate`
- 父子组件钩子的执行顺序
 - 初始化时![image.png](/static/img/bc8f9f7563d4385a04f1a453404b0fd0.image.webp)
 - 更新时顺序![](https://blog.warmplace.cn:11443/static/img/b933bb435cf00f68aa85f32b1c1880c0.image.webp)
 - 卸载时 先卸载父组件，再卸载子组件；支付宝小程序页面组件多一个 `componentDidHide`
- `static getDerivedStateFromProps`会替代三个`will`，比页面级组件多了一个`componentWillReceiveProps`

# 错误处理钩子

`react`有两个处理错误的生命周期 `static getDerivedStateFromError`和`componentDidCatch` 它们的作用是
- `static getDerivedStateFromError` 它将抛出错误错误并返回一个值以更新`state`， 通常是UI降级使用
- `componentDidCatch` 处理副作用 如错误上报


以下面的代码,在taro3.3中实测

```tsx
import React from 'react';
import { View } from '@tarojs/components';
import ClassComp from './ClassComp';

class Index extends React.Component {
 state = {
 isError : false,
 }
 
 static getDerivedStateFromError() {
 // 此生命周期在后代组件抛出错误后被调用。它将抛出错误错误并返回一个值以更新state;
 console.log('static getDerivedStateFromError--');
 return {
 isError : true,
 };
 }
 componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
 // 主要用于副作用提交 如错误上报
 console.log('componentDidCatch--');
 }


 render() {
 return <View className='index' >
 <View>AAAA</View>
 {/* 子组件我做了特殊处理 渲染三秒后就报错 */}
 {this.state.isError ? '遇到了错误' : <ClassComp count={this.state.count}></ClassComp>}
 </View>;
 }
}

export default Index;
```

实测结果如下
- `static getDerivedStateFromError`能捕捉子组件中同步渲染的错误。
- 页面及子组件中异步的错误将被 `Taro.onError`捕获到。
- 如果页面在渲染过成功发生同步报错，没办法捕获，会进紧接着触发页面的卸载`componentWillUnmount`以及子组件的卸载`componentWillUnmount`
- 如果想捕获页面级错误有什么办法呢？可以在app.tsx中捕获吗？
- 在支付宝小程序中当跳转到不存在的页面，`Taro.onError`也会捕获到.
- app的`onUnhandledRejection`可以捕获页面及子组件的Promise报错

:::tip{title=总结}
- 页面中同步渲染过程出现错误尤其要注意！！因为没有狗子能捕获它
- 可以通过封装一个`ErrorBound`组件包裹子组件，时期能恢复过来
:::

ErrorBound.tsx
```tsx
import React from 'react';
import { View } from '@tarojs/components';

class Index extends React.Component<{children: React.ReactNode}>{
 state = {
 isError : false,
 }
 componentWillUnmount(): void {
 console.log('ErrorBound componentWillUnmount');
 }
 
 static getDerivedStateFromError() {
 return {
 isError : true,
 };
 }
 componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
 // 主要用于副作用提交 如错误上报
 console.log('ErrorBound componentDidCatch--');
 }
 restore = () =>{
 this.setState({isError: false})
 }


 render() {

 return <View className='index' >
 <View>ErrorBound</View>
 {this.state.isError ? <View onClick={this.restore}>遇到了错误，点击重试</View> : this.props.children}
 </View>;
 }
}

export default Index;
```


# APP生命周期

```tsx
import React, { Component } from 'react'

class App extends Component {
 // 可以使用所有的 React 生命周期方法
 componentDidMount() {
 console.log('1. APP componentDidMount');
 }

 // 对应 onLaunch
 onLaunch(launchParams) {
 console.log('2. APP onLaunch');
 }

 // 对应 onShow
 componentDidShow() {
 console.log('3. APP componentDidShow');
 }

 // 对应 onHide
 componentDidHide() {
 console.log('APP componentDidHide');
 }

 // Taro v3.5.0+ 开始支持
 // onError (error) {}

 // Taro v3.5.10+ 开始支持
 // onUnhandledRejection (Object){}

 render() {
 // 在入口组件不会渲染任何内容，但我们可以在这里做类似于状态管理的事情
 return this.props.children
 }
}

export default App
```
我测试了下有以下结论
1. APP的生命周期执行顺序 `componentDidMount`、`onLaunch`、`componentDidShow`, APP的生命周期早于页面的生命周期
2. `app.tsx`里面不要写任何模版内容 除了`context`， 因此对应`React`页面更新的钩子，都不能用
3. `onPageNotFound` 启动时页面不存在（测试微信会触发，支付宝不知道怎么测）
 - 跳转一个不存在的页面，不会触发
 - 这个应该是打开小程序时页面不存在触发

Taro小程序生命周期

- I just finished a PETS3 examination yesterday, and I just arrived home in the evening yesterday。 
- Now, I plan to write an article to summary the examination and think about what to do next. The following is the brief information.
 - the reason why I try to pass the PETS3 examination.
 - preparation before the exam: sign up, buy textbooks, time schedule, scheduling
 - question format
 - study plan, learning methods, process.
 - exam process
 - next plan: find a front-end development job opportunities.
- This is my first attempt at writing a blog in English, learning English I mean it. I try to write blog in English as much as possible, although it takes a lot of time at first, things will gradually get better.

- 昨天我刚刚完成了PETS3考试，昨天晚上刚回到家。
- 现在，我计划撰写一篇文章来总结检查并考虑下一步该做什么。以下是主要内容。
 - 报考PETS3考试的原因；
 - 考试前准备：注册、买书、时间安排、行程安排；
 - 试题格式；
 - 我的学习计划、学习方法及过程；
 - 考试过程
 - 下一步的打算：寻找前端开发的工作机会。
- 这是我第一次尝试用英语写博客，学习英语，我的意思是。我尝试尽可能多地用英语写博客，尽管起初需要大量时间，但事情会逐渐变得更好。


下面的内容以英文的形式呈现， 如果你感兴趣但英语不好，请找一些浏览器插件或翻译吧。



# Reason
In March last year, I found a job of front-end development in Shanghai。 Due to the changing times, this may be the last stop of my career. I worked very hard to familiarize myself with the project, optimize the performance of the mini program, and optimize the quality and efficiency of project development, but I found it difficult to give full play to my potential. After about 7 months, I decided to leave the company. I stayed in that company for 8 months. I know the economy is bad, I know a programmer's career is short, the Chinese Internet companies don't seem to welcome programmers over 35 years old, or even 32 years old. But I enjoy programming. Compared with those excellent computer science graduates, I have strong ability of computer programming, which those they can't learn in three to five years. I am not afraid of being tired, I don't care about salary that much anymore (about this issue I will talk about later). Those were the reasons why I decide to take a chance. 

But what is the relationship between finding a job and learning English?

The computer was invented by Americans, all computer languages are designed in English, and many new technical articles and software documentations is English, and when looked for a job early last year, I found that many positions required English skills. so I desided to learning English and try to got a certificate.

But there is one thing I cannot ignore about the impact of AI: Is learning English really useful?

> This is a real story that you and I must face bravely. 
> [Japanese art student suicide](https://news.qq.com/rain/a/20230802A09TVK00) 
> ![image.png](/static/img/ebdf063c8768f18186cb4d6f98caa741.image.webp)

Today, AI technology can easily complete real-time translation between any two languages. Is learning English still meaningful?

Here are some reasons that learning English is necessary.
1. English is a language which logic is strictly forbidden, If you translate it to Chinese by machine or software, it will lose or misunderstand some extra infomations, such as tense、voice and mood, and etc.
 
For instance: "It is the time you went to bed.", google translate, baidu translate, deepseek and x.ai don't translate it exactly.

![image.png](/static/img/dc4de90787b33a712e0ce8e40386da53.image.webp)
![image.png](/static/img/afaa039d457d47f581910fdf75bee9e6.image.webp)
![image.png](/static/img/0b3480d4bb74266398fc473175240ae7.image.webp)
![image.png](/static/img/593e9761c929bf2a308c02acc35f5a84.image.webp)

The exactly meaning is "你早该睡觉了"！ The implicit meaning is：“这个人平时在这个时候已经在睡觉了”。 

Similar examples include:

| English | Chinese | diff |
| --- | --- | --- |
| Lu Xun was a writer | 鲁迅是一名作家 | 在英语语法中**对已故之人的描述要用一般过去时**，而非一般现在时； 当然这句话也不是说鲁迅过去是作家，现在就不是了。 |
| If he had time, he could go with us. | 如果他有时间，他可以和我们一起去。 | 这句话的英语语法是虚拟语气，隐含一层意思是：**他其实没有时间！** |
| He could swim when he was five | 他五岁时就会游泳 | 这句话用could时表示的是他过去的能力，而非现在，**至于他现在会不会，不得而知**，试体会一下 |
| I have gone to Shanghai | 我去上海了 | 这句话用现在完成时，隐含对现在的影响 “所以你现在找过到我” |
| I went to Shanghai | 我去了上海 | 这句话用一般过去式，表示我过去去过，但现在可能已经回来了 |

and so on ...

Quoting a famous quote from Beijing University professor Xiao Zhen:

"We say knowledge changes destiny, but a superficial understanding of knowledge may make your destiny worse!"
(我们说知识改变命运，但是对知识的一知半解可能会是你的命运更差！)

I would like to add that this statement is especially true in the financial field.

If you are an experienced software engineer, you may agree that the quality of code written by different people is different results, and there are many codes that are gegative assets, and some bosses may not realize this problem, especially those who don't know programming.



2. AI is expensive, especially chatGPT5 is difficult to produce. [AI is not a good business](https://www.ruanyifeng.com/blog/2024/12/weekly-issue-328.html) 


Althouth deepseek has significantly reduced costs. but compared with ChatGPT, I feel it has may shortcoming, such as slow response, unstable service, and other languages (besides Chinese) issues can't deal well, and some answer I dissatisfaction.

3. This year's PETS3 paper has an article about that learning mutiple languages can delay certain diseases. I just checked.

> <img src="/static/img/1a5a28009b9c17d6e022546803fd0afb.image.webp" width=500>

Finally, I make a summary.

I can't make out whether it's too late to learn English now because that AI evolution too fast! Just like some postgraduates who find that they can't find a better job than those who graduated with a bachelor's degree in three years. 

But I don't regret. I try to use the fastest time to pass the PETS3. Life is an experience. Some people may consider that life is all about eating, drinking and having fun, but I have my own ideas. Even if I'm dealt a bad hand, I will still play it seriously.(即使拿到一手烂牌，也要认真的玩下去) .


# Preparation

## Introduction
The brief introduction of PETS3 
- You can understand like this, PETS3 equals CET4, PETS4 equals CET6.
- Once you have graduated from college, you can only apply for PETS.
- There are two opportunities to apply for the exam each year. one is in March, the other is in September.
- You can follow some WeChat public accounts
 - 公共英语等级考试
 - 各省公众号：浙江考试、江苏招生考试
 - [中国考试网](https://www.neea.edu.cn/) [全国英语等级考试](https://pets.neea.edu.cn/)

## Schedule
The examination schedule is as follows.
- December 26th, open register.
- open sign up from 6 o'clock 7th January to 9th January
- Print Admission Ticket: 12th March
- Exam Date: 22nd March - 23rd March
- Result Query: about early May.

这段内容很重要我翻译下

考试时间表如下。
 - 开放注册： 12月26日。
 - 开放报名： 1月7日-1月9日
 - 打印准考证：3月12日
 - 考试日期：3月22日 - 3月23日
 - 结果查询：5月初



## Sign Up

**Sign up is very important and really difficult.**

The information I learnt from Jiangsu Examination Institute is as follows:
- The second half of last year, there are 89000 people sign up, but only 41000 people sign up successfully.
- If you can't sign up, you have to wait until 6 o'clock the next day to reqister, because there are some people who don't pay within 24 hours, it will be refunded.
- Later, I learnt there is a business, proxy sign up. You can find someone to help you register on Taobao through WeChat official accounts. It is said that the success rate of this sign up is 95% . I suggest you use taobao because it is more cheap.


## Examination Analyze

1. The PETS3 exam consists of two parts: a written test and an oral test.
2. **written test: 120 minutes, score of 60 will pass**
 - <img src="/static/img/cb830f31bc5cdd40d47cddca80bd78b8.image.webp" width=300>
3. **oral test: 10 minutes**
 - Two examiners will grade you separately
 - 1/3 The examiner who talks to you
 - 2/3 The examiner who takes notes
 - <img src="/static/img/ce2726e82363f06739925cac446fbf83.image.webp" width=300> 

Here are some suggestions:
1. You can buy textbooks and test paper from taobao.
1. Read the listening questions immediately when you receive your test paper. The listening section will start playing in a few minutes.
1. After listening, do the first four reading questions, then the writings, and finally do the fifth reading question, because time is not enough.




# Study-Process

> Frankly speaking, my English is very bad, I have almost no grammer foundation. I remember that I gave up learning English in my third year of high school. I unexpectely got score of 90 in the college entrance examination. I didn't study any English at all in college. I only took the CET4 exam once, and I seem I got score of 325 (Full score: 750). Now, ten years has passed, I forget almost everything, I guess I only know more than 1000 words, including the words I vaguely remember.

1. I planed to use four months preparing for PETS3, I guess three months is enough, one month is extra preparing.
2. But, actually, I only prepared for `3 and a half months`. The reasons are as follows
 - This year's exam is `9 days` earlier than last year, and I was surprised.
 - The Spring Festival delayed for me `5 days`.
 - The previous learning of computer operation knowledge postponed me for `3 days`, until December 4th when I started learning English.
3. I underestimated the difficulty of the exam or I overrestimated my English proficiency. The preparation work was very tight, I basically gave it my all.
 - According to my diary, I have devoted approximately 800 hours to learning English 
 - <img src='/static/img/0e0cc7462dcd54c57ce6c4bd1c7cc060.image.webp' width=300>
 - During this period, I spent nearly half of my time learning English grammar, and I took three courses, English Rabbit Course from youtube.com, New Oriental's New Concept English Grammar Course, Hign School English Grammar.
 - I only learnt the first half of the textbook, but I studied very seriously. The text and some listening parts reached the level of listening audio and silently writing the original text， buy using a voice recorder
 - <img src="/static/img/a17bc0ed981e11c0edc2ae9e476491ae.image.webp" width=300>
 - <img src="/static/img/6d2b85f2ee23cec8594a1dffd8d20ce5.image.webp" width=300> 
 - Actually, I lost some refills.
 - ![image.png](/static/img/8fb238a45ff8525928704ff0f00bfd6a.image.webp)

**Daily chores take up about 1.5 hours on average per day.**

like teach my daughters, read financial knowledge or news, watch the stock. 

> Besides programming skills, I also have some financial management skills， which allow me to increase the value of my money. However, I am very clear-handed, I can only make a little money here, otherwise it will become an adventure and gambling. I control myself and rarely look at the fluctuations of the stock market. I know the right way is to learn English as soon as possible and then find a job.

Overall, I tried my best.

**Advantages and disadvantages of this method of leaning Enlish**

1. Unable to detect progress in learning
 - I didn't do any test papers in the first two months. I hate reading articles that I can't understand. I just learnt grammer, and the vocabulary is far from enough.
 - Grammar learning is not very useful for exams, because there are no grammar questions, and it can only be reflected in the composition.
 - I insist on learning grammer because I really want to learn English well and be able to speak it in the future, not just for a certificate.
 - There were still three weeks before the eaxm. I done several past exam papers(历年真题) but failed all the them, I felt very frustrated.
 - I tried to recite new words from paper.
 - Last week before examination, I did two mock tests and estimate passed it.
1. Listening is good, reading is a little bit poor, and I can't finish the reading.
 - Because most of words in the listening section are simple and common, I listened to the audio repeatedly.
 - I prepared about 4000 words, but the vocabulary was not enough. I didn't prepare accounding to the outline because I think learning words is not just for memorization, but for making sentenses, I learn new words from the text,
 - When doing reading, due to not know some of the words, it takes me much time to guess its mean, and I can't finished all reading parts.
1. I probably get a high score on the compositions due to I prepared 7 compositions, and silence written every several day.
1. One benefit of learning English grammer is that I will dare to speak English. This requires me to remember the word's class and meaning, then I can make sentences. I know the tense, voice, mood and person. I know the order of the various words in declarative sentences, Then I dare to speck English, but it is a bit slow and I still make grammatical mistakes because I am not proficient. I need more practice.

# During the exam

As mentioned earlier, applying for the exam is difficult. I live in Hangzhou, I was supposed to take the exam in Hangzhou, but the policy in Hangzhou is not friendly, The let some people pre-register for the exam first, and then require that they must pay social security in Hangzhou in the recently. 
![image.png](/static/img/86de2f2bf9069a199a990dc6fd5b47bd.image.webp)

So I chose to take exam at Jangsu, but not expect the person who registered to report to Lianyungang for me.
As I hardly take exercise, on the day of the exam and the day before I walked a long way, during the oral exam, I could hardly walk any long!

The night before the exam, I had some insomnia. During the written test, I drank two bottle of drink which containing caffeine and can refreshing, but I still felt a little sleepy.

Maybe it was an echo from the classroom, the listening of the playback was not very clear.

But there were only minor issues ahead, I fell like I should be able to pass because the two essays are based on the model essays I memorized before.

The results will be announced in early May. May I success!

# Next-Plan

Quickly learn how to use AI, especially the deepseek.

Review computer front-end knowledge, organize my resum, and find a job.

Supporting for my Family!