微信小程序学习——使用外部UI库

---

前言

        使用外部UI库可以更加迅速高效的提高开发效率，节省一些时间。

一、安装vant weapp组建库

1、安装nodejs及配置环境变量

（1）搜索 下载 | Node.js 中文网

（2）选择“全部安装包”，选择需要的版本进行下载，可以选择v11.0.0版本，然后将其解压，就安装好了。

（3）打开nodejs文件夹，在里边建立两个文件夹，

• 一个是node_cache:用来存储缓存
• 一个是node_global:用来存储全局变量

（4）配置环境变量

点击此电脑--->属性--->高级设置--->环境变量--->在系统变量下，点击新建

然后变量名为：NODE_HOME, 变量值就是存放nodejs的位置

然后在系统变量中找到path，双击，

点击新建三个

• 一个填入 %NODE_HOME%
• 一个填入%NODE_HOME%\node_cache
• 一个填入%NODE_HOME%\node_global

（5）打开cmd，输入  node -v  和  npm -v  查看node 和npm的版本

（6）配置缓存路径和全局路径

分别输入以下两条指令：

（注： "D:\Program Flies\nodejs\node_global"是刚刚新建的node_global路径，下面的同理）

npm config set prefix "D:\Program Flies\nodejs\node_global"

npm config set prefix "D:\Program Flies\nodejs\node_cache"

 （7）下载镜像

输入以下命令：

npm config set registry https://registry.npm.tabao.org

 （8）查看是否生效

输入：npm config ls

 这样就配置好了。

2、安装vant weapp组建库

（1）右击miniprogram，选择在外部终端窗口打开

（2）依次输入以下命令

npm init -y

npm i @vant/weapp -s --production

 到这里安装好了外部库 。

二、使用vant weapp 组建库的调用

1.构建npm

在微信开发者工具中的导航栏中选择工具-->构建npm

2.调用外部库

（1）新建文件夹命名为testUI，然后新建page ,命名为testUI

（2）在testUI.json中写入如下代码：

{
  "usingComponents": {
    "van-grid":"@vant/weapp/grid/index",
    "van-grid-item":"@vant/weapp/grid-item/index"
  }
}

（3）使用外部库进行九宫格的渲染

在testUI.wxml输入以下代码 :

（4）结果如下：

 

---

总结

以上就是外部ui库的安装及使用的内容。