feat(WechatSmallProject): 新增 微信小程序 课程（包含实验1-4）

.gitignore

@@ -1 +1,2 @@
 .venv
+.vscode

README.md

@@ -8,20 +8,24 @@
 ## 在 `cqucc` 的一些代码
 
 1. 目录结构
-    ```sh
+
-    .
+   ```sh
-    ├── DataStructure  # 数据结构
+   .
-    ├── PracticalTrain  # 实训
+   ├── DataStructure  # 数据结构
-    ├── Server  # Node.js 从基础到项目实践
+   ├── PracticalTrain  # 实训
-    ├── Spider  # Python 网络爬虫基础教程
+   ├── Server  # Node.js 从基础到项目实践
-    └── Web  # Web 前端开发技术
+   ├── Spider  # Python 网络爬虫基础教程
-    ```
+   ├── WechatSmallProject  # 微信小程序开发实战
+   └── Web  # Web 前端开发技术
+   ```
 
 2. 目录
+
 - [数据结构](DataStructure/README.md)
 - [`Node.js` 从基础到项目实践](Server/README.md)
 - [`Python` 网络爬虫基础教程](Spider/README.md)
 - [`Web` 前端开发技术](Web/README.md)
+- [微信小程序开发实战](WechatSmallProject/README.md)
 - [实训](PracticalTrain/README.md)
 
 ## 📜 License

WechatSmallProject/README.md

@@ -0,0 +1,19 @@
+<!--
+ Copyright (c) 2026 zhilv
+
+ This software is released under the MIT License.
+ https://opensource.org/licenses/MIT
+-->
+
+## 微信小程序开发实战
+
+### 文件介绍
+
+```sh
+.
+├── images  # 图片资源
+├── test1  # 实验1
+├── test2  # 实验2
+├── test3  # 实验3
+└── test4  # 实验4
+```

WechatSmallProject/test1/.eslintrc.js

@@ -0,0 +1,31 @@
+/*
+ * Eslint config file
+ * Documentation: https://eslint.org/docs/user-guide/configuring/
+ * Install the Eslint extension before using this feature.
+ */
+module.exports = {
+  env: {
+    es6: true,
+    browser: true,
+    node: true,
+  },
+  ecmaFeatures: {
+    modules: true,
+  },
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+  },
+  globals: {
+    wx: true,
+    App: true,
+    Page: true,
+    getCurrentPages: true,
+    getApp: true,
+    Component: true,
+    requirePlugin: true,
+    requireMiniProgram: true,
+  },
+  // extends: 'eslint:recommended',
+  rules: {},
+}

WechatSmallProject/test1/README.md

@@ -0,0 +1,3 @@
+## 微信小程序课程实训
+
+- 实验一: [实验一](./pages/demo1)

WechatSmallProject/test1/app.js

@@ -0,0 +1,2 @@
+// app.js
+App({})

WechatSmallProject/test1/app.json

@@ -0,0 +1,14 @@
+{
+  "pages": [
+    "pages/demo1/demo1"
+  ],
+  "window": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "Weixin",
+    "navigationBarBackgroundColor": "#ffffff"
+  },
+  "style": "v2",
+  "componentFramework": "glass-easel",
+  "sitemapLocation": "sitemap.json",
+  "lazyCodeLoading": "requiredComponents"
+}

WechatSmallProject/test1/app.wxss

@@ -0,0 +1,10 @@
+/**app.wxss**/
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 200rpx 0;
+  box-sizing: border-box;
+} 

WechatSmallProject/test1/pages/demo1/demo1.js

@@ -0,0 +1,66 @@
+// pages/demo1/demo1.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

WechatSmallProject/test1/pages/demo1/demo1.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "实验一",
+  "navigationBarBackgroundColor": "#ffffff",
+  "navigationBarTextStyle": "black"
+}

WechatSmallProject/test1/pages/demo1/demo1.wxml

@@ -0,0 +1,44 @@
+<view class="demo1-container">
+  <view class="lbt">
+    <swiper current="1" duration="500" autoplay="true">
+      <swiper-item>
+        <image src="https://ts3.tc.mm.bing.net/th/id/OIP-C.VCcgAcUd3Xv7HszQm8ZaJQHaEK?rs=1&pid=ImgDetMain&o=7&rm=3" mode="widthFix" />
+      </swiper-item>
+      <swiper-item>
+        <image src="https://pic1.zhimg.com/v2-4fd3f2bb57d4bcc195e3d3cf092a7dd7_r.jpg" mode="widthFix" />
+      </swiper-item>
+      <swiper-item>
+        <image src="https://ts2.tc.mm.bing.net/th/id/OIP-C.zRwcvZSd5rTvcUKulre4nAHaEK?rs=1&pid=ImgDetMain&o=7&rm=3" mode="widthFix" />
+      </swiper-item>
+    </swiper>
+  </view>
+  <view class="jgg">
+    <view class="items">
+      <image src="/images/demo1/193_会议室.png" mode="aspectFit" /><text>会议室</text>
+    </view>
+    <view class="items">
+      <image src="/images/demo1/193_公告.png" mode="aspectFit" /><text>公告</text>
+    </view>
+    <view class="items">
+      <image src="/images/demo1/193_报修.png" mode="aspectFit" /><text>报修</text>
+    </view>
+    <view class="items">
+      <image src="/images/demo1/193_共享中心.png" mode="aspectFit" /><text>共享中心</text>
+    </view>
+    <view class="items">
+      <image src="/images/demo1/193_活动.png" mode="aspectFit" /><text>活动</text>
+    </view>
+    <view class="items">
+      <image src="/images/demo1/193_流程.png" mode="aspectFit" /><text>流程</text>
+    </view>
+    <view class="items">
+      <image src="/images/demo1/193_食堂.png" mode="aspectFit" /><text>食堂</text>
+    </view>
+    <view class="items">
+      <image src="/images/demo1/193_通讯录.png" mode="aspectFit" /><text>通讯录</text>
+    </view>
+    <view class="items">
+      <image src="/images/demo1/193_推广.png" mode="aspectFit" /><text>推广</text>
+    </view>
+  </view>
+</view>

