微信小程序引入第三方UI库

朱雀 2023-07-10 12:40 132阅读 0赞

这里引入有赞的[vant-weapp][]，因为小程序已经支持使用 npm 安装第三方包，所以这里使用npm安装。  
小程序关于npm支持参考文档：[https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html][https_developers.weixin.qq.com_miniprogram_dev_devtools_npm.html]  
vant-weapp开发指南：[https://youzan.github.io/vant-weapp/\#/intro][https_youzan.github.io_vant-weapp_intro]

# 安装 vant-weapp #

1.  打开cmd，进入小程序根目录，输入：npm init
    
    一直点回车到结束,结束后项目根目录下会增加一个文件package.json
2.  输入命令：npm i @vant/weapp -S --production  
    ![在这里插入图片描述][20200302164642683.png]  
    执行命令完之后，项目根目录会出现node\_modules文件夹
3.  去微信开发者中点工具-构建npm，构建npm需要一些时间，完成后根目录增加一个文件夹miniprogram\_npm，里面放的是我们npm执行过程真正引用的包。可以理解为小程序版本的node\_moudles  
    这时候package.json文件中，dependencies对象中出现了@vant/weapp属性

# 引用vant-weapp #

1.  注册组件  
    以button组件为例，在app.json文件中增加一个属性,这里的路径是组件在miniprogram\_npm文件夹下的路径
    
        "usingComponents": { 
          "van-button": "@vant/weapp/button"
        }
2.  视图中引用组件  
    在页面中，如index.wxml中，添加就可以成功使用有赞的button了
    
        <van-button type="primary">按钮</van-button>

[vant-weapp]: https://github.com/youzan/vant-weapp
[https_developers.weixin.qq.com_miniprogram_dev_devtools_npm.html]: https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html
[https_youzan.github.io_vant-weapp_intro]: https://youzan.github.io/vant-weapp/#/intro
[20200302164642683.png]: https://img-blog.csdnimg.cn/20200302164642683.png