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

最新推荐文章于 2025-10-23 11:55:46 发布
原创 最新推荐文章于 2025-10-23 11:55:46 发布 · 2.3k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序 #前端 #小程序

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

前言

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

在这里插入图片描述

总结

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

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

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

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

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

正文

下面跟着我一步一步走

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

最低0.47元/天 解锁文章
微信小程序设计之主体文件app-ts/js
珞瑜的博客
10-23 2464
老版本是app.js，现在新版本是app.ts。所以看书上写的基本是app.js，内容适用于app.ts。app.js/ts 文件是小程序的全局逻辑文件。// app.ts// 展示本地存储能力// 登录wx.login({// 发送 res.code 到后台换取 openId, sessionKey, unionId},})},})// app.ts})由此可见，所有内容都写在 App（）函数内部，并且彼此之间用逗号隔开。微信小程序开发笔记_珞瑜·的博客-优快云博客。
基于uniapp+vue3+ts开发微信小程序项目实战
二当家小D的学习资源库
05-15 2095
uni-app结合Vue 3和TypeScript开发微信小程序项目，从首页布局到数据获取，再到头部导航和搜索组件的开发，以及轮播图和分类导航的实现，都一一详细介绍了具体的步骤和代码。通过这些内容，我们了解到了如何利用uni-app框架结合Vue 3和TypeScript快速构建小程序页面。
微信小程序构建npm（js和ts）
苦夏木禾
06-01 3632
微信小程序构建npm（js和ts）
TypeScript + 小程序开发全攻略（从入门到上线）
LogicWander的博客
10-23 451
掌握TypeScript提升小程序开发效率与代码质量，本文系统讲解TypeScript + 小程序开发的完整流程，涵盖环境搭建、类型定义、组件封装及真机调试。适用于微信、支付宝等多端小程序，助力开发者构建稳定可维护的应用，值得收藏。
微信小程序在TS模板下引入TDesign组件
qq_45862085的博客
10-10 3936
在第一次引入TDesign组件库时，遇到最大的疑惑是不知该何时引入组件库----------新建一个小程序模板后进行引入，构建npm一直失败------------------应该在minprogram文件夹下安装npm包，其他的官方都有相关的教程，按照步骤即可。
微信小程序原生支持TS、LESS、SASS能力探究
曹定栓的博客
09-09 4323
在之前开发小程序中，无法使用 less/sass 等 css 预编译语言，也无法使用 TS 进行开发，但在最新的编辑器版本中，对这些进行了支持。
微信小程序项目配置（原生）
weixin_43993776的博客
09-15 899
读 data 和 properties 中的值: this.data.xxx 和 this.properties.xxx。注意：小程序中的 data 和 properties 都是可读可写的，和vue不一样，不遵循单项数据流，在项目根目录中创建 behaviors 目录，目录中创建 my-behaviors.js 文件。在utils工具包中创建 httpInstance 目录，里面创建 index.js 文件。在根目录中创建 eNum 目录，里面创建 index.js 文件。
微信小程序原生写法实现树型选择组件，完整代码。
Jnsone的博客
08-18 3009
微信小程序原生写法实现树型选择器组件,VantUI的简单使用
微信小程序分页组件完整封装指南
爱吃松果
09-28 608
这个分页组件封装了完整的分页逻辑，包括： 组件定义：属性、方法、事件 样式设计：响应式、交互效果 数据类型：接口定义、参数类型 使用示例：页面集成、事件处理
微信小程序使用vant插件的DropdownMenu 下拉菜单自定义绑定关闭遮罩层方法
u013682258的博客
09-07 5374
我这里需要在下拉菜单自定义一个日历组件. van-calendar组件的bind:confirm方法里面可以调用逻辑代码. 但是我发现点击确定后遮罩层不关闭. 查看文档: js代码: /** * 自定义关闭遮罩层 * @param {*} event */ onConfirm(event) { var that = this; this.setData({ show
微信小程序TypeScript请求封装(TS+request)，开箱即用
Soncat2000的博客
03-21 1985
之前一直使用js来写小程序，现在切换使用TypeScript模板来写，找了很久没有找到一个TypeScript的request请求，所以就有了下面这些代码。
微信小程序-使用TypeScript开发微信小程序
08-06
使用TypeScript开发小程序 运行 使用微信web开发者工具新建一个小程序项目，项目目录选择dist目录，该目录是ts源文件编译后存放的目录。 开发 $ git clone git@github.com:linguofeng/wxapp-typescript.git $ cd wxapp-typescript $ npm install -g gulp typescript $ yarn $ code . $ gulp watch 主要原理 通过Gulp工具调用tsc编译ts源文件，其它文件通过gulp的watch进行拷贝。 第三库是通过package.json文件描述，拷贝相关文件到dist/libs，并修改require引用的路径实现。 TODOS: [x] 加入第三方库支持 [x] 支持Redux [x] 支持rxjs [x] 支持moment [x] 支持bluebird [x] 支持redux-observable
vant-weapp.rar
11-29
直接在对应需要用的组件的json文件引入相应的组件。 例如： { "usingComponents": { "van-popup": "/pages/vant-weapp/popup/index" }, "navigationBarTitleText": "成为会员" }
miniapp-ts-startup:微信小程序typescript模板，解决官方模板不方便管理源码的问题
03-23
miniapp ts启动 由于目前小程序官方已经支持TypeScript和npm ，但是依然存在一些使用上的细节体验不好。本项目是小程序的一个TypeScript脚手架项目，主要是为了解决官方TS模板中TypeScript源码与编译之后的JS代码在同一个文件夹下的问题，这个会导致二进制的管理不方便，即你没办法只把你的TypeScript托管到Git来管理。用这个脚手架项目之后，你只需要关注src目录下面的源代码即可，平时的编码工作就是如下几步： 编写TypeScript代码 npm run build npm i ，如果有安装新的包 使用微信开发者工具构建npm ，如果约会了新的npm包 其他指令请参考根目录下面的package.json文件； 另外，需要保证根目录下面的package.config.json里面的miniprogramRoot字段需要与编译之后的目录名称保持一致，这样微
miniapp-typescript-starter-template:微信小程序 TypeScript 模板
05-04
微信小程序 TypeScript Starter Template TypeScript Gulp SCSS Prettier Husky Lint rpx 转 rem Git Commit Message Lint TS Paths npm support CI/CD 自动安装推荐插件 使用方式 # 安装依赖 $ yarn # npm i # 开发 如果在编译前预处理写，会把整个项目进行编译，其实是没有必要的。 $ yarn dev # 预览/上传 前的预处理 微信开发者工具会自动帮我们做这件事 ;) $ yarn compile # 格式化文件 $ yarn format # 清理文件 $ yarn clean 建议安装的拓展 node ./scripts/setup.js一键安装 eamodio.gitlens Git 相关，甩锅神器 esbenp.pr
微信小程序ts-scss版本引入vant和npm第三方注意事项
qq_57952018的博客
10-27 1003
微信小程序ts版本使用npm和vant
TS构建微信小程序后使用vant weapp框架配置
黎小小的博客
05-17 1491
微信小程序使用vant weapp框架
原生小程序中，使用ts开发并封装防抖
akko
03-23 842
使用防抖
微信小程序使用TDesign(TS版本)
小星博博的博客
12-28 4011
5.在页面下的页面json中导入要使用的组件，在wxml中使用。3.修改app.json，移除"style": "v2"4.编译npm：微信开发者工具的Tools->构建npm。2.修改project.config.json。
微信小程序所有封装需要下载什么插件
最新发布
11-19
- 引用[1]是关于uniapp开发微信小程序的，而引用[2][3]可能是关于原生微信小程序的。 2. 由于用户没有明确，我们需要区分两种情况：原生微信小程序和uniapp跨端开发。 然而，用户的问题中引用的内容同时包含了两...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值