当前位置:   article > 正文

uniapp微信小程序引入vant组件库

uniapp微信小程序引入vant组件库

1、首先要有uniapp项目,根据vant官方文档使用yarn或npm安装依赖:

  1. 1、 yarn init 或 npm init
  2. 2、 # 通过 npm 安装
  3. npm i @vant/weapp -S --production
  4. # 通过 yarn 安装
  5. yarn add @vant/weapp --production
  6. # 安装 0.x 版本
  7. npm i vant-weapp -S --production

安装完依赖如下:

2、在uniapp项目根目录下(也可以指定目录)本案例在根目录下新建:wxcomponents文件夹

!!!!必须是wxcomponents文件夹!

!!!!必须是wxcomponents文件夹!

!!!!必须是wxcomponents文件夹!

(原因:和微信开发者工具内部编译文件名一致,具体原因不详)

3、将node_modules/@vant/weapp/下的dist文件夹复制粘贴到wxcomponents文件夹下(wxcomponents/dist)或者(wxcomponents/vant/dist)等等确保文件正确

        截图如下:

4、配置样式在App.vue文件中:

  1. <style lang="scss">
  2. /*每个页面公共css */
  3. /* #ifdef MP-WEIXIN */
  4. @import "/wxcomponents/dist/common/index.wxss"; //路径要确保正确!!!!
  5. /* #endif */
  6. </style>

 5、配置按需引入vant组件模块在pages.json文件夹中:

  1. "globalStyle": {
  2. "navigationBarTextStyle": "black",
  3. "navigationBarTitleText": "uni-app",
  4. "navigationBarBackgroundColor": "#F8F8F8",
  5. "backgroundColor": "#F8F8F8",
  6. "usingComponents": {
  7. "van-button": "/wxcomponents/dist/button/index",
  8. "van-circle": "/wxcomponents/dist/circle/index"
  9. }
  10. },

 

 6、使用引入的模块:

运行结果:

代码:

  1. <template>
  2. <view class="content">
  3. <van-button type="default">默认按钮</van-button>
  4. <van-button type="primary">主要按钮</van-button>
  5. <van-button type="info">信息按钮</van-button>
  6. <van-button type="warning">警告按钮</van-button>
  7. <van-button type="danger">危险按钮</van-button>
  8. <view style="margin-top: 30rpx;">
  9. <van-circle :value="value" :color="gradientColor" text="渐变色" />
  10. </view>
  11. </view>
  12. </template>
  13. <script>
  14. export default {
  15. data() {
  16. return {
  17. value: 0, //进度
  18. gradientColor: { //渐变色
  19. '0%': '#ffd01e',
  20. '50%': '#aa55ff',
  21. '100%': '#ee0a24',
  22. },
  23. item: null,
  24. }
  25. },
  26. onUnload() {
  27. clearInterval(this.item)
  28. this.item = null
  29. },
  30. onLoad() {
  31. this.item = setInterval(() => {
  32. if (this.value >= 100) {
  33. this.value = 0
  34. return
  35. } else {
  36. this.value += 10
  37. }
  38. }, 1000)
  39. },
  40. methods: {
  41. }
  42. }
  43. </script>
  44. <style>
  45. .content {
  46. display: flex;
  47. flex-direction: column;
  48. align-items: center;
  49. justify-content: center;
  50. }
  51. </style>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/445169
推荐阅读
相关标签
  

闽ICP备14008679号