微信小程序引入Vant框架的全过程记录

前言

有时候会觉得微信小程序原生的ui差了那么一点点感觉，那么能不能引入三方框架呢？本文以引入Vant来进行举例，共包含8个步骤。不管是不是云开发项目都一样使用。

实现步骤

1. 打开微信小程序的开发工具，进入项目。在项目的根目录文件上点击右键。选择在终端中打开。(注意是根目录)

2. 在命令窗口中键入npm init。然后所有配置都按默认配置进行，只需点击回车键即可。

3. 在命令窗口中键入npm install进行构建，成功之后会在根目录下生成 package.json 和 package-lock.json 文件

4. 接下来继续安装 Vant框架 ，步骤可根据官网进行操作vant-contrib.gitee.io/vant-weapp/…

　4.1 npm i @vant/weapp -S --production

　4.2 npm i vant-weapp -S --production

　4.3 修改 app.json

　4.4 修改 project.config.json

5. 回到微信开发者工具，在“工具”一栏中找到“构建npm”。等待构建成功即可。

6. 最后我们要使用 npm 模块, 在"详情"中找到使用 "npm 模块" 勾选即可

7. 使用Vant组件, 在app.json或index.json中引入组件，详细介绍见 Vant官网快速上手

8. 在页面中使用，直接引入组件即可。

··· 小插曲 ···

　　由于我这个是测试号AppId建的项目，是没有使用云开发的。导致到后面步骤操作完之后就报错了！报错信息如下图（1）；这时候我才发现这项目目录跟我另外一个云开发的项目的文件目录不一样，导致文件找不到，具体啥原因我也不晓得。但是我在云开发项目上是成功的了，如下图（2）；步骤是和以上写的步骤一模一样。

由此得出结论，大家尽量使用正式的AppId(即小程序公共平台中注册成功后的AppId)。避免越到后面麻烦越大。

　　原本想着用云开发项目再操作一遍，把最后成功的效果放上来，而不是记录一篇有问题的笔记。但是想了想这样也还不错，警醒自己下次不要再犯这个错误。所以最终还是以这篇博客呈现给大家。希望也可以起到一个提醒大家的作用，注意细节，不要粗心大意。

··· 神奇的一幕 ···

　　第二天我打开微信开发者工具发现，测试号AppId的项目又可以了，控制台报错信息也没有了。这个就很尴尬了呀！不太了解是咋回事（如果有大佬知道，请直接拿答案丢我吧!不敢说话...）。直接上图，如下图（3）；

图（1）： 报错信息

图（2）：含云开发项目成功使用Vant组件

图（3）：测试号AppId成功使用Vant框架

总结

