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.navigateTouni.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中文网

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/11550.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Postman基础功能-变量设置与使用

如果你因失去太阳而流泪&#xff0c;那你也将失去群星了。大家好&#xff0c;在 API 测试的广袤世界中&#xff0c;Postman 犹如一座闪耀的灯塔&#xff0c;为我们指引着前行的方向。而其中的全局变量、集合变量和环境变量&#xff0c;更是如同隐藏的宝藏&#xff0c;蕴含着巨大…

以太网网络变压器型号

Hqst华强盛导读&#xff1a;以太网网络变压器的型号通常由一系列数字和字母组成&#xff0c;其中包括以下信息&#xff1a; 额定电压&#xff1a;表示变压器的额定输入和输出电压&#xff0c;通常以伏特&#xff08;V&#xff09;为单位。 额定电流&#xff1a;表示变压器的额定…

0513_IO7

练习1&#xff1a; 使用消息队列实现的2个终端之间的互相聊天 并使用信号控制消息队列的读取方式&#xff1a; 当键盘按ctrlc的时候&#xff0c;切换消息读取方式&#xff0c;一般情况为读取指定编号的消息&#xff0c;按ctrlc之后&#xff0c;指定的编号不读取&#xff0c;读取…

孩子多大可以接触python?学习python的好处

孩子接触Python的年龄并没有明确的界限&#xff0c;一般来说&#xff0c;6岁以上的孩子可以开始学习Python编程。虽然Python是一门高级编程语言&#xff0c;但它的语法简单易懂&#xff0c;适合初学者入门。通过学习Python编程&#xff0c;孩子可以培养逻辑思维、创造力和解决问…

电商秒杀系统设计

业务流程 系统架构 系统挑战 高并发:秒杀活动会在短时间内吸引大量用户,系统需要能够处理高峰时期的大量并发请求 库存同步:在秒杀中,面临的一个严重系统挑战是如何确保在数以万计的用户同时抢购有限的商品时,如何正确、实时地扣减库存,以防止超卖现象。 防止恶意抢购和…

前端 JS 经典:JS 基础类型和 typeof

前言&#xff1a;JS 基础类型就 8 种&#xff0c;这是官方确定的&#xff0c;毋庸置疑。其中原始类型 7 种&#xff0c;对象类型 1 种。而 typeof 关键字是用来判断数据是属于什么类型的。 1. 原始类型 Number、Boolean、String、BigInt、symbol、Undefined、null typeof 18…

猫头虎分享已解决Error || ERROR: Failed building wheel for XXX

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

python设计模式---观察者模式

观察者模式是一种行为设计模式&#xff0c;用于定义对象之间的一对多依赖关系&#xff0c;当一个对象的状态发生变化时&#xff0c;所有依赖它的对象都会得到通知并自动更新。 from abc import ABC, abstractmethod from typing import Listclass Observable:def __init__(sel…

系统定时器(SysTick)

介绍SysTick SysTick结构框图 时钟选择 计数器部分 中断部分 工作流程 相关寄存器 配置流程 相关库函数

centos无法tab补全至文件

很奇怪的需求&#xff1a;redhat 7.9版本用cd 只能到目录&#xff0c;无法到文件 我个人认为不是个问题&#xff0c;但是甲方需求&#xff0c;你懂的 首先&#xff0c;我们要搞清楚tab补全功能的包bash-completion是否安装&#xff0c;这里肯定是安装了&#xff0c;不过还是看…

使用vscode时快速生成console.log()

前言&#xff1a;在使用vscode开发进行调试时&#xff0c;我们经常要用到console.log()来调试代码&#xff0c;有什么好用的办法来快速生成&#xff0c;答案肯定是有的&#xff0c;下面跟随我来看一下是不是真的很好用。 安装插件JavaScript (ES6) code snippets 使用时直接按照…

Python批量输出图像的尺寸、格式、模式代码

import os from PIL import Image # 原始文件夹路径 original_folder rC:\Users\86182\Desktop\OPENCVyt\yt1 # 遍历原始文件夹中的图像 for filename in os.listdir(original_folder): img Image.open(os.path.join(original_folder, filename)) Size img.size # …

你了解手机设备的dpr吗?它和CSS又有什么联系?

当我们在前端开发中涉及到devicePixelRatio时&#xff0c;我们实际上在谈论屏幕像素密度&#xff0c;即每英寸的像素数。这个属性告诉我们在一个设备上的一个CSS像素对应多少物理像素。 目录 知识点概览 dpr值的计算 dpr的用处 知识点概览 比如我们新买了一个手机&#xff0…

vue vite 环境非构建包编译 React 报错定位

1. 背景 众所周知&#xff0c;vite 在构建生态的位置&#xff0c;vue 与之更是密切&#xff0c;主流的 vue 库几乎都与 vite 捆绑。 但有些 UI 库 如 private/ui 并没进行行编译&#xff0c;而是直接将源码发布到了 npm 中&#xff0c;无法实现兼容化&#xff0c;需要消费方去…

vs-qt中无法加载qsqlite驱动,但是单独新建demo测试却又是正常的。。。

开发环境: Vs2015 + qt5.12 背景: 接手了一个项目,可以编译过去,也可以运行,, 但是登录一直失败,,但是数据库文件也是正常的。。。 最主要的是环境和同事的是一样的,,,但是他那边可以加载成功,我这边不可以。。 后来单独在vs中创建了一个demo,用来测试QSqlData…

Ubuntu虚拟机上推荐一款免费好用的git版本管理工具

工具叫: gitg 软件界面如下&#xff1a; FR:徐海涛(hunkxu)

开眼了,自动化测试还能这样用?

持续集成的自动化测试通常需要将代码、测试用例与持续集成工具进行绑定&#xff0c;以实现自动运行。然而&#xff0c;Apipost的自动化测试功能需要手动操作&#xff0c;并且需要手动查看测试结果。 为了解决这个问题&#xff0c;Apipost推出了持续集成功能&#xff0c;方便同…

【Shell】正则表达式的操作实例

正则表达式是一个描述一组字符串的模式 是由普通字符和元字符组成的字符集&#xff0c;而这个字符集匹配&#xff08;或指定&#xff09;一个模式。 正则表达式的操作实例 &#xff08;一&#xff09;概述1.定义2.作用3.类型 &#xff08;二&#xff09;字符串匹配实例&#xf…

【论文阅读】Machine Learning, Linear Algebra, and More: Is SQL All You Need?

文章目录 摘要一、介绍二、SQL算法原语2.1、Variables2.2、Functions2.3、Conditions2.4、Loops2.5、Errors 三、案例研究3.1、对数据库友好的SQL映射3.2、性能结果 四、结论以及未来工作 摘要 尽管SQL在简单的分析查询中无处不在&#xff0c;但它很少用于更复杂的计算&#xf…

文件流-ASCII文件(中北大学-程序设计基础(2))

目录 题目 源码 结果示例 题目 编写程序实现以下功能&#xff1a;【要求处理ASCII文件】 &#xff08;1&#xff09;按职工号由小到大的顺序将5个员工的数据&#xff08;包括号码、姓名、年龄和工资&#xff09;输出到磁盘文件中保存&#xff1b; &#xff08;2&#xff…