WechatSmallProject/test1/pages/demo1/demo1.wxss

@@ -0,0 +1,53 @@
+.demo1-container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.lbt {
+  width: 100%;
+  height: 300rpx;
+}
+
+swiper-item {
+  display: flex;
+}
+
+swiper-item>image {
+  flex: 1;
+}
+
+.jgg {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+.jgg .items {
+  width: 33.33%;
+  height: 33.33%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  box-sizing: border-box;
+  border-right: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+}
+
+.jgg .items>image {
+  width: 100rpx;
+  height: 100rpx;
+}
+
+.jgg .items:nth-child(3) {
+  border-right: none;
+}
+
+.jgg .items:nth-last-child(6) {
+  border-bottom: none;
+}

WechatSmallProject/test1/project.config.json

@@ -0,0 +1,35 @@
+{
+  "setting": {
+    "es6": true,
+    "postcss": true,
+    "minified": true,
+    "uglifyFileName": false,
+    "enhance": true,
+    "packNpmRelationList": [],
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    },
+    "useCompilerPlugins": false,
+    "minifyWXML": true,
+    "compileWorklet": false,
+    "uploadWithSourceMap": true,
+    "packNpmManually": false,
+    "minifyWXSS": true,
+    "localPlugins": false,
+    "disableUseStrict": false,
+    "condition": false,
+    "swc": false,
+    "disableSWC": true
+  },
+  "compileType": "miniprogram",
+  "simulatorPluginLibVersion": {},
+  "packOptions": {
+    "ignore": [],
+    "include": []
+  },
+  "appid": "wx8c60a45abd90774a",
+  "editorSetting": {},
+  "libVersion": "3.15.1"
+}

WechatSmallProject/test1/project.private.config.json

@@ -0,0 +1,22 @@
+{
+  "libVersion": "3.15.1",
+  "projectname": "test1",
+  "setting": {
+    "urlCheck": true,
+    "coverView": true,
+    "lazyloadPlaceholderEnable": false,
+    "skylineRenderEnable": false,
+    "preloadBackgroundData": false,
+    "autoAudits": false,
+    "showShadowRootInWxmlPanel": true,
+    "compileHotReLoad": true,
+    "useApiHook": true,
+    "useApiHostProcess": true,
+    "useStaticServer": false,
+    "useLanDebug": false,
+    "showES6CompileOption": false,
+    "checkInvalidKey": true,
+    "ignoreDevUnusedFiles": true,
+    "bigPackageSizeSupport": false
+  }
+}

WechatSmallProject/test1/sitemap.json

@@ -0,0 +1,7 @@
+{
+    "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
+    "rules": [{
+    "action": "allow",
+    "page": "*"
+    }]
+}

WechatSmallProject/test2/.eslintrc.js

@@ -0,0 +1,31 @@
+/*
+ * Eslint config file
+ * Documentation: https://eslint.org/docs/user-guide/configuring/
+ * Install the Eslint extension before using this feature.
+ */
+module.exports = {
+  env: {
+    es6: true,
+    browser: true,
+    node: true,
+  },
+  ecmaFeatures: {
+    modules: true,
+  },
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+  },
+  globals: {
+    wx: true,
+    App: true,
+    Page: true,
+    getCurrentPages: true,
+    getApp: true,
+    Component: true,
+    requirePlugin: true,
+    requireMiniProgram: true,
+  },
+  // extends: 'eslint:recommended',
+  rules: {},
+}

WechatSmallProject/test2/README.md

@@ -0,0 +1,3 @@
+## 微信小程序课程实训
+
+- 实验一: [实验一](./pages/demo1)

WechatSmallProject/test2/app.js

@@ -0,0 +1,2 @@
+// app.js
+App({})

WechatSmallProject/test2/app.json

