一、Vant Weapp 組件

Vant組件介紹和使用具體參考Vant Weapp官網(wǎng)

1、下載Vant Weapp

步驟（1）npm包初始化

初始化包望众，自動生成package.json文件琼蚯。

npm init

步驟（2）通過 npm 安裝 Vant Weapp

npm i @vant/weapp -S --production

步驟（3）修改 app.json

將 app.json 中的 "style": "v2" 去除躺枕，小程序的新版基礎組件強行加上了許多樣式家制，難以覆蓋暂雹，不關閉將造成部分組件樣式混亂策治。

步驟（4）構建 npm 包

在詳情-本地設置中勾選 使用 npm 模塊 選項脓魏，并點擊 工具 -> 構建 npm，構建完成后通惫，即可引入組件茂翔。

構建完成后，會自動生成miniprogram_npm文件夾履腋，表示構建完成珊燎。

2、引入組件

在.json文件中配置使用的組件遵湖，可以在全局中配置悔政，也可以在單獨頁面中配置。
在app.json或index.json中引入某個組件延旧。

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

3谋国、Field 輸入框組件

label：輸入框左側文本
value：當前輸入的值
type：可設置為任意原生類型, 如 number idcard textarea digit
border：是否顯示內(nèi)邊框
readonly：是否只讀
title-width：標題寬度
placeholder：輸入框為空時占位符
custom-style：自定義樣式
autosize：是否自適應內(nèi)容高度，只對 textarea 有效迁沫，可傳入對象,如 { maxHeight: 100, minHeight: 50 }芦瘾，單位為px

<van-field label="分類:" title-width="100rpx" model:value="{{ section_name }}" placeholder="請輸入分類" border="{{ true }}" readonly bindtap="openpopup" />
<van-field label="答案:" title-width="100rpx" model:value="{{ answer }}" placeholder="請輸入答案" border="{{ true }}" type="textarea" autosize custom-style="height:160rpx" />

效果圖：

4捌蚊、Button 按鈕組件

type：按鈕類型，支持default近弟、primary缅糟、info、warning藐吮、danger五種類型溺拱，默認為default。
size：按鈕尺寸谣辞，可選值為 normal迫摔、large、small泥从、mini句占，默認為normal。
color：按鈕顏色躯嫉，支持傳入linear-gradient漸變色纱烘。
custom-style：自定義樣式
loading：是否顯示為加載狀態(tài)
loading-text：加載狀態(tài)提示文字
icon：左側圖標名稱或圖片鏈接∑聿停可選值參考擂啥，支持Icon組件里的所有圖標，也可以傳入圖標 URL帆阳。
round：是否為圓形按鈕
square：是否為方形按鈕
disabled：是否禁用按鈕
事件bind:click 點擊按鈕哺壶，且按鈕狀態(tài)不為加載或禁用時觸發(fā)。使用bindclick 配合loading屬性使用蜒谤，可以實現(xiàn)節(jié)流效果山宾。

<van-button icon="plus" type="primary" size="small" bindclick="addSubject" loading="{{isLoading}}" custom-style="width:130rpx" color="#8fb2c9">添加</van-button>

效果圖：

5、Popup 彈出層組件

彈出層容器鳍徽，用于展示彈窗资锰、信息提示等內(nèi)容，支持多個彈出層疊加展示阶祭。
show：是否顯示彈出層
position：彈出位置绷杜，可選值為top、bottom濒募、right鞭盟、left。
custom-style：自定義彈出層樣式
事件bind:close 關閉彈出層時觸發(fā)

<van-popup show="{{ isShow }}" bind:close="closepopup" position="bottom">彈出內(nèi)容</van-popup>

效果圖：

6萨咳、Picker 選擇器組件

columns：對象數(shù)組，配置每一列顯示的數(shù)據(jù)
value-key：選項對象中疫稿，文字對應的 key培他。
show-toolbar：是否顯示頂部欄
toolbar-position：頂部欄位置鹃两，可選值為bottom、top
title：頂部欄標題
loading：是否顯示加載狀態(tài)
defaultIndex：初始選中項的索引舀凛，默認為 0
item-height：選項高度
confirm-button-text：確認按鈕文字
cancel-button-text：取消按鈕文字
事件bind:confirm 點擊確認按鈕時觸發(fā)俊扳。
事件bind:cancel 點擊取消按鈕時觸發(fā)。
事件bind:change 選項改變時觸發(fā)猛遍。

注意：Picker選擇器組件必須配合Popup彈出層組件使用馋记，不能單獨使用。

