微信小程序引入UI组件库

简介: 微信小程序引入UI组件库

小程序如何引入第三方UI组件(通常也是基于npm)

1、打开cmd,在小程序根目录内,初始化npm

npm init -y

2、执行命令安装 npm 包:

以微信官方WEUI组件库为示例

npm install --save weui-miniprogram

image.png

3、安装完成后,在微信开发者工具中的菜单栏:详情-----使用npm模块-----工具 ------ 构建 npm :

image.png

image.png

image.png

4、app.wxss引入全局样式

@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';


5、以pages的index为例,json中引入cell:

{
"usingComponents": {
"mp-cell": "../../miniprogram_npm/weui-miniprogram/cell/cell "     }
}

6、点击文档中的组件示例代码,开始ctrl C + ctrl V吧~

官方文档链接(这里是Slideview):

接: https://developers.weixin.qq.com/miniprogram/dev/extended/weui/slideview.html.

vant-weapp 小程序组件库

链接: https://youzan.github.io/vant-weapp/#/intro.

安装步骤同1、2条具体使用看组件文档

目录
相关文章
|
1月前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
|
1月前
|
小程序 JavaScript
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
|
1月前
|
JavaScript 前端开发
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
18 0
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
|
1月前
|
JavaScript 前端开发 小程序
Vue 3的高颜值UI组件库
Vue 3的高颜值UI组件库
54 1
|
2月前
|
存储 小程序 JavaScript
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
|
2月前
|
JSON 小程序 数据格式
【微信小程序】-- 自定义组件总结 (四十)
【微信小程序】-- 自定义组件总结 (四十)
|
12天前
|
前端开发 搜索推荐 UED
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
【4月更文挑战第30天】探索Flutter的高级UI组件,如`TabBar`、`Drawer`、`BottomSheet`,提升应用体验和美观度。使用高级组件能节省开发时间,提供内置交互逻辑和优秀视觉效果。示例代码展示了如何实现底部导航栏、侧边导航和底部弹出菜单。同时,自定义组件允许个性化设计和功能扩展,但也带来性能优化和维护挑战。参考Flutter官方文档和教程,深入学习并有效利用这些组件。
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
|
1月前
|
小程序
【微信小程序6】引入第三方UI的方法(ColorUi)
【微信小程序6】引入第三方UI的方法(ColorUi)
22 0
|
1月前
【实用】一个移动端简单的UI弹窗组件,虽算不上高大上,但至少耐看
【实用】一个移动端简单的UI弹窗组件,虽算不上高大上,但至少耐看
|
1月前
|
JavaScript
UI库的按需加载(vue的问题)
UI库的按需加载(vue的问题)
14 0

热门文章

最新文章