@@ -0,0 +1,45 @@
+{
+  "pages": [
+    "pages/demo2/demo2",
+    "pages/demo2/guest/guest",
+    "pages/demo2/video/video",
+    "pages/demo2/picture/picture"
+  ],
+  "style": "v2",
+  "renderer": "webview",
+  "componentFramework": "glass-easel",
+  "sitemapLocation": "sitemap.json",
+  "lazyCodeLoading": "requiredComponents",
+  "tabBar": {
+    "color": "#ccc",
+    "selectedColor": "#ff4c91",
+    "borderStyle": "white",
+    "backgroundColor": "#fff",
+    "list": [
+      {
+        "pagePath": "pages/demo2/demo2",
+        "text": "邀请函",
+        "iconPath": "images/demo2/invite.png",
+        "selectedIconPath": "images/demo2/invite.png"
+      },
+      {
+        "pagePath": "pages/demo2/picture/picture",
+        "text": "照片",
+        "iconPath": "images/demo2/marry.png",
+        "selectedIconPath": "images/demo2/marry.png"
+      },
+      {
+        "pagePath": "pages/demo2/video/video",
+        "text": "美好时光",
+        "iconPath": "images/demo2/video.png",
+        "selectedIconPath": "images/demo2/video.png"
+      },
+      {
+        "pagePath": "pages/demo2/guest/guest",
+        "text": "宾客信息",
+        "iconPath": "images/demo2/guest.png",
+        "selectedIconPath": "images/demo2/guest.png"
+      }
+    ]
+  }
+}

WechatSmallProject/test2/app.wxss

@@ -0,0 +1,10 @@
+/**app.wxss**/
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 200rpx 0;
+  box-sizing: border-box;
+} 

WechatSmallProject/test2/components/navigation-bar/navigation-bar.js

@@ -0,0 +1,102 @@
+Component({
+  options: {
+    multipleSlots: true // 在组件定义时的选项中启用多slot支持
+  },
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    extClass: {
+      type: String,
+      value: ''
+    },
+    title: {
+      type: String,
+      value: ''
+    },
+    background: {
+      type: String,
+      value: ''
+    },
+    color: {
+      type: String,
+      value: ''
+    },
+    back: {
+      type: Boolean,
+      value: true
+    },
+    loading: {
+      type: Boolean,
+      value: false
+    },
+    homeButton: {
+      type: Boolean,
+      value: false,
+    },
+    animated: {
+      // 显示隐藏的时候opacity动画效果
+      type: Boolean,
+      value: true
+    },
+    show: {
+      // 显示隐藏导航，隐藏的时候navigation-bar的高度占位还在
+      type: Boolean,
+      value: true,
+      observer: '_showChange'
+    },
+    // back为true的时候，返回的页面深度
+    delta: {
+      type: Number,
+      value: 1
+    },
+  },
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    displayStyle: ''
+  },
+  lifetimes: {
+    attached() {
+      const rect = wx.getMenuButtonBoundingClientRect()
+      const platform = (wx.getDeviceInfo() || wx.getSystemInfoSync()).platform
+      const isAndroid = platform === 'android'
+      const isDevtools = platform === 'devtools'
+      const { windowWidth, safeArea: { top = 0, bottom = 0 } = {} } = wx.getWindowInfo() || wx.getSystemInfoSync()
+      this.setData({
+        ios: !isAndroid,
+        innerPaddingRight: `padding-right: ${windowWidth - rect.left}px`,
+        leftWidth: `width: ${windowWidth - rect.left}px`,
+        safeAreaTop: isDevtools || isAndroid ? `height: calc(var(--height) + ${top}px); padding-top: ${top}px` : ``
+      })
+    },
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    _showChange(show) {
+      const animated = this.data.animated
+      let displayStyle = ''
+      if (animated) {
+        displayStyle = `opacity: ${show ? '1' : '0'
+          };transition:opacity 0.5s;`
+      } else {
+        displayStyle = `display: ${show ? '' : 'none'}`
+      }
+      this.setData({
+        displayStyle
+      })
+    },
+    back() {
+      const data = this.data
+      if (data.delta) {
+        wx.navigateBack({
+          delta: data.delta
+        })
+      }
+      this.triggerEvent('back', { delta: data.delta }, {})
+    }
+  },
+})

WechatSmallProject/test2/components/navigation-bar/navigation-bar.json

@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "usingComponents": {}
+}

WechatSmallProject/test2/components/navigation-bar/navigation-bar.wxml

