3.uniapp项目中引入小程序ui -vant weapp组件

项目需求：

• 使用uniapp开发微信小程序
• 在uniapp项目中使用小程序ui-vant weapp组件

想要知道如何在uniapp项目中引入使用小程序ui-vant weapp组件，首先得了解如果在uniapp项目中使用小程序组件

uniapp对小程序自定义组件支持

微信小程序组件需要放在项目特殊文件夹 wxcomponents。

• HBuilderX 建立的工程 wxcomponents 文件夹在 项目根目录下。
• vue-cli 建立的工程 wxcomponents 文件夹在 src 目录下。

image.png

使用方式

image.png

在 pages.json 对应页面的 style -> usingComponents 引入组件：

{
    "pages": [{
        "path": "index/index",
        "style": {
            // #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
            "usingComponents": {
                "custom": "/wxcomponents/custom/index"
            },
            // #endif
            "navigationBarTitleText": "uni-app"
        }
    }]
}

在页面中使用

• 注意数据和事件绑定的差异，组件使用时应按照 vue 的数据和事件绑定方式
  • 属性绑定从 attr="{{ a }}"，改为 :attr="a"；从 title="复选框{{ item }}" 改为 :title="'复选框' + item"
  • 事件绑定从 bind:click="toggleActionSheet1" 改为 @click="toggleActionSheet1"，目前支付宝小程序不支持 vue 的事件绑定方式，具体参考：支付宝小程序组件事件监听示例
  • 阻止事件冒泡 从 catch:tap="xx" 改为 @tap.native.stop="xx"
  • wx:if 改为 v-if
  • wx:for="{{ list }}" wx:key="{{ index }}" 改为v-for="(item,index) in list"

uniapp官网上有一句话：

当需要在 vue 组件中使用小程序组件时，注意在 pages.json 的 globalStyle 中配置 usingComponents，而不是页面级配置。

我对这句话的理解是：

• 如果你是在页面中使用小程序组件，可以按照上面介绍的方式，在注册此页面的时候，在配置的style.usingComponents对象中注册页面中要使用的小程序组件
• 如果你是想在封装的vue组件A中使用小程序组件，既然A被封装为组件，那就代表它可能在所有的页面或组件中被使用，则A中使用的小程序组件就可能被用在整个项目任何地方，这次就必须全局注册此小程序组件

而我们想在uniapp项目中使用vant weapp微信小程序组件的诉求，其实是想在项目中任何位置都可以使用vant组件，所以我们需要全局注册vant小程序组件

在uniapp项目中全局注册vant微信小程序组件

1.打开vant weapp小程序官网，点击顶部导航右边的git图标，进入在git上的地址

https://vant-contrib.gitee.io/vant-weapp/#/quickstart

image.png

https://github.com/youzan/vant-weapp

image.png

2.执行下面命令把vant weapp源码下载下来后，

git clone https://github.com/youzan/vant-weapp.git

3.把dist目录下的文件，拷贝到wxcomponents目录下

image.png

4.全局注册在uniapp项目中使用到的vant微信小程序组件

{
  "pages": [
    //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "uni-app"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8",
    "usingComponents": {
      "van-button": "/wxcomponents/button/index",
      "van-field": "/wxcomponents/field/index",
      "van-switch": "/wxcomponents/switch/index",
      "van-search": "/wxcomponents/search/index",
      "van-cell-group": "/wxcomponents/cell-group/index",
      "van-cell": "/wxcomponents/cell/index",
      "van-radio": "/wxcomponents/radio/index",
      "van-radio-group": "/wxcomponents/radio-group/index",
      "van-checkbox": "/wxcomponents/checkbox/index",
      "van-checkbox-group": "/wxcomponents/checkbox-group/index",
      "van-picker": "/wxcomponents/picker/index",
      "van-popup": "/wxcomponents/popup/index",
      "van-grid": "/wxcomponents/grid/index",
      "van-grid-item": "/wxcomponents/grid-item/index",
      "van-row": "/wxcomponents/row/index",
      "van-col": "/wxcomponents/col/index",
      "van-count-down": "/wxcomponents/count-down/index",
      "van-icon": "/wxcomponents/icon/index",
      "van-tab": "/wxcomponents/tab/index",
      "van-tabs": "/wxcomponents/tabs/index",
      "van-divider": "/wxcomponents/divider/index",
      "van-dialog": "/wxcomponents/dialog/index",
      "van-toast": "/wxcomponents/toast/index",
      "van-stepper": "/wxcomponents/stepper/index",
      "van-slider": "/wxcomponents/slider/index",
      "van-tag": "/wxcomponents/tag/index",
      "van-loading": "/wxcomponents/loading/index",
      "van-overlay": "/wxcomponents/overlay/index",
      "van-collapse": "/wxcomponents/collapse/index",
      "van-collapse-item": "/wxcomponents/collapse-item/index",
      "van-dropdown-item": "/wxcomponents/dropdown-item/index",
      "van-dropdown-menu": "/wxcomponents/dropdown-menu/index",
      "van-empty": "/wxcomponents/empty/index",
      "van-notice-bar": "/wxcomponents/notice-bar/index",
      "van-image": "/wxcomponents/image/index",
      "van-datetime-picker": "/wxcomponents/datetime-picker/index",
      "van-uploader": "/wxcomponents/uploader/index"
    }
  }
}

并不需要注册所有的，你使用那个组件注册那个就行

5.在App.vue中引入UI样式

image.png

6.使用微信小程序组件

注意事项：

image.png