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

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

news 2026/2/8 18:35:40

之前一直是在普通项目下使用 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

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/10/19 5:48:51

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2026/2/2 0:35:08

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

编程新知 2026/1/19 2:13:24

Linux离线（zip方式）安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

编程新知 2025/11/23 23:50:53

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

编程新知 2026/1/24 12:01:38

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

编程新知 2026/1/31 2:59:25

【深度学习新浪潮】什么是credit assignment problem？

Credit Assignment Problem（信用分配问题） 是机器学习，尤其是强化学习（RL）中的核心挑战之一，指的是如何将最终的奖励或惩罚准确地分配给导致该结果的各个中间动作或决策。在序列决策任务中，智能体执行一系列动作后获得一个最终奖励，但每个动作对最终结果的贡献程度往往…...

编程新知 2026/1/30 14:23:04

【Linux】Linux安装并配置RabbitMQ

目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的&#xff0c;需要先安…...

编程新知 2026/1/29 2:22:39