大家好，我是小蜗牛，昨天刚看完小程序的界面构成，感觉界面还是挺复杂的啊。。。

今天我想能不能开始做做小程序呈现的界面，由于我也不是什么专业的前端，想来想去，还是采取最直接的方式吧。

没错，就是模仿，搜索一个个人博客的小程序进行页面仿写。

经过一轮千挑万选，终于决定要模仿的个人博客UI界面

很清爽的界面

界面分析

看小程序构成，由顶端的轮播图、中部的三个选项卡、底部的四个按钮组成，蜗牛感觉，整个小程序由4-5个页面组成。

包括首页(index)、分类页(category pages)、列表页(article_list)、文章页(article)、个人中心(userinfo)。

（Ps：留言板块后期看看能不能加入。。。）

尝试引入UI组件

蜗牛发现好像微信小程序官方支持引入第三方UI组件，本着方便快捷的原则，蜗牛打算使用第三方UI库。。

最后选定，使用Vant Weapp，这是移动端Vue组件库vant的小程序版本，有兴趣的朋友可以度娘下。

微信小程序引入UI组件具体流程（以VantWeapp UI为例）

使用VantWeapp UI组件需要注意：

Vant Weapp需要安装Node.js(环境，在后端运行JavaScript代码)和npm(Node.js的包管理工具)

1、安装Node.js网址：，下载后直接安装，当安装好node.js环境后，自带npm工具。

2、打开微信开发者工具，在调试器中找到终端，点击创建终端

新建终端

3、新建终端后，

// 验证node.js是否安装成功，运行下面的命令

node -v

//验证npm工具是否安装成功

npm -v

如下图显示，则环境、工具安装完成

确认node.js环境搭建成功

4、创建一个node.js项目

在微信开发者工具的终端页面，输入命令

// 使用npm命令项目初始化

npm init

之后弹出的所有需要输入的内容一直按回车即可。

// 下载miniprogram依赖，输入命令

npm i miniprogram-sm-crypto --production

同时，在微信开发者工具中，需要勾选使用npm依赖，在右上角，详细选项卡中

使用npm模块，打钩

5、开始安装VantWeapp库

根据官方文档，我们选择使用npm安装

(Ps：这里官方提供了几种安装途径，每种安装途径调用方式都不一样，我们这里是使用npm安装)

通过npm安装

在微信开发者工具的终端中，运行命令

npm i @vant/weapp -S --production

运行完成后，下一步

6、构建npm包

回到微信开发者工具，工具->构建npm，等待构建成功。

构建npm

7、构建成功后，使用UI库的方法

首先，根据VantWeapp的官方文档，选择心仪的组件，控件

文档地址：

ui组件官方文档

其次，引入UI库，我这里引入的是button按钮，在微信小程序主页的index.json文件中引入组件

引入组件

最后，在前端页面，index.wxml直接使用即可，如下图

在wxml中使用

实际效果

vantweappButton效果

总结

今天主要了解微信小程序如何引入第三方ui组件库，同时，确定博客小程序的页面构成。

蜗牛跟着预览图试一下能不能把人家的页面实现。。。好的，今天就先到这里。

如果对你有帮助的，麻烦点个赞点个关注吧~谢谢Thanks♪(･ω･)ﾉ