如何使用微信小程序第三方UI组件库

组件库主要是vant和微信小程序官方文档

小程序引入第三方UI框架（基于npm模块）

1、初始化package.json文件。
2、安装需要的小程序ui框架。
3、配置小程序（支持npm，配置在下面有写）
4、在app.wxml中引入第三方UI样式。
5、然后就可以使用了。（怎么使用看以下操作）

具体实现：

npm init -y  初始化
npm install weui-miniprogram  安装

配置：打开开发者工具一步一步配置

然后在工具栏中找到工具，右键找到构建 npm,然后就直接生成了下面选中的文件（无需手动添加）：

在app.wxss引入样式：

然后xxx.json中引入第三方组件路径。

vant 小程序UI组件库（使用方法和微信小程序官方文档的使用方法大致一致）
组件库地址：https://vant-contrib.gitee.io/vant-weapp/#/intro

1、初始化package.json

npm init -y

2、安装需要的小程序ui框架或第三方包

npm i @vant/weapp -S --production

3、配置小程序支持npm，打开开发者工具

然后在开发者工具栏中找到工具，右键找到构建 npm. 就生成了下列文件

4、在要引入的页面中添加相关组件并在页面中直接使用

xxx.json中 引入第三方组件路径

它与小程序官方文档引入第三方ui组件库有区别，vant不用引入样式，但是需要在要用的wxml文件的.json中引入自己的样式，以button为例：

//wxml
<van-button type="primary">按钮</van-button>// app.json
"usingComponents": {"van-button": "@vant/weapp/button/index"//
}

需要哪个就引入哪个就行了。

如何使用微信小程序第三方UI组件库相关推荐

微信小程序调用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 ...
微信小程序集成WeUI组件库
1.引入nmp依赖(前提是已经安装了nmp) 在小程序根目录(app.js所在目录),打开cmd, 输入:npm init -y,回车初始nmp 然后再输入:npm i miniprogram-sm- ...
微信小程序入门ColorUI组件库使用方法
自学入门小程序不久,在对比现在主流的组件库后,笔者我选择了ColorUI,因为ColorUI界面精美,使用方法简单,只需将ColorUI的代码片段复制到你的小程序中即可,还方便自己定制. 下面是Col ...
微信小程序引入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 ...
微信小程序的父子组件传值
微信小程序的父子组件传值如果小程序中有可复用的UI且具有一定的功能性,就可以使用自定义组件将其封装起来. 下面介绍父子组件的数据传递方法,以及一个简单的组件和一个复杂的组件示例. 二.父子组件传递数 ...
微信小程序 — 长列表组件 recycle-view 详细教学
微信小程序 - 长列表组件 recycle-view 踩坑问题全解写在前面引入长列表组件 recycle-view 长列表组件 recycle-view 的使用问题一.如何增加下拉刷新功能? 问 ...

如何使用微信小程序第三方UI组件库

组件库主要是vant和微信小程序官方文档

如何使用微信小程序第三方UI组件库相关推荐

最新文章

热门文章