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

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"
+  }
+}

WechatSmallProject/test3/sitemap.json

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