微信小程序开发——Vant组件 & 自定义组件

一、Vant Weapp 组件

Vant组件介绍和使用具体参考Vant Weapp官网

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:是否显示内边框
readonly:是否只读
title-width:标题宽度
placeholder:输入框为空时占位符
custom-style:自定义样式
autosize:是否自适应内容高度,只对 textarea 有效,可传入对象,如 { maxHeight: 100, minHeight: 50 },单位为px



效果图:

4、Button 按钮组件

type:按钮类型,支持default、primary、info、warning、danger五种类型,默认为default。
size:按钮尺寸,可选值为 normal、large、small、mini,默认为normal。
color:按钮颜色,支持传入linear-gradient渐变色。
custom-style:自定义样式
loading:是否显示为加载状态
loading-text:加载状态提示文字
icon:左侧图标名称或图片链接。可选值参考,支持Icon组件里的所有图标,也可以传入图标 URL。
round:是否为圆形按钮
square:是否为方形按钮
disabled:是否禁用按钮
事件bind:click 点击按钮,且按钮状态不为加载或禁用时触发。使用bindclick 配合loading属性使用,可以实现节流效果。

添加

效果图:

5、Popup 弹出层组件

弹出层容器,用于展示弹窗、信息提示等内容,支持多个弹出层叠加展示。
show:是否显示弹出层
position:弹出位置,可选值为top、bottom、right、left。
custom-style:自定义弹出层样式
事件bind:close 关闭弹出层时触发

弹出内容

效果图:

6、Picker 选择器组件

columns:对象数组,配置每一列显示的数据
value-key:选项对象中,文字对应的 key。
show-toolbar:是否显示顶部栏
toolbar-position:顶部栏位置,可选值为bottom、top
title:顶部栏标题
loading:是否显示加载状态
defaultIndex:初始选中项的索引,默认为 0
item-height:选项高度
confirm-button-text:确认按钮文字
cancel-button-text:取消按钮文字
事件bind:confirm 点击确认按钮时触发。
事件bind:cancel 点击取消按钮时触发。
事件bind:change 选项改变时触发。

注意:Picker选择器组件必须配合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-剩余天数;hours-剩余小时;minutes-剩余分钟;seconds-剩余秒数;milliseconds-剩余毫秒


        限购
        1杯
        {{ timeData.days }}
        
        {{ timeData.hours }}
        :
        {{ timeData.minutes }}
        :
        {{ timeData.seconds }}

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 宫格组件

宫格可以在水平方向上把页面分隔成等宽度的区块,用于展示内容或进行页面导航。
column-num:列数
gutter:格子之间的间距,默认单位为px,默认值为0
border:是否显示边框,默认为true
center:是否将格子内容居中显示,默认为true
square:是否将格子固定为正方形,默认为false
direction:格子内容排列的方向,可选值为 horizontal、vertical
use-slot:是否使用自定义内容的插槽。自定义宫格的所有内容,需要设置use-slot属性。

      
          
              
              {{item.coffeename}}
              {{item.coffeeprice}}
              
                  
                      到手价
                      
                      {{item.coffeenowprice}}
                  
                  
                      
                  
              
          
      
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、介绍

开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。具体参考自定义组件官方文档

2、实现自定义组件

步骤(1)新建存放组件的目录

在项目中新建一个 components 文件夹,用于存放我们以后开发中的组件。

步骤(2)新建组件文件夹

以实现一个自定义tab菜单为例子,我们需要在components目录下新建一个tabMenu文件夹来存放tab菜单组件。然后 右击tabMenu下新建 Component 并命名为tabMenu。

tabMenu文件夹会生成对应的js、json、wxml、wxss4个文件,也就是一个自定义组件的组成部分。

步骤(3)在tabMenu.wxml文件中编写组件模版


  {{label}}
  {{item}}

步骤(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 构造器定义组件,并提供组件的属性、数据、方法等。组件的属性值和内部数据将被用于组件 wxml 的渲染。

properties:组件的属性列表,用于定义组件需要传递的属性。属性设置中可包含三个字段,type表示属性类型、value表示属性初始值、observer表示属性值被更改时的响应函数。
data:组件的内部数据,和properties一同用于组件的模板渲染。
methods:组件的方法列表,包括事件响应函数和任意的自定义方法。(在页面js文件中定义方法不需要写在methods中,注意区分。)
triggerEvent方法: 触发一个自定义事件,将值通过事件对象的方式回传出去。(因为组件内部的值发生变化时,页面内部的数据并不会随之改变。所以就需要通过触发自定义事件,将值回传出去)

Component({
  /**
   * 组件的属性列表,定义组件需要传递的属性
   */
  properties: {
    // 菜单标题
    label:{              // 属性名  
      type:String,       // 类型(必填),类型包括String、Number、Boolean、Object、Array、null(表示任意类型)
      value:''           // 默认值,设置为空
    },
    // 菜单选项内容
    list:{
      type:Array         // 类型是数组
    },
    // 高亮索引
    activeIndex:{
      type:Number,     // 类型是Number   
      value:0          // 默认值是0
    }
  },
  /**
   * 组件的初始数据
   */
  data: {    
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 选项点击事件
    click(e) {
      let {index} = wx.$key(e)      // 获取数据参数index
      this.setData({
        activeIndex: index        // 更新高亮索引
      })
      // 触发一个自定义事件,将值通过事件对象的方式回传出去
      this.triggerEvent('syncData',index)
    }
  }
})

步骤(6)页面中引入tabMenu组件

引入组件有两种方式:① 全局引入,在app.json文件中引入组件;② 局部引入,只在需要使用该组件的页面json文件中引入。
我选择了局部引入,在需要使用组件的shopcart页面中引用。
引用格式:"组件名":"组件路径"

shopcart.json文件:

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

shopcart.wxml文件:
注意:在组件中通过triggerEvent定义的触发事件,在页面中调用格式为bind:事件名=""。例如bind:syncData="syncData"。


    {{sugarActive}}--{{plActive}}--{{wdActive}}
    
    
    
    

shopcart.js文件:

Page({
  data: {
    // 定义一个甜度数组
    sugars: ['全糖', '半糖', '少糖', '无糖'],
    // 甜度高亮索引
    sugarActive: 0,
    // 定义一个配料数组
    pls: ['珍珠', '红豆', '椰果', '布丁'],
    // 配料高亮索引
    plActive: 0,
    // 定义一个温度数组
    wds: ['常温', '多冰', '少冰', '去冰'],
    // 温度高度索引
    wdActive: 0,
  },
 
  //同步组件回传的数据
  syncData(e){
    //获取data参数(获取指定的active)
    let {active} = e.currentTarget.dataset
    //获取组件内部回传的值
    let {detail} = e
    this.setData({
      //给指定的active重新赋值
      [active]:  detail
    })
  }
})

步骤(7)自定义tab菜单效果

3、slot插槽的使用

使用组件时,如果要显示两个组件标签中间的内容,需要使用slot插槽。

(1)tabMenu.wxml文件

组件中的slot标签,用于定义插槽。使用组件时,两个组件标签中间的内容都会放到插槽中。


    {{label}}
    {{item}}
    

(2)shopcart.wxml文件

调用组件的页面,在自定义组件标签中添加slot属性,就可以使用插槽。


    插槽内容

(3)页面效果

你可能感兴趣的:(微信小程序开发——Vant组件 & 自定义组件)