uniapp经验

uniapp-ts模版在前端/vue文件夹下
npx @dcloudio/uvm@latest 安装依赖
之后tsconfig.json会报错，可以在tsconfig.json文件中"compilerOptions"配置项内添加"ignoreDeprecations": "5.0"，解决。

### 编译和运行 uni-app 项目
1. 安装依赖 `pnpm install`  (应该不需要，在上一环节的某一步骤应该就自己进行了)
2. 编译成微信小程序 `pnpm dev:mp-weixin`
3. 导入微信开发者工具

1.pnpm dev:mp-weixin后，依赖里的大部分文件竟然消失
npx @dcloudio/uvm@latest 安装依赖，报错
大意：这个错误提示表明 pnpm（一个性能卓越的 Node.js 包管理工具）在尝试管理项目的依赖时遇到了一个意外的虚拟存储位置问题。具体来说，pnpm 期望在 D:\前端\vue\uni1\node_modules\.pnpm 这个目录下使用虚拟存储来链接依赖，但是实际上，它发现项目的依赖已经被链接到了另一个位置 D:\前端\vue\uni-preset-vue-vite-ts\node_modules\.pnpm。
删除现有的 node_modules 文件夹和可能的 pnpm-lock.yaml 文件（如果存在）
pnpm install后依赖文件恢复，tsconfig.json仍然报错
忘了干什么后不报错了，但是编译成的微信小程序不认识visualstudio里的四个组件。
突然发现好的和坏的的pages有大区别，好的是pages下面一个文件夹再套一个vue文件，坏的是pages下面直接是vue文件，所以是路径出了问题。
改好了路径之后，报错TypeError: Cannot read property 'push' of undefined
源代码：
<script setup lang="ts" name="Home"> //告诉 Vue 编译器这个脚本块使用 TypeScript 编写。
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
onMounted
(()=>
    {
        setTimeout
        (()=>
            {
                router.push('/news')
            },3000   // 这里不要写错位置
        )
    }
)
</script>
照文心一言改之后，又报错，app.js错误:
 TypeError: Cannot read property 'history' of undefined

2.在app.js因为报错createapp方法没定义什么的，删掉createApp().app.mount("#app");   页面上用来测试的1111显示了，但其他的仍然不显示。
原来uniapp的App.vue不再需要写什么东西了，他不需要模版了。
所有页面都是在App.vue下进行切换的，是应用入口文件。但App.vue本身不是页面，这里不能编写视图元素，也就是没有<template>。

这个文件的作用包括：监听应用生命周期、配置全局样式、配置全局的存储globalData

应用生命周期仅可在App.vue中监听，在页面监听无效。

3.把原本vue程序main.ts文件里的代码换成网上教程里的代码，好像好使了。

4.

在 UniApp 中，虽然它基于 Vue.js 开发，但是有一些特定的语法和组件库是与标准的 Vue.js 项目不同的。UniApp 主要是为了开发跨平台应用（如 iOS、Android、H5、小程序等）而设计的，它使用了一些自定义的组件和 API，以及一套独特的页面路由机制。

路由: UniApp 使用的是基于页面栈的路由机制，而不是像 Vue Router 那样的 URL 路由。因此，你不能直接使用 vue-router 来进行页面跳转。在 UniApp 中，你应该使用 uni.navigateTo、uni.redirectTo 或 uni.switchTab 等 API 来进行页面跳转。

5.一个页面给另一个页面传数据，只能用navigateTo，不能用switchLab，也就是说，被传数据的页面不能是tabbar页面里的，暂时不知道传tabbar页面数据怎么做。

ChatGPT：

在微信小程序中，`wx.switchTab` 方法用于跳转到 tabBar 页面，并且不允许携带
参数在 URL 的 queryString 中。这是因为 tabBar 页面通常是固定的几个页面，
用于快速切换应用的主要功能，而不是用来展示具体的详情或数据。

如果你需要向 tabBar 页面传递参数，你可以考虑以下几种方法：

1. **使用全局变量**：你可以在 App 实例中设置全局变量来存储数据，然后在需要的页面中使用 `getApp()` 方法来获取这些数据。

// app.js
App({
  globalData: {
    someData: null
  }
})

// 在某个页面设置全局变量
const app = getApp();
app.globalData.someData = 'your data';

// 在 tabBar 页面获取全局变量
const app = getApp();
const someData = app.globalData.someData;
```

2. **使用本地存储**：你可以使用 `wx.setStorageSync` 方法将数据保存到本地缓存中，
然后在 tabBar 页面使用 `wx.getStorageSync` 方法获取数据。

// 在某个页面保存数据到本地缓存
wx.setStorageSync('someKey', 'your data');

// 在 tabBar 页面从本地缓存获取数据
const someData = wx.getStorageSync('someKey');


3. **使用事件中心**：你可以创建一个事件中心（Event Bus）来在多个页面之间传递数据。
这通常是通过创建一个具有 `$on`、`$emit` 和 `$off` 方法的 Vue 实例来完成的，
但请注意微信小程序并不是基于 Vue 的，但你可以实现类似的功能。

4. **使用页面栈**：你可以使用 `getCurrentPages` 方法获取当前页面栈，然后直接操作
前一个页面的数据。但这种方法并不推荐，因为它破坏了页面的封装性，且可能会导致难以预料的错误。

5. **使用 Vuex（如果你在使用 Vue 开发小程序）**：Vuex 是一个专为 Vue.js 应用程序开发的
状态管理模式。如果你正在使用 Vue 开发微信小程序，并且你的 tabBar 页面也是基于 Vue 的，
那么你可以考虑使用 Vuex 来管理状态。

6. **重新设计页面结构**：如果可能的话，重新考虑你的页面设计。也许你可以将需要传递参数
的页面从 tabBar 中移除，或者设计一个不同的导航流程来避免这个问题。

请注意，尽管有些方法可能允许你在技术上实现向 tabBar 页面传递参数，但这可能并不是一个
好的设计选择，因为它可能违反了微信小程序的设计原则和用户体验的最佳实践。

6.拦截器

当我们提到“拦截器”（Interceptor）时，我们通常是在谈论一种设计模式，用于在请求或响应到达目标之前进行某种形式的处理或修改。

在Web开发中，特别是在与后端API交互的上下文中，拦截器通常用于：

1. 请求拦截：在请求发送到服务器之前，对其进行修改或添加某些头部信息、令牌（token）等。
2. 响应拦截：在服务器的响应到达客户端代码之前，对其进行检查、修改或处理错误。

虽然uniapp本身没有直接提供拦截器的实现，但你可以结合其他库（如axios，一个基于Promise的HTTP客户端）来实现这一功能。在axios中，你可以使用拦截器来拦截请求和响应。

例如，使用axios的拦截器：

// 添加请求拦截器  
axios.interceptors.request.use(function (config) {  
    // 在发送请求之前做些什么  
    return config;  
}, function (error) {  
    // 对请求错误做些什么  
    return Promise.reject(error);  
});  
  
// 添加响应拦截器  
axios.interceptors.response.use(function (response) {  
    // 对响应数据做点什么  
    return response;  
}, function (error) {  
    // 对响应错误做点什么  
    return Promise.reject(error);  
});

在uniapp中，如果你正在使用axios或其他支持拦截器的HTTP客户端库，你可以按照上述方式添加拦截器来处理你的HTTP请求和响应。

uniapp中路由拦截器的使用技巧-uni-app-PHP中文网