小程序学习笔记-引入第三方UI

喜欢ヅ旅行 2022-04-10 06:41 220阅读 0赞

> **小编推荐：**[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。

小程序使用npm引入第三方UI，经常出现错误，没有node\_modules,导致无法引入第三方UI等

![Image 1][]

image.png

正确操作应该是：

先新建一个小程序项目，初始化npm项目

npm init

执行成功，会生成一个package.json 文件

{
      "name": "weapp-hotel",
      "version": "1.0.0",
      "description": "A Wechat Small programming : weapp-hotel",
      "main": "app.js",
      "scripts": {
        "test": ""
      },
      "repository": {
        "type": "git",
        "url": "https://gitee.com/wangslei/weapp-hotel.git"
      },
      "keywords": [
        "weapp-hotel"
      ],
      "author": "wangsl",
      "license": "ISC",
      "dependencies": {}
    }

下来生成package-lock.json，记录使用的第三方插件

npm install --production

内容如下

{
      "name": "weapp-hotel",
      "version": "1.0.0",
      "lockfileVersion": 1,
      "requires": true,
      "dependencies": {}
      }
    }

接着引入第三方组件

npm i vant-weapp -S --production -verbose

> 此处请务必使用–production选项，可以减少安装一些业务无关的 npm 包，从而减少整个小程序包的大小。  
> \-verbose 是为了输出详细信息（可以不要），英文翻译是 冗余 的意思

然后点击工具 => 构建npm

![Image 1][]

image

![Image 1][]

image.png

![Image 1][]

image.png

勾选“使用 npm 模块”选项：

![Image 1][]

微信截图\_20181211134118.png

引用UI组件

有赞让我们这样使用

{
      "usingComponents": {
        "van-button": "/path/to/vant-weapp/dist/button/index"
      }
    }

对于我们的项目我们改成自己的目录

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

但是运行时我们会发现会报错

![Image 1][]

image

这个需要添加一个目录dist

![Image 1][]

image

这样引用第三方组件就OK了！

### 最后推荐几个不错的第三方UI组件库 ###

--------------------

1. WeUI WXSS

WeUI WXSS是腾讯官方UI组件库WeUI的小程序版，提供了跟微信界面风格一致的用户体验。

**GitHub地址**：[https://github.com/Tencent/weui-wxss][https_github.com_Tencent_weui-wxss]

**npm下载**：npm i weui-wxss

--------------------

2. iView WeApp

iView是TalkingData发布的一款高质量的基于Vue.js组件库，而iView weapp则是它们的小程序版本。

**GitHub地址**：[https://github.com/TalkingData/iview-weapp][https_github.com_TalkingData_iview-weapp]

**npm下载**：npm i iview-weapp

--------------------

3. ZanUI WeApp

ZanUI WeApp是有赞移动 Web UI 规范 ZanUI 的小程序现实版本，结合了微信的视觉规范，为用户提供更加统一的使用感受。

现已包含 badge、btn、card、cell、dialog、icon、label、noticebar、panel、popup、switch、tab、toast、toptips 等组件或元素。

**GitHub地址**：[https://github.com/youzan/vant-weapp][https_github.com_youzan_vant-weapp]

**npm下载**：npm i zanui-weapp

另外，zanui也使用 mpvue 重写 zanui-weapp，实现了其中所有组件。

**GitHub地址**：[https://github.com/samwang1027/mpvue-zanui][https_github.com_samwang1027_mpvue-zanui]

**npm下载：**npm i mpvue-zanui

--------------------

4. MinUI

MinUI 是蘑菇街前端开发团队开发的基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库，适用场景广，覆盖小程序原生框架，各种小程序组件主流框架等，并且提供了专门的命令行工具。

**GitHub地址**：[https://github.com/meili/minui][https_github.com_meili_minui]

--------------------

5. Wux WeApp

Wux WeApp也是一个非常不错的微信小程序自定义 UI 组件库，组件比较丰富，值得使用。

**GitHub地址**：[https://github.com/wux-weapp/wux-weapp][https_github.com_wux-weapp_wux-weapp]

**npm下载**：npm i wux-weapp

作者：赵客缦胡缨v吴钩霜雪明  
链接：https://www.jianshu.com/p/8f47312e49d4

### 关于Fundebug ###

[Fundebug][]专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了9亿+错误事件，得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用！

[![2018121912254161][]][2018121912254161]

[Fundebug]: https://www.fundebug.com/
[Image 1]: 
[https_github.com_Tencent_weui-wxss]: https://github.com/Tencent/weui-wxss
[https_github.com_TalkingData_iview-weapp]: https://github.com/TalkingData/iview-weapp
[https_github.com_youzan_vant-weapp]: https://github.com/youzan/vant-weapp
[https_github.com_samwang1027_mpvue-zanui]: https://github.com/samwang1027/mpvue-zanui
[https_github.com_meili_minui]: https://github.com/meili/minui
[https_github.com_wux-weapp_wux-weapp]: https://github.com/wux-weapp/wux-weapp
[2018121912254161]: /images/20220402/05fddeaff24b4a05911f11a9c3757df3.png