当前位置： 首页 > news >正文

【微信小程序】原生微信小程序ts模板下引入vant weapp

news 2026/2/8 18:49:54

之前一直是在普通项目下使用 vant weapp，这不最近学了ts，使用微信开发工具的ts+less初始化项目，再引入 vant 时踩了好久坑，特来记录一下

前言

本文章适合微信开发工具的ts项目，指的是项目目录结构如下图

在这里插入图片描述

总结

从上图可以看到，小程序的ts初始化项目，与之前常见的不同，主要在于 miniprogram外层多了些东西，此时我们在终端里 npm 一下，你会发现 node_modules也是装在外面的。

这其实是正常现象，但当时我对此感到疑惑并认为配置要对此做些改变。。。

没有变！
没有变！
没有变！

我们依然跟着官网走就可以了！

坑在哪里，坑在 我们更改 project.config.json 后，工具无法及时识别，导致构建npm错误

正文

下面跟着我一步一步走

  1. setp1
    在这里插入图片描述步骤一完成后，你的项目应该出现了node_modules，注意位置是在miniprogram外面
    在这里插入图片描述

  2. step2
    在这里插入图片描述这里没啥问题，照做即可

  3. step3

在这里插入图片描述步骤三，照做即可，把红框内的复制黏贴进去，保存

  1. step4
    最重要的来了，此时先别构建npm，要重启微信开发工具，否则会出现上文总结里提到的坑
  2. step5
    在这里插入图片描述重启后，就可以构建npm了，照文档走，构建完成后，应当出现miniprogram_npm，注意位置在miniprogram里面，如果在外面是错误的！！请重新检查project.config.json并重启开发工具
    在这里插入图片描述
  3. step6
    在这里插入图片描述最后一步，跟着文档走

在这里插入图片描述用按钮测试一下，成功！

相关文章：

【微信小程序】原生微信小程序ts模板下引入vant weapp

之前一直是在普通项目下使用 vant weapp，这不最近学了ts，使用微信开发工具的tsless初始化项目，再引入 vant 时踩了好久坑，特来记录一下 前言 本文章适合微信开发工具的ts项目，指的是项目目录结构如下图 总结 从上图…...

编程日记 2023/2/21 21:10:28

Puppeteer之Pyppeteer——自动登录Gmail(6)

前言 本文是该专栏的第6篇，结合项目案例让你熟练使用pyppeteer，后面会持续分享Pyppeteer的干货知识，记得关注。 有同学留言，使用selenium自动登录gmail邮箱，被Google识别为机器人怎么办？出现这个问题，主要在于Google可以检测出selenium的控件，无论你怎么加入规避方法，…...

编程日记 2023/2/21 21:09:20

python 绘图 —— 绘制从顶部向底部显示的柱形图[ax.bar()]

python 绘图 —— 绘制从顶部向底部显示的柱形图[ax.bar()] 效果图如下所示： 就是这个样子，一般比较少见将柱形图从上往下绘制的。可能是会为了更好的展示数据对比结果吧。这里绘图的主要思路如下： 利用ax.twinx()这个函数生成一个新的x轴…...

编程日记 2023/2/21 21:08:15

自定义Task工具，调用系统的IdleHandler方法

1、工具类&#xff0c;调用系统的IdleHandler方法package com.abbi.viewdemo;import android.os.Looper;import android.os.MessageQueue;import java.util.LinkedList;import java.util.Queue;public class DelayTaskDispatcher {private Queue<Task> delayTasks new L…...

编程日记 2023/2/21 21:07:10

生态GEP案例分享

浙江省领导参观德清”两山“平台4月30日上午&#xff0c;浙江省政府参事室一行领导&#xff0c;在德清县副县长陪同下考察当地数据智能运营中心&#xff0c;参观了国内首个县域数字“两山”决策支持平台建设成果。国内生产总值(GDP)&#xff0c;是指按国家市场价格计算的一个国…...

编程日记 2023/2/21 21:06:04

企业级信息系统开发学习笔记1.5 初探Spring AOP

文章目录零、本讲学习目标一、Spring AOP&#xff08;一&#xff09;AOP基本含义&#xff08;二&#xff09;AOP基本作用&#xff08;三&#xff09;AOP与OOP对比&#xff08;四&#xff09;AOP使用方式&#xff08;五&#xff09;AOP基本概念二、提出游吟诗人唱赞歌任务&#…...

编程日记 2023/2/21 21:04:57

Mysql数据库主主从设置

注意&#xff1a;在同一台服务器上部署主从或主主之类的时候&#xff0c;数据库data下有一个auto.cnf里的uuid不能重复。 原则&#xff1a;做同步之前要保证两个数据库数据一致. 锁表操作&#xff1a; FLUSH TABLES WITH READ LOCK; 注&#xff1a;没有锁定主服务器&#xf…...

编程日记 2023/2/21 21:03:53

监管持续，医疗卫生机构如何守好“涉疫”数据安全？

肆虐三年的新冠疫情&#xff0c;影响着全球经济发展、社会正常运行&#xff0c;也成为网络攻击、勒索软件攻击快速增长的温床&#xff0c;“滋生”了一系列网络、数据安全问题&#xff0c;受到各界关注。最近&#xff0c;上线运行三年的 “粤康码”发布公告、官宣部分服务下线&…...

编程日记 2023/2/21 21:02:47

STM32开发（13）----获取唯一设备标识符UID

获取唯一设备标识符UID前言一、什么事UID二、实验过程1.CubeMx配置2.代码实现3.实验结果总结前言 这一章节介绍如何获取STM32芯片中的唯一的ID号的两种方法。 一、什么事UID 在许多项目中&#xff0c;识别设备是必要的。从简单的设备描述到更复杂的设备&#xff0c;如 USB 串…...