@@ -0,0 +1,64 @@
+<view class="weui-navigation-bar {{extClass}}">
+  <view class="weui-navigation-bar__inner {{ios ? 'ios' : 'android'}}" style="color: {{color}}; background: {{background}}; {{displayStyle}}; {{innerPaddingRight}}; {{safeAreaTop}};">
+
+    <!-- 左侧按钮 -->
+    <view class='weui-navigation-bar__left' style="{{leftWidth}};">
+      <block wx:if="{{back || homeButton}}">
+        <!-- 返回上一页 -->
+        <block wx:if="{{back}}">
+          <view class="weui-navigation-bar__buttons weui-navigation-bar__buttons_goback">
+            <view
+              bindtap="back"
+              class="weui-navigation-bar__btn_goback_wrapper"
+              hover-class="weui-active"
+              hover-stay-time="100"
+              aria-role="button"
+              aria-label="返回"
+            >
+              <view class="weui-navigation-bar__button weui-navigation-bar__btn_goback"></view>
+            </view>
+          </view>
+        </block>
+        <!-- 返回首页 -->
+        <block wx:if="{{homeButton}}">
+          <view class="weui-navigation-bar__buttons weui-navigation-bar__buttons_home">
+            <view
+              bindtap="home"
+              class="weui-navigation-bar__btn_home_wrapper"
+              hover-class="weui-active"
+              aria-role="button"
+              aria-label="首页"
+            >
+              <view class="weui-navigation-bar__button weui-navigation-bar__btn_home"></view>
+            </view>
+          </view>
+        </block>
+      </block>
+      <block wx:else>
+        <slot name="left"></slot>
+      </block>
+    </view>
+
+    <!-- 标题 -->
+    <view class='weui-navigation-bar__center'>
+      <view wx:if="{{loading}}" class="weui-navigation-bar__loading" aria-role="alert">
+        <view
+          class="weui-loading"
+          aria-role="img"
+          aria-label="加载中"
+        ></view>
+      </view>
+      <block wx:if="{{title}}">
+        <text>{{title}}</text>
+      </block>
+      <block wx:else>
+        <slot name="center"></slot>
+      </block>
+    </view>
+    
+    <!-- 右侧留空 -->
+    <view class='weui-navigation-bar__right'>
+      <slot name="right"></slot>
+    </view>
+  </view>
+</view>

WechatSmallProject/test2/components/navigation-bar/navigation-bar.wxss

