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

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

npm init -y

2、执行命令安装 npm 包：

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

npm install --save weui-miniprogram

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

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条具体使用看组件文档

微信小程序引入UI组件库相关推荐

微信小程序引入WeUI组件库（笔记）
1. 在微信小程序的根目录新建一个weui.wxss的文件 2. 将https://raw.githubusercontent.com/Tencent/weui-wxss/master/dist/st ...
微信小程序引入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组件库
微信小程序调用Vant组件库 Vant Weapp 微信小程序引入Vant Weapp 调用Vant Weapp组件 Vant Weapp 轻量.可靠的小程序 UI 组件库链接: vant开发指南. ...
微信小程序引入vant-weapp组件遇到的bug以及解决方法
微信小程序引入vant-weapp组件遇到的bug问题原本百度了一波,说只要安装了node还有npm之后,使用gitBash命令行工具直接cd到根目录下然后直接引入以下代码: npm i vant- ...
微信小程序引入阿里巴巴图标库（不下载）
微信小程序引入阿里巴巴图标库(不下载)@TOC 阿里图标地址:https://www.iconfont.cn 第一步:选择资源管理-我的项目-选择Font class-查看在线链接-点击下方css链接 ...
微信小程序引入阿里巴巴图标库
微信小程序引入阿里巴巴图标库在阿里巴巴图标库下载需要的图标,得到iconfont.wxss文件. 将iconfont.wxss文件放在style目录下. 在app.wxss引入,页面里面添加代码 @ ...
微信小程序引入日历组件
GitHub - treadpit/wx_calendar: 微信小程序-日历组件
微信小程序引入原生组件——WeUI组件库，详细步骤
第一步:查看是否可使用npm命令,没有则安装: 我这里已经安装了,如果没有则安装node.js node官网下载地址:https://nodejs.org/en/ 注意这个windows 64位的: ...
微信小程序----引入外部字体库iconfont的图标
WXRUI体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 直接使用阿里巴巴的网络路径选择iconfont图标官网:阿里巴巴矢量字体库步骤:阿里巴巴 ...

微信小程序引入UI组件库

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

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

vant-weapp 小程序组件库

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

微信小程序引入UI组件库相关推荐

最新文章

热门文章