<van-popup show="{{ isShow }}" bind:close="closepopup" position="bottom">
    <van-picker show-toolbar columns="{{ columns }}" value-key="Name" bind:cancel="onCancel" bind:confirm="onConfirm" title="請選擇分類" defaultIndex="{{activeIndex}}"/>
</van-popup>

Page({
    data: {
        isLoading:false,
        isShow:false,
        activeIndex:0,
        columns: [
            { Name: '杭州' },
            { Name: '寧波' },
            { Name: '溫州' },
          ]
    }
})

效果圖：

7懊烤、CountDown 倒計時組件

time：倒計時時長梯醒，單位毫秒
format：時間格式，DD-日腌紧，HH-時茸习，mm-分，ss-秒壁肋，SSS-毫秒号胚，默認為HH:mm:ss
auto-start：是否自動開始倒計時，默認為true
use-slot：是否使用自定義樣式插槽浸遗，默認為false
timeData 格式：days-剩余天數(shù)猫胁；hours-剩余小時；minutes-剩余分鐘跛锌；seconds-剩余秒數(shù)弃秆；milliseconds-剩余毫秒

<van-count-down use-slot time="{{ time }}" bind:change="onChange">
        <text class="limit">限購</text>
        <text class="red">1杯</text>
        <text class="item">{{ timeData.days }}</text>
        <text class="red">天</text>
        <text class="item">{{ timeData.hours }}</text>
        <text class="red">:</text>
        <text class="item">{{ timeData.minutes }}</text>
        <text class="red">:</text>
        <text class="item">{{ timeData.seconds }}</text>
</van-count-down>

Page({
    data: {
      time: 310 * 67 * 60 * 1000,
      timeData: {},
    },
    onChange(e) {
        let {detail:{days, hours, minutes,seconds}}=e
        this.setData({
          timeData: {
            days:wx.$formatNumber(days), 
            hours:wx.$formatNumber(hours), 
            minutes:wx.$formatNumber(minutes),
            seconds:wx.$formatNumber(seconds)
          }
        });
      },
  })

效果圖：

8、Grid 宮格組件

宮格可以在水平方向上把頁面分隔成等寬度的區(qū)塊察净，用于展示內(nèi)容或進行頁面導航驾茴。
column-num：列數(shù)
gutter：格子之間的間距，默認單位為px氢卡，默認值為0
border：是否顯示邊框锈至，默認為true
center：是否將格子內(nèi)容居中顯示，默認為true
square：是否將格子固定為正方形译秦，默認為false
direction：格子內(nèi)容排列的方向峡捡，可選值為 horizontal、vertical
use-slot：是否使用自定義內(nèi)容的插槽筑悴。自定義宮格的所有內(nèi)容们拙，需要設置use-slot屬性。

      <van-grid column-num="3" class="goods" border="{{false}}" center="{{false}}">
          <van-grid-item use-slot wx:for="{{coffeedata}}" wx:key="index" class="griditem">
              <image src="{{item.coffeeimg}}" class="goodsimg"></image>
              <view class="goodstitle">{{item.coffeename}}</view>
              <view class="goodstitle">{{item.coffeeprice}}</view>
              <view class="price">
                  <view class="left">
                      <view class="daoshou">到手價<view class="sjx"></view>
                      </view>
                      <view class="money">{{item.coffeenowprice}}</view>
                  </view>
                  <view class="right">
                      <image src="/assets/img/cart.PNG"></image>
                  </view>
              </view>
          </van-grid-item>
      </van-grid>