编程日记 2023/2/21 21:01:41

华为OD机试 - 最优调度策略（Python） | 机试题+算法思路+考点+代码解析 【2023】

最优调度策略 题目 在通信系统中有一个常见的问题是对用户进行不同策略的调度 会得到不同系统消耗的性能 假设由 N 个待串行用户，每个用户可以使用 A/B/C 三种不同的调度策略 不同的策略会消耗不同的系统资源 请你根据如下规则进行用户调度 并返回总的消耗资源数 规则是：相…...

编程日记 2023/2/21 21:00:35

前端零基础入门-002-集成开发环境

本篇目标 了解市面上常用的前端集成开发环境&#xff08;ide&#xff09;掌握 HBuiberX 的使用&#xff1a;下载安装&#xff0c;新建项目、网页、运行网页。 内容摘要 本篇介绍了市面上流行的几款前端集成开发环境&#xff08;ide&#xff09;&#xff0c;并介绍了 Hbuilde…...

编程日记 2023/2/21 20:59:30

su和sudo的区别

linux中 su和sudo的区别 su和sudo是两个常用的切换到root超级用户命令。功能上类似&#xff0c;但使用上还是有不少差异。 su命令 su是切换到root用户的命令&#xff0c;主要用法如下&#xff1a; su&#xff1a;不带参数直接输入su将切换到root用户&#xff0c;需要输入root…...

编程日记 2023/2/21 20:58:24

【ChatGPT】使用ChatGPT进行51单片机程序编程体验

背景 最近ChatGPT大火&#xff0c;笔者尝试使用它进行了51单片机编程尝试。ChatGPT是一种由OpenAI训练的大型语言模型&#xff0c;具有强大的自然语言处理能力和生成代码的能力。 使用ChatGPT进行51单片机编程&#xff0c;笔者发现它可以帮助开发人员快速生成符合要求的代码&a…...

编程日记 2023/2/21 20:57:17

Docker之路（1.Docker概述、组成以及特点）

1.docker为什么会出现&#xff1f; 一款产品或者项目来说&#xff0c;一般有三个环境&#xff0c;日常/测试环境、预发环境、正式/线上环境 这么多环境&#xff0c;对其环境的配置是十分麻烦的&#xff0c;每一个机器都要部署环境&#xff0c;有的会有集群Redis、Hadoop等&…...

编程日记 2023/2/21 20:56:11

非对称加密算法在android的应用

前言android 系统安全内容总结 4、非对称加密算法应用 主要特性包括secure boot、AVB、OTA包签名、apk签名、apex、ko签名； 除此外上层应用keystore服务、涉及TEEOS非对称算法的功能安全会用到。属于功能安全本章节暂不描述。 4.1、secboot+avb secboot+avb属于安全启动参照…...

编程日记 2023/2/21 20:55:05

51单片机——定时器中断实验，小白讲解，相互学习

定时器介绍 1&#xff0c;CPU时序的有关知识 震荡周期&#xff1a;为单片机提供定时信号的震荡源的周期&#xff08;晶振周期或外加震荡周期&#xff09;。状态周期&#xff1a;2个震荡周期为1个状态周期&#xff0c;用S表示。震荡周期又称S周期或时钟周期。机器周期&#xff…...

编程日记 2023/2/21 20:53:59

什么是循环依赖，spring是如何去解决循环依赖问题的？什么是三级缓存？【spring】

文章目录什么是循环依赖&#xff1f;什么是三级缓存&#xff1f;执行流程什么是循环依赖&#xff1f; 在我们的开发中&#xff0c;会不可避免的遇到Bean之间循环依赖的&#xff0c;所谓循环依赖&#xff0c;就是两个或者两个以上的Bean互相持有对方&#xff0c;这样在程序运行…...

编程日记 2023/2/21 20:52:53

Cron表达式

网上搜一下就有在线生成网站&#xff0c;很方便。 比如&#xff1a;Cron表达式生成器 用途 定时调度任务&#xff0c;比如说服务器、云函数中定时执行脚本函数。 Cron 表达式构成 Cron 表达式是字符串&#xff0c;一般由 6 - 7 个字段构成&#xff0c;空格分隔。每个字段代…...

编程日记 2023/2/21 20:51:47

JavaScript 作用域

作用域是可访问变量的集合。在JavaScript中&#xff0c;能够定义全局作用域或者局部作用域。在 JavaScript 中, 对象和函数同样也是变量。在 JavaScript 中, 作用域为可访问变量&#xff0c;对象&#xff0c;函数的集合。JavaScript 函数作用域: 作用域在函数内修改。JavaScrip…...

编程日记 2023/2/21 20:50:41

Hive内部表与外部表的区别具体说明

目录 1.在/opt/atguigu/目录下&#xff0c;新建两个txt文件 2.在hadoop的web端递归创建一个目录&#xff0c;存储这两个文件 3.查看web端的文件 一、内部表&#xff1a; 1.创建一个内部表&#xff0c;并指定内部表的存储位置 2.查看内部表&#xff0c;内部表中没有数据 …...

编程日记 2023/2/21 20:48:31

＜6＞-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

编程新知 2025/12/11 18:28:17

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

编程新知 2026/1/21 14:29:57

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

编程新知 2025/9/7 0:12:53

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2026/1/21 9:06:43

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2026/1/23 4:15:03

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

编程新知 2025/12/7 12:35:20

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

编程新知 2026/2/7 22:13:48

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2026/1/4 21:36:42

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

编程新知 2026/1/25 11:46:42