到此这篇关于微信小程序引入Vant框架的文章就介绍到这了,更多相关微信小程序引入Vant框架内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 微信小程序使用 vant Dialog组件的正确方式

    简介 Vant是有赞开源的一套基于Vue2.0的Mobile组件库.通过Vant,可以快速搭建出风格统一的页面,提升开发效率.目前已有近50个组件,这些组件被广泛使用于有赞的各个移动端业务中.Vant旨在更快.更简单地开发基于Vue的美观易用的移动站点.特性组件都是来源于有赞的微商城业务,并且经过有赞业务的检验,更靠谱完善详实的中文文档专门的设计师团队维护视觉规范,统一而优雅支持babel-plugin-import单测覆盖率超过90%建议搭配webpack,babel使用Vant. 在 app

  • mpvue+vant app搭建微信小程序的方法步骤

    mpvue使用 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 mpvue-quickstart 模板的新项目 $ vue init mpvue/mpvue-quickstart my-project # 安装依赖 $ cd my-project $ npm install # 启动构建 $ npm run dev vant使用 yarn add vant # 将node_modules下的vant-weapp下的dist目录复制到s

  • 详解如何在微信小程序开发中正确的使用vant ui组件

    微信小程序终于可以支持npm导入第三方库了(https://developers.weixin.qq....),但是这种导入模式和使用模式有别于我们使用的npm调用.今天我按照有赞新出的vant小程序ui库来讲解如何导入npm资源. 第一步: 在小程序工程的根目录下执行: npm i vant-weapp -S --production 第二步: 保证当前你的微信开发者工具是最新版本,然后点击执行"构建npm" 构建成功后会提示: 同时项目根目录中会多出一个目录"minipr

  • 微信小程序引入Vant组件库过程解析

    微信小程序引入Vant组件库过程解析

    前期准备 Vant Weapp组件库: https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.json文件:输入命令:npm init 然后一路回车默认的即可: npm init 项目就回产生一个package.json文件: { "name": "miniprogram", "version": "1.0.0", &qu

  • 微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法

    微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法

    导入执行后 VM292:1 thirdScriptError  sdk uncaught third Error  module "miniprogram_npm/vant-weapp/mixins/transition" is not defined  Error: module "miniprogram_npm/vant-weapp/mixins/transition" is not defined     at require (http://127.0.0.

  • 微信小程序vant弹窗组件的实现方式

    作为从事前端开发的你肯定见过不少的弹框组件,你可曾有想过要自己实现一个弹框组件库,又或者想完全定制化的使用各种标准UI框架中的弹框组件呢? 今天这篇文章将会带着你解析这一系列疑问,以vant-weapp组件库为例,从开发标准的弹窗组件使用到高度定制复合自我审美的弹窗,再到完全研究清楚vant-weapp框架弹窗组件部分源码. 一.vant-weapp弹窗组件介绍 vant-weapp组件库是有赞团队开发的 一款灵活简洁且美观的小程序UI组件库 ,此文将以这个组件库的用法为标准,下文提及的弹框组件

  • 微信小程序使用Vant Weapp组件库的方法步骤

    微信小程序使用Vant Weapp组件库的方法步骤

    地址:https://youzan.github.io/vant/#/zh-CN/intro 一.引入Vant组件库 1.首先运行 npm init 就会生成 package.json 2.运行 npm i vant-weapp -S --production 3.安装成功后 点击 工具 => 构建npm 之后点击 详情 => 使用构建npm 渲染 二.使用组件库 首先在json文件中引入组件 "van-button": "vant-weapp/button&qu

  • 微信小程序引入VANT组件的方法步骤

    1.右键项目名称->在终端中打开 2.在终端输入 npm init 用来初始化,然后一直回车默认就Ok. 之后项目中会出现 project.config.json 内容为当前项目的配置信息以及依赖包的管理. 3.安装vant依赖包(在终端输入) npm i vant-weapp -S --production 4.进入小程序开发工具,选择左上角 工具->构建npm 完成之后项目里会多出依赖包 5.点击右上角详情并勾选使用npm模块. 6.选择要在哪个pages里使用该组件 这里以pages下的

  • 微信小程序npm引入vant-weapp的踩坑记录

    微信小程序npm引入vant-weapp的踩坑记录

    微信小程序项目使用npm安装vant-weapp的正确步骤 使用npm安装vant-weapp 到项目根目录下: npm i vant-weapp -S --production 然后再详情中选中使用npm模块,然后点击工具栏中的构建npm.本以为这样就可以安装成功了,结果 没有找到npm包 这让我纠结了一个早上.看了文档,琢磨了很久,最后研究出问题的关键. 第一步:使用cmd进入项目根目录:npm init 然后一直按回车 第二步:输入你要安装的文件(npm i vant-weapp -S -

  • 在微信小程序中使用vant的方法

    在微信小程序中如何使用vant UI ,最近在开发小程序项目的时候遇到了这个问题, 去网上百度发现大家给的步骤普遍都是直接npm i vant-weapp -S --production,接着构建npm, 然而,我在尝试的时候发现,构建npm的时候一直失败,告诉我找不到node_moudules ???? 你们是不是也遇到了这种问题呢? 好的,接下来就让我来告诉大家真正的解决方案吧! 首先, 你需要在小程序根目录下打开命令窗口,依次输入以下命令 npm init 初始化 npm install

随机推荐