Page({
    data: {
      coffeedata: [{
          coffeeimg: 'https://img2.baidu.com/it/u=49756185,3106025596&fm=26&fmt=auto',
          coffeename: '厚乳拿鐵',
          coffeeprice: '￥ 28',
          coffeenowprice: '￥9.9'
        },
        {
          coffeeimg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp7.itc.cn%2Fimages01%2F20200729%2Ffd60a84256e5495aba620a0116346bdc.jpeg&refer=http%3A%2F%2Fp7.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639123029&t=779c7275557e3ddcd867b6d909330b36',
          coffeename: '隕石拿鐵',
          coffeeprice: '￥ 28',
          coffeenowprice: '￥9.9'
        },
        {
          coffeeimg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2F1affff12-dc7f-4319-4180-55a193c443d3%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639123114&t=15ec823e0e7d9478c3e4dfd5a51b9384',
          coffeename: '芋泥一起大紅袍',
          coffeeprice: '￥ 28',
          coffeenowprice: '￥9.9'
        }, {
          coffeeimg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp275163182.jpg&refer=http%3A%2F%2Fimg2.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639123140&t=262a7dc689229f9905cba8d0000d8b0e',
          coffeename: '抹茶瑞納冰',
          coffeeprice: '￥ 28',
          coffeenowprice: '￥9.9'
        }, {
          coffeeimg: 'https://img1.baidu.com/it/u=2792718596,1723163661&fm=26&fmt=auto',
          coffeename: '小鹿料多多',
          coffeeprice: '￥ 28',
          coffeenowprice: '￥9.9'
        }, {
          coffeeimg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqcloud.dpfile.com%2Fpc%2FLIpUEFVtAGyPgWr-yqgeJQb7fTtvawZ5sAInNXNpiScGuEGVW4L3mx2SmXf5pwCL5g_3Oo7Z9EXqcoVvW9arsw.jpg&refer=http%3A%2F%2Fqcloud.dpfile.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639123277&t=f9835f88b99afd9014352799cf8c6dc3',
          coffeename: '沖繩黑糖拿鐵',
          coffeeprice: '￥ 28',
          coffeenowprice: '￥9.9'
        }, {
          coffeeimg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F10%2F04%2F2157f3b2880c792.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639123376&t=0c7120755f992fa26ddf398d3bd92ae1',
          coffeename: '摩卡',
          coffeeprice: '￥ 28',
          coffeenowprice: '￥9.9'
        }, {
          coffeeimg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqcloud.dpfile.com%2Fpc%2F4zrG0tCu-if32NP4qPJ843CmN584sw6-jCZTOA6ZLg4HEjJJXBYQjVbJZhnXA8kE5g_3Oo7Z9EXqcoVvW9arsw.jpg&refer=http%3A%2F%2Fqcloud.dpfile.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639123407&t=d2530897a42d20199479f5ceeb6089ae',
          coffeename: '焦糖瑪奇朵',
          coffeeprice: '￥ 28',
          coffeenowprice: '￥9.9'
        }, {
          coffeeimg: 'https://img1.baidu.com/it/u=3530766208,3669403873&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          coffeename: '小隕石厚乳',
          coffeeprice: '￥ 28',
          coffeenowprice: '￥9.9'
        }
      ]
    },
  })

效果圖：

二阁吝、自定義組件

1砚婆、介紹

開發(fā)者可以將頁面內(nèi)的功能模塊抽象成自定義組件，以便在不同的頁面中重復使用；也可以將復雜的頁面拆分成多個低耦合的模塊装盯，有助于代碼維護坷虑。具體參考自定義組件官方文檔

2、實現(xiàn)自定義組件

步驟（1）新建存放組件的目錄

在項目中新建一個 components 文件夾埂奈，用于存放我們以后開發(fā)中的組件迄损。

步驟（2）新建組件文件夾

以實現(xiàn)一個自定義tab菜單為例子，我們需要在components目錄下新建一個tabMenu文件夾來存放tab菜單組件账磺。然后 右擊tabMenu下新建 Component 并命名為tabMenu芹敌。

tabMenu文件夾會生成對應的js、json垮抗、wxml氏捞、wxss4個文件，也就是一個自定義組件的組成部分借宵。

步驟（3）在tabMenu.wxml文件中編寫組件模版

<view class="tabMenu">
  <view class="label">{{label}}</view>
  <view class="item {{activeIndex===index?'active':''}}" bindtap="click" data-index="{{index}}"
  wx:for="{{list}}" wx:key="index">{{item}}</view>
</view>

步驟（4）在tabMenu.wxss文件中編寫組件樣式

.tabMenu {
    display: flex;
    align-items: center;
    margin: 10rpx 0;
}
.tabMenu .label{
    font-weight: bold;
}
.tabMenu .item{
    border: 2rpx solid #ccc;
    padding: 5rpx 10rpx;
    margin: 0 5rpx;
    color: #8fb2c9;
}
.tabMenu .item.active{
    background-color: #8fb2c9;
    color: white;
}

步驟（5）編寫tabMenu.js文件

js文件中幌衣，使用Component 構造器定義組件，并提供組件的屬性壤玫、數(shù)據(jù)豁护、方法等。組件的屬性值和內(nèi)部數(shù)據(jù)將被用于組件 wxml 的渲染欲间。

properties：組件的屬性列表楚里，用于定義組件需要傳遞的屬性。屬性設置中可包含三個字段猎贴，type表示屬性類型班缎、value表示屬性初始值、observer表示屬性值被更改時的響應函數(shù)她渴。
data：組件的內(nèi)部數(shù)據(jù)达址，和properties一同用于組件的模板渲染。
methods：組件的方法列表趁耗，包括事件響應函數(shù)和任意的自定義方法沉唠。（在頁面js文件中定義方法不需要寫在methods中，注意區(qū)分苛败。）
triggerEvent方法： 觸發(fā)一個自定義事件满葛，將值通過事件對象的方式回傳出去。（因為組件內(nèi)部的值發(fā)生變化時罢屈，頁面內(nèi)部的數(shù)據(jù)并不會隨之改變嘀韧。所以就需要通過觸發(fā)自定義事件，將值回傳出去）

