一、自定义组件

1. 创建components文件夹以及组件tag文件夹

2. 右击新建一个component

• 新建component才是定义一个组件

  
  

3. 首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）

//  tag.json
{
    "component": true,
    "usingComponents": {}
}

4.在 wxml 文件中编写组件模板

// tag.wxml
<view class="item-wrap">
    <view class="left-img">
        <image src="{{imgUrl}}"></image>
    </view>
    <view class="right-text">
        <text class="dishName">{{dishName}}</text>
        <text class="shopName">{{shopName}}</text>
        <text class="dishPrice">￥{{dishPrice}}</text>
    </view>
</view>

5. 在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法

• 组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的，在properties中去绑定属性值

// tag.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        id: {
            type: Number,
        },
        imgUrl: {
            type: String,
            value: ''
        },
        dishName: {
            type: String,
            value: ''
        },
        shopName: {
            type: String,
            value: ''
        },
        dishPrice: {
            type: String,
            value: ''
        }
    },

    /**
     * 组件的初始数据
     */
    data: {

    },

    /**
     * 组件的方法列表
     */
    methods: {
        
    }
})

6. 在需要使用的页面的json文件中去注册组件

• "组件标签名"："组件的地址"

// index.json
{
  "usingComponents": {
    "mytag": "../../components/tag/tag"
  },
  "enablePullDownRefresh": true
}

7. 在需要使用组件的页面的wxml文件中去使用组件

• 设置在properties中绑定的属性值，可以将属性值传到组件中去

<view class="menu">
    <mytag wx:for="{{productList}}" wx:key="index" wx:for-item="menuItem" imgUrl="{{menuItem.picture}}" dishName="{{menuItem.product}}" shopName="{{menuItem.shop}}" dishPrice="{{menuItem.price}}" bindtap="openDishHandle" data-shopId="{{menuItem.id}}"></mytag>
</view>

二、Vant Weapp轻量级UI组件库

1. 通过npm命令行安装组件库

• 在项目所在的文件夹中去打开命令行

npm i @vant/weapp -S --production

2.构建 npm 包

（1）打开微信开发者工具，右上角点击 详情 --> 本地设置 --> 勾选使用npm模块

3.打开微信开发者工具，左上角点击 工具 --> 构造npm

4. 若点击构造npm时报错，npm构造文件不存在，则需要对npm进行初始化

• 在项目所在的文件夹中去打开命令行

npm init -y

初始化完成以后，再去构造npm

5. 使用vant weapp组件

（1）在json文件中引入

"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

（2）在wxml文件中使用

<van-button type="default">默认按钮</van-button>