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"
        }
    }]
}

在页面中使用

<!-- 页面模板 (index.vue) -->
<view>
    <!-- 在页面中对自定义组件进行引用 -->
    <custom name="uni-app"></custom>
</view>

• 注意数据和事件绑定的差异，组件使用时应按照 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.使用微信小程序组件

<template>
  <view class="wrapper">
    <van-dialog id="van-dialog" />
    <van-toast id="van-toast" />
    <nav-bar
      :title="id ? '修改客户' : '新增客户'"
      :showBack="true"
      :backgroundColor="'transparent'"
    ></nav-bar>
    <scroll-view
      :refresher-enabled="false"
      :refresher-triggered="triggered"
      @refresherrestore="onRestore"
      scroll-y="true"
      class="page-container"
      :style="{ height: `calc(${getScrollViewHeight(false)})` }"
    >
      <view class="main-wrap">
        <view class="common-cell-wrap">
          <van-cell-group class="common-cell-group" :border="false">
            <van-field
              class="common-cell"
              :value="params.customerName"
              required
              placeholder="请输入名称"
              placeholder-style="color:#969CAC"
              :title-width="'112rpx'"
              @input="inputChange($event, 'customerName')"
            >
              <view slot="label" class="color-dark font14">名称</view>
            </van-field>
            <van-field
              class="common-cell"
              :value="params.custContactName"
              placeholder="请输入联系人"
              placeholder-style="color:#969CAC"
              :title-width="'112rpx'"
              @input="inputChange($event, 'custContactName')"
            >
              <view slot="label" class="color-dark font14">联系人</view>
            </van-field>
            <van-field
              class="common-cell"
              :value="params.custContactPhone"
              type="number"
              placeholder="请输入联系方式"
              placeholder-style="color:#969CAC"
              :title-width="'112rpx'"
              @input="inputChange($event, 'custContactPhone')"
            >
              <view slot="label" class="color-dark font14">联系方式</view>
            </van-field>
            <van-field
              class="common-cell"
              :value="params.address"
              placeholder="请输入联系地址"
              placeholder-style="color:#969CAC"
              :title-width="'112rpx'"
              @input="inputChange($event, 'address')"
            >
              <view slot="label" class="color-dark font14">联系地址</view>
            </van-field>
            <van-field
              class="common-cell"
              :value="params.credit"
              type="digit"
              placeholder="请输入信用额度"
              placeholder-style="color:#969CAC"
              :title-width="'112rpx'"
              @input="inputChange($event, 'credit')"
            >
              <view slot="label" class="color-dark font14">信用额度</view>
            </van-field>
          </van-cell-group>
        </view>
      </view>
      <view class="mt25">
        <van-button :disabled="disabled" round color="#4475FD" @click="submit"
          >确定</van-button
        >
      </view>
    </scroll-view>
  </view>
</template>
<script>
import { navBar } from "@/component/nav-bar";
import { addCustomer, editCustomer, getCustomerDetail } from "@/api/client";
export default {
  name: "AddClient",
  components: { navBar },
  data() {
    return {
      params: {
        custContactName: "",
        address: "",
        credit: "",
        customerName: "",
        custContactPhone: "",
      },
      disabled: false,
      id: null, //id有值，说明是编辑页面，无值说明是新增页面
    };
  },
  onLoad(option) {
    if (option.id) {
      this.id = option.id;
      this.getDetail();
    }
  },
  methods: {
    async getDetail() {
      const res = await getCustomerDetail({ customerId: this.id });
      this.params = res.data;
      delete this.params.balance;
      delete this.params.createTime;
    },
    inputChange(e, field) {
      this.params[field] = e.detail;
    },
    validate() {
      if (!this.params.customerName) {
        this.toast("请输入名称");
        return false;
      }
      if (this.params.credit && !this.$U.isSave2(this.params.credit)) {
        this.toast("信用额度最多两位小数");
        return false;
      }
      if (
        this.params.custContactPhone &&
        !this.$U.isTel(this.params.custContactPhone)
      ) {
        this.toast("手机号格式不正确");
        return false;
      }
      return true;
    },
    async submit() {
      const validateResult = this.validate();
      if (validateResult) {
        console.log("submit");

        if (this.disabled) return;
        try {
          this.disabled = true;
          if (this.id) {
            //编辑

            await editCustomer({ ...this.params });
          } else {
            //新增
            await addCustomer({ ...this.params });
          }

          this.toast.success(this.id ? "修改客户成功!" : "新增客户成功!");
          setTimeout(() => {
            uni.navigateBack();
          }, 500);
        } catch (error) {
          // this.toast(this.id ? "修改客户失败!" : "新增客户失败!");
        } finally {
          this.disabled = false;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  .page-container {
    box-sizing: border-box;
    background: #f6f7fb;
    padding: 20rpx;
    .main-wrap {
      box-sizing: border-box;
      border-radius: 10rpx;
      background: #fff;
      padding: 20rpx;
      .righticon {
        width: 12rpx;
        height: 12rpx;
      }
      .cell-righticon {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        img {
          width: 12rpx;
          height: 12rpx;
        }
      }
      .flex-center {
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
    }
    .flex {
      display: flex;
    }
    .mr18 {
      margin-right: 36rpx;
    }
    .mt25 {
      margin-top: 50rpx;
    }
    .mt15 {
      margin-top: 30rpx;
    }
  }
}

/deep/ .van-icon-cross {
  color: #969cac;
}
// 按钮大小
/deep/ .van-button {
  width: 100%;
}
</style>

注意事项：

image.png