Component({
  /**
   * 組件的屬性列表缠捌，定義組件需要傳遞的屬性
   */
  properties: {
    // 菜單標題
    label:{              // 屬性名  
      type:String,       // 類型（必填）锄贷，類型包括String、Number、Boolean谊却、Object蹂随、Array、null（表示任意類型）
      value:''           // 默認值因惭，設置為空
    },
    // 菜單選項內(nèi)容
    list:{
      type:Array         // 類型是數(shù)組
    },
    // 高亮索引
    activeIndex:{
      type:Number,     // 類型是Number   
      value:0          // 默認值是0
    }
  },
  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {    
  },
  /**
   * 組件的方法列表
   */
  methods: {
    // 選項點擊事件
    click(e) {
      let {index} = wx.$key(e)      // 獲取數(shù)據(jù)參數(shù)index
      this.setData({
        activeIndex: index        // 更新高亮索引
      })
      // 觸發(fā)一個自定義事件，將值通過事件對象的方式回傳出去
      this.triggerEvent('syncData',index)
    }
  }
})

步驟（6）頁面中引入tabMenu組件

引入組件有兩種方式：① 全局引入绩衷，在app.json文件中引入組件蹦魔；② 局部引入，只在需要使用該組件的頁面json文件中引入咳燕。
我選擇了局部引入勿决，在需要使用組件的shopcart頁面中引用。
引用格式："組件名":"組件路徑"

shopcart.json文件：

{
  "usingComponents": {
    "tabMenu":"/components/tabMenu/tabMenu"
  }
}

shopcart.wxml文件：
注意：在組件中通過triggerEvent定義的觸發(fā)事件招盲，在頁面中調用格式為bind:事件名=""低缩。例如bind:syncData="syncData"。

<view class="shopcart">
    {{sugarActive}}--{{plActive}}--{{wdActive}}
    <!-- 使用組件時曹货，傳遞list屬性咆繁、label屬性和activeIndex屬性 -->
    <tabMenu data-active="sugarActive" label="甜度：" list="{{sugars}}" activeIndex="{{sugarActive}}" bind:syncData="syncData"></tabMenu>
    <tabMenu data-active="plActive" label="配料：" list="{{pls}}" activeIndex="{{plActive}}" bind:syncData="syncData"></tabMenu>
    <tabMenu data-active="wdActive" label="溫度：" list="{{wds}}" activeIndex="{{wdActive}}" bind:syncData="syncData"></tabMenu>
</view>

shopcart.js文件：

Page({
  data: {
    // 定義一個甜度數(shù)組
    sugars: ['全糖', '半糖', '少糖', '無糖'],
    // 甜度高亮索引
    sugarActive: 0,
    // 定義一個配料數(shù)組
    pls: ['珍珠', '紅豆', '椰果', '布丁'],
    // 配料高亮索引
    plActive: 0,
    // 定義一個溫度數(shù)組
    wds: ['常溫', '多冰', '少冰', '去冰'],
    // 溫度高度索引
    wdActive: 0,
  },
 
  //同步組件回傳的數(shù)據(jù)
  syncData(e){
    //獲取data參數(shù)（獲取指定的active）
    let {active} = e.currentTarget.dataset
    //獲取組件內(nèi)部回傳的值
    let {detail} = e
    this.setData({
      //給指定的active重新賦值
      [active]:  detail
    })
  }
})

步驟（7）自定義tab菜單效果

3、slot插槽的使用

使用組件時顶籽，如果要顯示兩個組件標簽中間的內(nèi)容玩般，需要使用slot插槽。

（1）tabMenu.wxml文件

組件中的slot標簽礼饱，用于定義插槽坏为。使用組件時，兩個組件標簽中間的內(nèi)容都會放到插槽中镊绪。

<view class="tabMenu">
    <view class="label">{{label}}</view>
    <view class="item {{activeIndex===index?'active':''}}" wx:for="{{list}}" wx:key="index" bindtap="click" data-index="{{index}}" >{{item}}</view>
    <slot></slot>
</view>

（2）shopcart.wxml文件

調用組件的頁面匀伏，在自定義組件標簽中添加slot屬性，就可以使用插槽蝴韭。

<tabMenu slot data-active="wdActive" label="溫度：" list="{{wds}}" activeIndex="{{wdActive}}" bind:syncData="syncData">
    插槽內(nèi)容
</tabMenu>

（3）頁面效果