@@ -0,0 +1,96 @@
+.weui-navigation-bar {
+  --weui-FG-0:rgba(0,0,0,.9);
+  --height: 44px;
+  --left: 16px;
+}
+.weui-navigation-bar .android {
+  --height: 48px;
+}
+
+.weui-navigation-bar {
+  overflow: hidden;
+  color: var(--weui-FG-0);
+  flex: none;
+}
+
+.weui-navigation-bar__inner {
+  position: relative;
+  top: 0;
+  left: 0;
+  height: calc(var(--height) + env(safe-area-inset-top));
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding-top: env(safe-area-inset-top);
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.weui-navigation-bar__left {
+  position: relative;
+  padding-left: var(--left);
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.weui-navigation-bar__btn_goback_wrapper {
+  padding: 11px 18px 11px 16px;
+  margin: -11px -18px -11px -16px;
+}
+
+.weui-navigation-bar__btn_goback_wrapper.weui-active {
+  opacity: 0.5;
+}
+
+.weui-navigation-bar__btn_goback {
+  font-size: 12px;
+  width: 12px;
+  height: 24px;
+  -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E  %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%;
+  mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E  %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%;
+  -webkit-mask-size: cover;
+  mask-size: cover;
+  background-color: var(--weui-FG-0);
+}
+
+.weui-navigation-bar__center {
+  font-size: 17px;
+  text-align: center;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  flex: 1;
+  height: 100%;
+}
+
+.weui-navigation-bar__loading {
+  margin-right: 4px;
+  align-items: center;
+}
+
+.weui-loading {
+  font-size: 16px;
+  width: 16px;
+  height: 16px;
+  display: block;
+  background: transparent url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='80px' height='80px' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eloading%3C/title%3E%3Cdefs%3E%3ClinearGradient x1='94.0869141%25' y1='0%25' x2='94.0869141%25' y2='90.559082%25' id='linearGradient-1'%3E%3Cstop stop-color='%23606060' stop-opacity='0' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient x1='100%25' y1='8.67370605%25' x2='100%25' y2='90.6286621%25' id='linearGradient-2'%3E%3Cstop stop-color='%23606060' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.9'%3E%3Cg%3E%3Cpath d='M40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 L40,73 C58.2253967,73 73,58.2253967 73,40 C73,21.7746033 58.2253967,7 40,7 L40,0 Z' fill='url(%23linearGradient-1)'%3E%3C/path%3E%3Cpath d='M40,0 L40,7 C21.7746033,7 7,21.7746033 7,40 C7,58.2253967 21.7746033,73 40,73 L40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 Z' fill='url(%23linearGradient-2)'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23606060' cx='40.5' cy='3.5' r='3.5'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") no-repeat;
+  background-size: 100%;
+  margin-left: 0;
+  animation: loading linear infinite 1s;
+}
+
+@keyframes loading {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

WechatSmallProject/test2/pages/demo2/demo2.js

@@ -0,0 +1,66 @@
+// pages/demo2/demo2.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

WechatSmallProject/test2/pages/demo2/demo2.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "邀请函",
+  "navigationBarBackgroundColor": "#ffffff",
+  "navigationBarTextStyle": "black"
+}

WechatSmallProject/test2/pages/demo2/demo2.wxml

@@ -0,0 +1,28 @@
+<view class="demo2-container">
+  <image src="/images/demo2/bg_1.png" class="bg" />
+  <image src="/images/demo2/save_the_date.gif" class="content-gif" />
+  <view class="content-title">邀请函</view>
+  <view class="content-avatar">
+    <image src="/images/demo2/avatar.png" />
+  </view>
+  <view class="content-info">
+    <view class="content-name">
+      <image src="/images/demo2/tel.png" />
+      <view>王辉辉</view>
+      <view>新郎</view>
+    </view>
+    <view class="content-wedding">
+      <image src="/images/demo2/wedding.png" />
+    </view>
+    <view class="content-name">
+      <image src="/images/demo2/tel.png" />
+      <view>张琳琳</view>
+      <view>新娘</view>
+    </view>
+  </view>
+  <view class="content-address">
+    <view>我们诚邀请您来参加我们的婚礼</view>
+    <view>时间：2022年1月28日</view>
+    <view>地点：北京市海淀区 XX路 XX酒店</view>
+  </view>
+</view>

WechatSmallProject/test2/pages/demo2/demo2.wxss

@@ -0,0 +1,92 @@
+page {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  box-sizing: border-box;
+}
+
+.demo2-container {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+
+.bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+
+.content-gif {
+  width: 19vh;
+  height: 18.6vh;
+}
+
+.content-title {
+  font-size: 5vh;
+  color: #ff4c91;
+  text-align: center;
+  margin-bottom: 2.5vh;
+}
+
+.content-avatar image {
+  width: 24vh;
+  height: 24vh;
+  border: 2px solid #ff4c91;
+  border-radius: 50%;
+}
+
+.content-info {
+  width: 45vw;
+  text-align: center;
+  margin-top: 4vh;
+  display: flex;
+  align-items: center;
+}
+
+.content-name {
+  color: #ff4c91;
+  font-size: 2.7vh;
+  font-weight: bold;
+  position: relative;
+}
+
+.content-name>image {
+  width: 2.6vh;
+  height: 2.6vh;
+  border: 1px solid #ff4c91;
+  border-radius: 50%;
+  position: absolute;
+  top: -1vh;
+  right: -3.6vh;
+}
+
+.content-wedding {
+  flex: 1;
+}
+
+.content-wedding>image {
+  width: 5.5vh;
+  height: 5.5vh;
+  margin-left: 20rpx;
+}
+
+.content-address {
+  margin-top: 5vh;
+  color: #ec5f89;
+  font-size: 2.5vh;
+  font-weight: bold;
+  text-align: center;
+  line-height: 4.5vh;
+}
+
+.content-address view:first-child {
+  font-size: 3vh;
+  padding-bottom: 2vh;
+}

WechatSmallProject/test2/pages/demo2/guest/guest.js

@@ -0,0 +1,66 @@
+// pages/demo2/guest/guest.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

WechatSmallProject/test2/pages/demo2/guest/guest.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "宾客信息",
+  "navigationBarBackgroundColor": "#ffffff",
+  "navigationBarTextStyle": "black"
+}

WechatSmallProject/test2/pages/demo2/guest/guest.wxml

@@ -0,0 +1,28 @@
+<!--pages/demo2/guest/guest.wxml-->
+<image src="/images/demo2/bj_2.png" class="bg" />
+<form>
+  <view class="content">
+    <view class="input">
+      <input name="name" placeholder-class="phcolor" placeholder="输入您的姓名" />
+    </view>
+    <view class="input">
+      <input name="phone" placeholder-class="phcolor" placeholder="输入您的手机号" />
+    </view>
+    <view class=" radio">
+      <text>请选择您的性别：</text>
+      <radio-group>
+        <radio value="man">男</radio>
+        <radio value="woman">女</radio>
+      </radio-group>
+    </view>
+    <view class="check">
+      <text>请选择您需要的点心：</text>
+      <checkbox-group>
+        <checkbox value="">蛋糕</checkbox>
+        <checkbox value="">甜甜圈</checkbox>
+        <checkbox value="">巧克力</checkbox>
+      </checkbox-group>
+    </view>
+    <button>提交</button>
+  </view>
+</form>

WechatSmallProject/test2/pages/demo2/guest/guest.wxss

@@ -0,0 +1,56 @@
+.bg {
+  width: 100vw;
+  height: 100vh;
+}
+
+.content {
+  width: 80vw;
+  position: fixed;
+  left: 10vw;
+  bottom: 8vh;
+}
+
+.content .input {
+  font-size: large;
+  border: 1rpx solid #ff4c91;
+  border-radius: 10rpx;
+  padding: 1.5vh 40rpx;
+  margin-bottom: 1.5vh;
+  color: #ff4c91;
+}
+
+.content .radio {
+  font-size: large;
+  margin-bottom: 1.5vh;
+  color: #ff4c91;
+  display: flex;
+}
+
+.content .check {
+  font-size: large;
+  margin-bottom: 1.5vh;
+  color: #ff4c91;
+}
+
+.check checkbox-group {
+  margin-top: 1.5vh;
+  color: #ff4c91;
+}
+
+.check checkbox-group checkbox {
+  margin-left: 20rpx;
+}
+
+.check checkbox-group checkbox:nth-child(1) {
+  margin-left: 0;
+}
+
+.content button {
+  font-size: large;
+  background: #ff4c91;
+  color: #fff;
+}
+
+.content .phcolor {
+  color: #ff4c91;
+}

WechatSmallProject/test2/pages/demo2/picture/picture.js

@@ -0,0 +1,66 @@
+// pages/demo2/picture/picture.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

WechatSmallProject/test2/pages/demo2/picture/picture.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "图片",
+  "navigationBarBackgroundColor": "#ffffff",
+  "navigationBarTextStyle": "black"
+}

WechatSmallProject/test2/pages/demo2/picture/picture.wxml

@@ -0,0 +1,15 @@
+<!--pages/demo2/picture/picture.wxml-->
+<swiper indicator-color="white" indicator-active-color="#ff4c91" indicator-dots="aotuplay" interval="3500" duration="1000" circular vertical>
+  <swiper-item>
+    <image src="/images/demo2/timg1.jpg" />
+  </swiper-item>
+  <swiper-item>
+    <image src="/images/demo2/timg2.jpg" />
+  </swiper-item>
+  <swiper-item>
+    <image src="/images/demo2/timg3.jpg" />
+  </swiper-item>
+  <swiper-item>
+    <image src="/images/demo2/timg4.jpg" />
+  </swiper-item>
+</swiper>

WechatSmallProject/test2/pages/demo2/picture/picture.wxss

@@ -0,0 +1,9 @@
+/* pages/demo2/picture/picture.wxss */
+swiper {
+  height: 100vh;
+}
+
+image {
+  width: 100vw;
+  height: 100vh;
+}

WechatSmallProject/test2/pages/demo2/video/video.js

@@ -0,0 +1,66 @@
+// pages/demo2/video/video.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

WechatSmallProject/test2/pages/demo2/video/video.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "美好时光",
+  "navigationBarBackgroundColor": "#ffffff",
+  "navigationBarTextStyle": "black"
+}

