微信小程序引入第三方UI组件

需要引入第三方UI组件  Vant-Weapp

打开终端，输入cd 拖拽项目文件到终端，然后输入命令npm init

此时，输入package name名称，一直点回车就行

出现Is this OK?(yes)，直接回车即可

在终端输入命令npm i vant-weapp -S --production

在回过头看，在微信小程序开发工具中会多一个文件package.json，在这里面就可以进行包的配置。

这个时候可以在项目文件夹中看见一个新生成的文件夹miniprogram_npm，其中就有我们刚刚安装好的vant组件库

这里要注意，一定是将引入的第三方组件写入“usingComponents”的字典中，如果写成平级的话，会提示page.json [vant-button]无效

<vant-button type="danger">微信登陆</vant-button>

先做小程序“我的”页面，需要注意的有两个点：

先上图，有图才有真相：

这一块我增加了一个隐藏的button, 未获取到用户信息时，显示为默认头像和“微信授权”的文字提示，登陆后，头像变为微信头像，文字变为微信昵称。

具体ui为判断没有授权则显示默认头像及提示，并在其上层覆盖一个透明的button，用户触发授权事件。

在js中需要注意的是，open-type="getUserInfo"需要做老版本兼容，老版本通过wx.getUserInfo即可唤起授权页面，不需要添加button去触发

详情见下一篇： 微信小程序：“我的”页面布局（二）：可配置功能菜单列表

微信小程序：“我的”页面布局（一）：微信用户信息获取及UI

微信小程序：“我的”页面布局（二）：可配置功能菜单列表

---