微信小程序：使用VantUI组件库

微信小程序可以支持npm导入第三方库了（https://developers.weixin.qq…）;VantUI是一个不错的移动UI组件库，下面我们在微信小程序中引入
第一步：

在小程序工程的根目录下执行：

npm init -y  //初始化
npm i vant-weapp -S --production

第二步：
保证当前你的微信开发者工具是最新版本，然后点击执行“构建npm“

构建成功后会提示：

同时项目根目录中会多出一个目录“miniprogram_npm”，这个就是小程序可以识别的npm第三方库。

第三步：

这时候当我们需要在一个页面中调用vant组件，那么就要在对应的页面json中添加类似如下配置：

{
"usingComponents":{"van-button":"/miniprogram_npm/vant-weapp/button/index"}
}

接着你就可以在wxml中直接调用这个ui组件了。

注意，对于vant库来说其实你并不需要在页面对应的js中import vant-weapp组件。

微信小程序：使用VantUI组件库相关推荐

微信小程序调用Vant组件库
微信小程序调用Vant组件库 Vant Weapp 微信小程序引入Vant Weapp 调用Vant Weapp组件 Vant Weapp 轻量.可靠的小程序 UI 组件库链接: vant开发指南. ...
微信小程序使用i-view组件库的i-input无法触发bind:change事件的搞笑“bug”
注意:本篇文章不含技术方面的内容,只是感慨一下,如果你有类似的情况,或者想感受一下搞笑的bug,可以继续看一看,如果你想学习技术,本篇文章大概不会为你提供什么教学帮助. 我在做微信小程序的时候遇到过一 ...
微信小程序引入WeUI组件库（笔记）
1. 在微信小程序的根目录新建一个weui.wxss的文件 2. 将https://raw.githubusercontent.com/Tencent/weui-wxss/master/dist/st ...
微信小程序引用vant-UI组件
1.用微信开发者工具搭建一个小程序目录结构如图所示 2.引用vantUI组件步骤一 # 通过 npm 安装 npm i @vant/weapp -S --production # 通过 yarn ...
微信小程序入门ColorUI组件库使用方法
自学入门小程序不久,在对比现在主流的组件库后,笔者我选择了ColorUI,因为ColorUI界面精美,使用方法简单,只需将ColorUI的代码片段复制到你的小程序中即可,还方便自己定制. 下面是Col ...
微信小程序集成WeUI组件库
1.引入nmp依赖(前提是已经安装了nmp) 在小程序根目录(app.js所在目录),打开cmd, 输入:npm init -y,回车初始nmp 然后再输入:npm i miniprogram-sm- ...
微信小程序引入Vant组件库
前期准备 Vant Weapp组件库:https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.j ...
微信小程序引入WeUI组件库并使用组件
1. git 下载:weui,解压,打开文件夹,dist文件夹,style-->weui.wxss,复制到项目里 2.useExtendedLib引入根目录的app.json里引入 " ...
微信小程序引用Vant组件库message：没有找到可以构建的 NPM 包，请确认需要参与构建的 npm 都在 `miniprogramRoot` 目录内...
问题描述 message: 没有找到可以构建的 NPM 包,请确认需要参与构建的 npm 都在 `miniprogramRoot` 目录内,或配置 project.config.json 的 pack ...
A095_day01_微信小程序入门与组件
目录微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...

微信小程序：使用VantUI组件库

微信小程序：使用VantUI组件库相关推荐

最新文章

热门文章