WechatSmallProject/test2/pages/demo2/video/video.wxml

@@ -0,0 +1,16 @@
+<!--pages/demo2/video/video.wxml-->
+<view class="video">
+  <view class="video-title">标题：海边随拍</view>
+  <view class="videro-time">拍摄日期：2022-01-01</view>
+  <video src="http://localhost:3000/01.mp4" object-fit="fill"></video>
+</view>
+<view class="video">
+  <view class="video-title">标题：勿忘初心</view>
+  <view class="videro-time">拍摄日期：2022-01-10</view>
+  <video src="http://localhost:3000/02.mp4" object-fit="fill"></video>
+</view>
+<view class="video">
+  <view class="video-title">标题：十年之约</view>
+  <view class="videro-time">拍摄日期：2022-01-20</view>
+  <video src="http://localhost:3000/03.mp4" object-fit="fill"></video>
+</view>

WechatSmallProject/test2/pages/demo2/video/video.wxss

@@ -0,0 +1,19 @@
+/* pages/demo2/video/video.wxss */
+.video {
+  box-shadow: 0 8rpx 17rpx 0 rgba(7, 17, 27, 0.1);
+  margin: 10rpx 25rpx;
+  margin-bottom: 30rpx;
+  padding: 20rpx;
+  border-radius: 10rpx;
+  background: #fffF;
+}
+
+.video-title {
+  font-size: 35rpx;
+  color: #333;
+}
+
+.video video {
+  width: 100%;
+  margin-top: 20rpx;
+}

WechatSmallProject/test2/project.config.json

@@ -0,0 +1,35 @@
+{
+  "setting": {
+    "es6": true,
+    "postcss": true,
+    "minified": true,
+    "uglifyFileName": false,
+    "enhance": true,
+    "packNpmRelationList": [],
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    },
+    "useCompilerPlugins": false,
+    "minifyWXML": true,
+    "compileWorklet": false,
+    "uploadWithSourceMap": true,
+    "packNpmManually": false,
+    "minifyWXSS": true,
+    "localPlugins": false,
+    "disableUseStrict": false,
+    "condition": false,
+    "swc": false,
+    "disableSWC": true
+  },
+  "compileType": "miniprogram",
+  "simulatorPluginLibVersion": {},
+  "packOptions": {
+    "ignore": [],
+    "include": []
+  },
+  "appid": "wx8c60a45abd90774a",
+  "editorSetting": {},
+  "libVersion": "3.15.1"
+}

WechatSmallProject/test2/project.private.config.json

@@ -0,0 +1,22 @@
+{
+  "libVersion": "3.15.1",
+  "projectname": "test2",
+  "setting": {
+    "urlCheck": true,
+    "coverView": true,
+    "lazyloadPlaceholderEnable": false,
+    "skylineRenderEnable": false,
+    "preloadBackgroundData": false,
+    "autoAudits": false,
+    "showShadowRootInWxmlPanel": true,
+    "compileHotReLoad": true,
+    "useApiHook": true,
+    "useApiHostProcess": true,
+    "useStaticServer": false,
+    "useLanDebug": false,
+    "showES6CompileOption": false,
+    "checkInvalidKey": true,
+    "ignoreDevUnusedFiles": true,
+    "bigPackageSizeSupport": false
+  }
+}

WechatSmallProject/test2/server/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+pnpm-lock.yaml

WechatSmallProject/test2/server/index.js

