【微信小程序】原生微信小程序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 452
掌握TypeScript提升小程序开发效率与代码质量，本文系统讲解TypeScript + 小程序开发的完整流程，涵盖环境搭建、类型定义、组件封装及真机调试。适用于微信、支付宝等多端小程序，助力开发者构建稳定可维护的应用，值得收藏。
微信小程序在TS模板下引入TDesign组件
qq_45862085的博客
10-10 3936
在第一次引入TDesign组件库时，遇到最大的疑惑是不知该何时引入组件库----------新建一个小程序模板后进行引入，构建npm一直失败------------------应该在minprogram文件夹下安装npm包，其他的官方都有相关的教程，按照步骤即可。
微信小程序原生支持TS、LESS、SASS能力探究
曹定栓的博客
09-09 4325
在之前开发小程序中，无法使用 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
<think> 我们正在处理用户的问题：“我想查找微信小程序进行所有封装需要下载的插件 请问微信小程序进行所有封装需要下载的插件” 根据提供的引用，我们注意到： 引用[1]中提到了uniapp开发微信小程序，并且提到了安装插件，包括： - uniapp插件 - 安装ts类型校验插件 - 安装uni-ui 引用[2]提到了微信小程序表单验证插件WxValidate的二次封装。 引用[3]提到了微信小程序的发送请求，使用了@escook/request-miniprogram请求包。 但是，用户的问题是关于“微信小程序进行所有封装需要下载的插件”。这里需要明确： 1. 用户使用的是原生微信小程序开发还是uniapp开发？ - 引用[1]是关于uniapp开发微信小程序的，而引用[2][3]可能是关于原生微信小程序的。 2. 由于用户没有明确，我们需要区分两种情况：原生微信小程序和uniapp跨端开发。 然而，用户的问题中引用的内容同时包含了两种，所以我们需要谨慎回答。 根据引用内容，我们可以总结出以下插件： - 对于uniapp开发： * uniapp插件（可能是官方插件，但具体名称不详，可能是HBuilderX的内置功能） * ts类型校验插件（用于TypeScript支持） * uni-ui（DCloud提供的UI组件库） - 对于原生微信小程序： * 表单验证插件：WxValidate（引用[2]） * 请求封装：@escook/request-miniprogram（引用[3]） 但是，用户的问题中使用了“所有封装”这个词，这可能是比较宽泛的。封装可以包括： - 网络请求封装 - 表单验证封装 - 组件封装 - 状态管理封装 - 工具函数封装等 因此，我们需要根据常见的封装需求来推荐插件。 由于用户没有明确开发框架，我们分别给出原生微信小程序和uniapp的常用封装插件： 一、原生微信小程序： 1. 网络请求封装： - 可以使用引用[3]中的@escook/request-miniprogram，这是一个已经封装好的请求库，支持拦截器。 - 也可以使用其他流行的库，如：luch-request（功能类似axios）等。 2. 表单验证封装： - 引用[2]中提到的WxValidate，这是一个表单验证插件，但需要二次封装。 3. UI组件库（如果需要，也可以算作封装的一部分）： - WeUI：官方UI组件库 - Vant Weapp：有赞团队的小程序UI组件库 - iView Weapp：TalkingTeam的UI组件库 4. 状态管理： - 如果需要状态管理，可以使用westore、mobx-miniprogram等。 5. 其他工具类封装： - 比如日期处理可以使用moment.js（但体积较大）或day.js（轻量） 二、uniapp开发微信小程序： 1. 请求封装：uni-app自带uni.request，也可以使用@escook/request-miniprogram（如引用[3]）或使用uni-app的插件市场的请求封装插件。 2. 表单验证：可以使用uni-forms组件（uni-ui的一部分）或单独的表单验证库，如使用vee-validate的适配等。 3. UI组件库：uni-ui（DCloud官方）、uView（功能强大）等。 4. 状态管理：可以使用vuex（uni-app内置支持）或pinia。 注意：用户的问题中特别提到“下载的插件”，所以我们要具体到可下载的npm包或通过小程序工具安装的包。 根据引用内容，我们可以推荐以下插件（按框架分类）： 原生微信小程序： - 请求封装：@escook/request-miniprogram（npm安装） - 表单验证：WxValidate（可能需要从github获取，或通过npm安装，但引用中没有给出具体npm包名，我们可以推断可能是wx-validate，但实际引用中提到的二次封装，用户可能需要自己封装） - 其他：用户可能需要根据具体需求选择 uniapp开发： - 请求封装：@escook/request-miniprogram（npm安装，如引用[3]） - 表单验证：uni-forms（通过npm安装@dcloudio/uni-ui或使用HBuilderX直接导入） - UI组件：uni-ui（npm安装）或uView（npm安装） 但是，用户的问题中并没有说明是原生还是uniapp，因此我们需要在回答中涵盖这两种情况。 另外，引用[1]中提到了安装ts类型校验插件，如果使用TypeScript，可以安装@types/wechat-miniprogram来获取微信小程序的类型定义（原生）或使用uni-app的TypeScript模板。 总结回答： 根据您的开发框架（原生微信小程序或uniapp），常用的封装插件如下： 1. 原生微信小程序： - 网络请求封装：推荐使用`luch-request`（功能强大，类似axios）或`@escook/request-miniprogram`（简单易用，有拦截器） - 表单验证：推荐使用`WxValidate`（但需要二次封装，也可以选择其他如`wx-form-validate`） - UI组件库：推荐使用`vant-weapp`（有赞团队）或`weui-wxss`（官方） - 状态管理：可以使用`mobx-miniprogram`或`westore` - 工具函数：如`day.js`（日期处理） 2. uniapp开发： - 网络请求封装：可以使用`@escook/request-miniprogram`（与原生小程序通用）或直接使用uni-app自带的`uni.request`进行封装 - 表单验证：推荐使用uni-app官方提供的`uni-forms`组件（包含验证功能） - UI组件库：推荐使用`uni-ui`（官方）或`uView` - 状态管理：使用`vuex`或`pinia` - TypeScript支持：安装`@types/wechat-miniprogram`（用于原生API类型）和`@dcloudio/types`（用于uni-app API类型） 安装方式： - 这些插件通常可以通过npm安装（在项目根目录执行命令），然后在小程序开发工具中构建npm。 - 或者通过小程序开发工具的“构建npm”功能将node_modules中的包构建为小程序可用的包。 注意：具体插件的选择需要根据项目需求，以上是常用推荐。 由于引用中只提到了部分插件，我们结合了常见的开发实践进行补充。 最后，我们根据用户引用的内容，特别强调： - 在引用[1]中，提到了安装uni-ui（对于uniapp项目） - 在引用[2]中，提到了表单验证插件WxValidate（对于原生小程序） - 在引用[3]中，提到了@escook/request-miniprogram（请求封装，两者都可用） 因此，我们推荐用户根据自己使用的框架选择相应的插件。 由于问题中没有明确框架，我们无法给出一个唯一的答案，所以需要分情况说明。 为了帮助用户，我们可以这样组织回答： 首先询问用户是使用原生微信小程序开发还是uniapp开发，然后给出相应的插件列表。 但是，用户要求的是“所有封装”的插件，这个范围很大，我们只能列举常见的。 因此，我们给出一个通用的回答，涵盖两种框架的常见封装插件。 由于用户要求生成相关问题，我们可以在最后提出几个相关问题。 回答结构： 1. 区分原生微信小程序和uniapp 2. 分别列出常用的封装插件（按功能分类） 3. 给出安装方式的提示 注意：我们引用的内容来自于用户提供的引用，所以我们在回答中会适当引用这些内容。 最终回答如下： </think> 根据提供的引用内容，微信小程序开发中常用的封装插件可分为以下几类，具体选择取决于开发框架（原生/UniApp）和功能需求： ### 一、原生微信小程序常用封装插件 1. **网络请求封装** - **@escook/request-miniprogram**：轻量级请求库，支持拦截器、全局配置等（引用[3]） - **安装方式**：`npm install @escook/request-miniprogram` ```javascript // 配置示例 import { $http } from '@escook/request-miniprogram'; wx.$http = $http; wx.$http.baseUrl = 'https://api.example.com'; // 设置基础路径 ``` 2. **表单验证封装** - **WxValidate**：基础表单验证插件，需二次封装（引用[2]） - **替代方案**：`WxValidate`的增强版如`LinUI Validate`或`Vant Weapp Form` - **GitHub地址**：[WxValidate](https://github.com/skyvow/wx-validate) 3. **UI组件库**（需封装自定义组件） - **Vant Weapp**：有赞团队组件库（推荐） - **WeUI**：微信官方UI库 - **安装方式**：`npm install vant-weapp` --- ### 二、UniApp跨端开发常用封装插件 1. **基础框架增强** - **@dcloudio/uni-ui**：官方UI组件库（引用[1]） - **安装方式**：`npm install @dcloudio/uni-ui` - **ts类型校验**：`npm install @types/wechat-miniprogram -D` 2. **请求封装** - **@escook/request-miniprogram**（同原生，引用[3]） - **uni-ajax**：专为UniApp优化的请求库 ```javascript // 在main.js中全局引入 import ajax from 'uni-ajax'; uni.$ajax = ajax; ``` 3. **状态管理** - **Pinia**（推荐）：轻量级状态管理库 `npm install pinia @pinia/nuxt` --- ### 三、通用工具类封装 1. **工具库** - **lodash-es**：工具函数集 `npm install lodash-es` - **dayjs**：日期处理 `npm install dayjs` 2. **本地存储封装** 对`wx.setStorageSync`/`uni.setStorageSync`二次封装，增加加密、过期时间等功能。 --- ### 安装总结 | 功能 | 原生小程序插件 | UniApp插件 | 安装命令 | |--------------|------------------------------|----------------------------|-----------------------------------| | **网络请求** | `@escook/request-miniprogram`| `@escook/request-miniprogram` | `npm install @escook/request-miniprogram` | | **UI组件** | `vant-weapp` | `@dcloudio/uni-ui` | `npm install vant-weapp` / `npm install @dcloudio/uni-ui` | | **表单验证** | `wx-validate`（二次封装） | `uni-forms`（内置） | GitHub手动引入 / 无需安装 | | **状态管理** | `mobx-miniprogram` | `pinia` | `npm install mobx-miniprogram` / `npm install pinia` | > **提示**： > 1. 原生小程序需在开发者工具中勾选「使用npm模块」并执行「构建npm」 > 2. UniApp项目通过`vue add`或`npm install`安装后，需在`pages.json`中注册组件
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值