项目需求：
- 使用uniapp开发微信小程序
- 在uniapp项目中使用小程序ui-vant weapp组件
想要知道如何在uniapp项目中引入使用小程序ui-vant weapp组件，首先得了解如果在uniapp项目中使用小程序组件
uniapp对小程序自定义组件支持
微信小程序组件需要放在项目特殊文件夹 wxcomponents。
- HBuilderX 建立的工程 wxcomponents 文件夹在
项目根目录下。 - vue-cli 建立的工程 wxcomponents 文件夹在
src 目录下。
image.png
使用方式
![]()
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