@@ -0,0 +1,9 @@
+var express = require('express');
+
+var app = express();
+
+app.use(express.static('./htdocs'));
+
+app.listen(3000, res => {
+  console.log('服务器启动成功，访问地址：http://127.0.0.1:3000/文件名');
+});

WechatSmallProject/test2/server/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "music",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.18.1",
+    "multiparty": "^4.2.1",
+    "serve-index": "^1.9.1"
+  }
+}

WechatSmallProject/test2/server/使用说明.txt

@@ -0,0 +1,17 @@
+1. 准备工作
+安装Node.js
+启动命令行，切换工作目录到当前目录。
+
+2. 执行如下命令，启动服务器
+node index.js
+
+3. 将音频或视频文件放入htdocs目录
+
+4. 获取文件链接
+
+http://127.0.0.1:3000/文件名
+
+如：
+http://127.0.0.1:3000/1.mp4
+http://127.0.0.1:3000/2.mp4
+

WechatSmallProject/test2/sitemap.json

@@ -0,0 +1,7 @@
+{
+    "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
+    "rules": [{
+    "action": "allow",
+    "page": "*"
+    }]
+}

WechatSmallProject/test3/app.js

@@ -0,0 +1,19 @@
+// app.js
+App({
+  onLaunch() {
+    // 展示本地存储能力
+    const logs = wx.getStorageSync('logs') || []
+    logs.unshift(Date.now())
+    wx.setStorageSync('logs', logs)
+
+    // 登录
+    wx.login({
+      success: res => {
+        // 发送 res.code 到后台换取 openId, sessionKey, unionId
+      }
+    })
+  },
+  globalData: {
+    userInfo: null
+  }
+})

WechatSmallProject/test3/app.json

@@ -0,0 +1,14 @@
+{
+  "pages": [
+    "pages/index/index"
+  ],
+  "window": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "Weixin",
+    "navigationBarBackgroundColor": "#ffffff"
+  },
+  "style": "v2",
+  "componentFramework": "glass-easel",
+  "sitemapLocation": "sitemap.json",
+  "lazyCodeLoading": "requiredComponents"
+}

WechatSmallProject/test3/app.wxss

@@ -0,0 +1,10 @@
+/**app.wxss**/
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 200rpx 0;
+  box-sizing: border-box;
+} 

WechatSmallProject/test3/pages/index/index.js

@@ -0,0 +1,12 @@
+Page({
+  data: {
+    currentTab: 0
+  },
+
+  switchTab(e) {
+    const tab = e.currentTarget.dataset.tab;
+    this.setData({
+      currentTab: parseInt(tab)
+    })
+  }
+})

WechatSmallProject/test3/pages/index/index.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {
+  }
+}

WechatSmallProject/test3/pages/index/index.wxml

@@ -0,0 +1,32 @@
+<view class="container">
+
+  <view class="tab-box">
+    <view class="tab tab1 {{currentTab==0?'active':''}}" bindtap="switchTab" data-tab="0">
+      页面1
+    </view>
+    <view class="tab tab2 {{currentTab==1?'active':''}}" bindtap="switchTab" data-tab="1">
+      页面2
+    </view>
+    <view class="tab tab3 {{currentTab==2?'active':''}}" bindtap="switchTab" data-tab="2">
+      页面3
+    </view>
+  </view>
+
+  <view class="content-box">
+    <view wx:if="{{currentTab == 0}}" class="page page1">
+      <view class="title">第 1 个界面</view>
+      <view>对应 Tab1 内容</view>
+    </view>
+
+    <view wx:if="{{currentTab == 1}}" class="page page2">
+      <view class="title">第 2 个界面</view>
+      <view>对应 Tab2 内容</view>
+    </view>
+
+    <view wx:if="{{currentTab == 2}}" class="page page3">
+      <view class="title">第 3 个界面</view>
+      <view>对应 Tab3 内容</view>
+    </view>
+  </view>
+
+</view>

WechatSmallProject/test3/pages/index/index.wxss

@@ -0,0 +1,69 @@
+.container {
+  padding: 20rpx;
+
+}
+
+.tab-box {
+  display: flex;
+  gap: 10rpx;
+  margin-bottom: 30rpx;
+}
+
+.tab {
+  flex: 1;
+  text-align: center;
+  padding: 25rpx;
+  font-size: 32rpx;
+  border-radius: 10rpx;
+  color: #fff;
+}
+
+.tab1 {
+  background: #ff7676;
+}
+
+.tab2 {
+  background: #56c1fe;
+}
+
+.tab3 {
+  background: #62d462;
+}
+
+.tab1.active {
+  background: #ff4444;
+}
+
+.tab2.active {
+  background: #0099ff;
+}
+
+.tab3.active {
+  background: #22cc22;
+}
+
+.page {
+  width: 100vw;
+  height: 100vh;
+  border-radius: 12rpx;
+  text-align: center;
+  color: #fff;
+}
+
+.page1 {
+  background: #ff7676;
+}
+
+.page2 {
+  background: #56c1fe;
+}
+
+.page3 {
+  background: #62d462;
+}
+
+.title {
+  font-size: 40rpx;
+  font-weight: bold;
+  margin-bottom: 20rpx;
+}

WechatSmallProject/test3/project.config.json

@@ -0,0 +1,41 @@
+{
+  "compileType": "miniprogram",
+  "libVersion": "3.15.2",
+  "packOptions": {
+    "ignore": [],
+    "include": []
+  },
+  "setting": {
+    "coverView": true,
+    "es6": true,
+    "postcss": true,
+    "minified": true,
+    "enhance": true,
+    "showShadowRootInWxmlPanel": true,
+    "packNpmRelationList": [],
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    },
+    "compileWorklet": false,
+    "uglifyFileName": false,
+    "uploadWithSourceMap": true,
+    "packNpmManually": false,
+    "minifyWXSS": true,
+    "minifyWXML": true,
+    "localPlugins": false,
+    "condition": false,
+    "swc": false,
+    "disableSWC": true,
+    "disableUseStrict": false,
+    "useCompilerPlugins": false
+  },
+  "condition": {},
+  "editorSetting": {
+    "tabIndent": "auto",
+    "tabSize": 2
+  },
+  "appid": "wx8c60a45abd90774a",
+  "simulatorPluginLibVersion": {}
+}

WechatSmallProject/test3/project.private.config.json

@@ -0,0 +1,24 @@
+{
+  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+  "projectname": "test3",
+  "setting": {
+    "compileHotReLoad": true,
+    "urlCheck": true,
+    "coverView": true,
+    "lazyloadPlaceholderEnable": false,
+    "skylineRenderEnable": false,
+    "preloadBackgroundData": false,
+    "autoAudits": false,
+    "useApiHook": true,
+    "useApiHostProcess": true,
+    "showShadowRootInWxmlPanel": true,
+    "useStaticServer": false,
+    "useLanDebug": false,
+    "showES6CompileOption": false,
+    "bigPackageSizeSupport": false,
+    "checkInvalidKey": true,
+    "ignoreDevUnusedFiles": true
+  },
+  "libVersion": "3.15.2",
+  "condition": {}
+}

WechatSmallProject/test3/server/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+pnpm-lock.yaml

WechatSmallProject/test3/server/index.js

@@ -0,0 +1,42 @@
+// 引入 Node.js 的 fs 模块，该模块用于处理文件系统操作，比如读取文件
+let fs = require("fs");
+// 引入 express 模块，express 是一个流行的 Node.js Web 应用框架，用于快速搭建 Web 服务器
+var express = require("express");
+
+// 读取 JSON 数据
+// 使用 fs.readFileSync 同步读取当前目录下的 data.json 文件
+// 第二个参数指定以 UTF-8 编码读取文件，读取结果存储在 jsonStr 变量中
+let jsonStr = fs.readFileSync("./data.json", {
+  encoding: "utf8",
+});
+
+// 将读取到的 JSON 字符串解析为 JavaScript 对象，存储在 data 变量中
+let data = JSON.parse(jsonStr);
+
+// 创建 Web 服务器对象
+// 调用 express 函数创建一个 express 应用实例，后续使用该实例来配置和启动服务器
+var app = express();
+
+// 静态资源处理
+// 使用 express.static 中间件来处理静态资源，这里指定 public 目录为静态资源目录
+// 客户端可以直接访问 public 目录下的文件，例如图片、CSS、JavaScript 文件等
+app.use(express.static("public"));
+
+// 定义一个 GET 请求的路由，当客户端访问 /data 路径时会触发该路由处理函数
+app.get("/data", (req, res) => {
+  // 使用扩展运算符将 data 数组复制一份到 arr 数组中 。扩展运算符是 ES6 中引入的新特性，它可以将一个可迭代对象（如数组、字符串、Map、Set 等）展开成一个个独立的元素。数组复制：在代码中 let [ ...arr ] = data 就是利用扩展运算符将 data 数组中的元素展开，然后复制到一个新的数组 arr 中。这样就创建了一个 data 数组的浅拷贝，arr 和 data 是两个不同的数组对象，但是它们内部的元素（如果是基本类型）是相同的，或者（如果是引用类型）是指向同一个对象的引用。
+  let [...arr] = data;
+  // 计算当前页数据的起始索引
+  // req.query.page 是客户端请求中传递的页码参数，req.query.pageSize 是每页显示的数据条数
+  let start = (req.query.page - 1) * req.query.pageSize;
+  // 设置响应头 X-Total-Count，用于告知客户端数据的总条数
+  res.setHeader("X-Total-Count", data.length);
+  // 从 arr 数组中截取从 start 索引开始，长度为 req.query.pageSize 的数据，并将其作为响应发送给客户端
+  res.send(arr.splice(start, req.query.pageSize));
+});
+
+// 启动服务器，监听 3000 端口
+// 当服务器启动成功后，会在控制台输出提示信息，告知服务器的访问地址
+app.listen(3000, () => {
+  console.log("服务器启动成功，地址为：http://127.0.0.1:3000");
+});

WechatSmallProject/test3/server/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "json-data-server",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.18.1"
+  }
+}