走进小程序【四】小程序自定义Component如何使用，手把手封装一个底部Tabbar栏

news/2024/7/20 2:00:56 标签: 小程序, 微信小程序, javascript

文章目录

  • 🌟前言
  • 🌟先看效果
  • 🌟什么是小程序自定义Component
    • 🌟Component 组件化
    • 🌟小程序的自定义Component
    • 🌟创建自定义组件
    • 🌟使用自定义组件
  • 🌟封装Tabbar自定义组件
    • 🌟初始化文件结构
      • 🌟component/tabbar/index.json
      • 🌟component/tabbar/index.wxml
      • 🌟component/tabbar/index.wxss
      • 🌟component/tabbar/index.js
  • 🌟页面中使用
      • 🌟pages/home/index.json
      • 🌟pages/home/index.wxml
      • 🌟pages/home/index.js
  • 🌟结语

在这里插入图片描述

🌟前言

哈喽小伙伴们，上一期为大家讲解了一下小程序的代码构成并且搭建了一个简单的钢琴小程序，不知道大家有没有扫码去体验一下呢；这期给大家说一说小程序的自定义组件，并且搭建一个自定义的底部Tabbar栏；话不多说，咱们直接开整！🤘

🌟先看效果

在这里插入图片描述

🌟什么是小程序自定义Component

🌟Component 组件化

写Vue的小伙伴们应该都知道，Vue有一个很重要的思想就是组件化，为的是一次封装，多次复用;带来的好处就是当我们的业务功能重复繁琐时候就可以把主要功能抽离出来封装成组件，便于我们在多个地方去使用;还有就是框架的组件并不符合我们的实际业务功能，那么这个时候也需要我们去独立封装一个适用的组件。在我们微信小程序里边，也有组件化的思想，那它是怎么定义的呢？

🌟小程序的自定义Component

小程序自定义组件

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。

🌟创建自定义组件

类似于页面，一个自定义组件由 json、 wxml、 wxss、 js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）：

javascript">{
  "component": true
}

同时，还要在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。

代码示例：

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
  {{innerText}}
</view>
<slot></slot>

/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red;
}

注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。 组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的。

代码示例：

javascript">Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

这里的代码结构我们可以使用开发者工具的快捷生成不用我们去写
在这里插入图片描述

🌟使用自定义组件

使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：

javascript">{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

这样，在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。

开发者工具 1.02.1810190 及以上版本支持在 app.json 中声明 usingComponents 字段，在此处声明的自定义组件视为全局自定义组件，在小程序内的页面或自定义组件中可以直接使用而无需再声明。

代码示例：

在开发者工具中预览效果

javascript"><view>
  <!-- 以下是对一个自定义组件的引用 -->
  <component-tag-name inner-text="Some text"></component-tag-name>
</view>

自定义组件的 wxml 节点结构在与数据结合之后，将被插入到引用位置内。

一些需要注意的细节：

  • 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。
  • 自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。
  • 自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错。

注意，是否在页面文件中使用 usingComponents 会使得页面的 this 对象的原型稍有差异，包括：

  • 使用 usingComponents 页面的原型与不使用时不一致，即 Object.getPrototypeOf(this) 结果不同。
  • 使用 usingComponents 时会多一些方法，如 selectComponent 。
  • 出于性能考虑，使用 usingComponents 时， setData 内容不会被直接深复制，即 this.setData({ field: obj }) 后 this.data.field === obj 。（深拷贝会在这个值被组件间传递时发生。）

如果页面比较复杂，新增或删除 usingComponents 定义段时建议重新测试一下。

🌟封装Tabbar自定义组件

🌟初始化文件结构

根目录下创建component文件夹，在其下创建tabbar文件夹，然后再tabbar文件夹里创建名为index的Component
在这里插入图片描述

🌟component/tabbar/index.json

component 设置为 true，即为自定义组件

javascript">{
    "component": true
}

🌟component/tabbar/index.wxml

<view class="tabbar" style="width: 500rpx;height: 300rpx;">
  <view class="item {{index==idx?'active':''}}" wx:for="{{tabBar}}" wx:for-index="idx" bindtap="goto" data-index='{{idx}}' data-path="{{item.path}}">
    <i class="iconfont {{item.icon}} icon"></i>
    <view class="text">{{item.name}}</view>
  </view>
  <view class="move" style="left:{{115+(index*210)}}rpx"></view>
</view>

🌟component/tabbar/index.wxss

.tabbar{
    width: 100% !important;
    height: 140rpx !important;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #181c27;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    padding:0 60rpx;
  }
  
  
  .tabbar .item{
    flex: 1;
    color: #fff;
    height: 100rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
  
  }
  .tabbar .item .text{
    position: absolute;
    width: 100%;
    bottom: 10rpx;
    text-align: center;
    font-size: 22rpx;
    opacity: 0;
    transition: all .8s;
    transform: scale(0.8);
    width: 100%;
  }
  .tabbar .item.active .text{
    opacity: 1;
    transform: scale(1);
  }
  
  
  .tabbar .item.active .icon{
    color: #3561f5;
    transform: translateY(-55rpx);
  }
  
  .tabbar .item .icon{
    font-size: 50rpx!important;
    text-align: center;
    transition: all .8s;
    
  }
  page{
    width: 100%;
    height: 100%;
    /* background: #404655; */
  }
  
  .move{
    width: 100rpx;
    height: 100rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 50rpx 2rpx rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    position: absolute;
    left: 115rpx;
    top: -35%;
    transition: all .3s;
    z-index: 1;
  }

🌟component/tabbar/index.js

javascript">Component({
    options: {
        addGlobalClass: true
    },
    behaviors: [],
    properties: { // 类似于Vue的props，用来接收父组件传递的参数
        myProperty: { // 属性名
            type: String,
            value: ''
        },
        myProperty2: String // 简化的定义方式
    },

    data: {
        index: 0, // 默认显示第一个（首页）
        
        // tabbar栏切换，这三个页面要提前建好，放在根目录下的pages里
        tabBar: [{
                name: '首页',
                icon: 'icon-home',
                path: '../../pages/home/index'
            },
            {
                name: '商品',
                icon: 'icon-all',
                path: '../../pages/shop/shop'
            },
            {
                name: '我的',
                icon: 'icon-bussiness-man',
                path: '../../pages/my/my'
            },
        ]
    }, // 私有数据，可用于模板渲染

    lifetimes: {
        // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
        attached: function () {},
        moved: function () {},
        detached: function () {},
    },

    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () {}, // 此处attached的声明会被lifetimes字段中的声明覆盖
    ready: function () {},

    pageLifetimes: {
        // 组件所在页面的生命周期函数
        show: function () {},
        hide: function () {},
        resize: function () {},
    },

    methods: {

        goto(e) {
            // console.log(e.currentTarget.dataset.index);
            if (e.currentTarget.dataset.index != this.data.index) {
                this.setData({
                    index: e.currentTarget.dataset.index
                })
            }
            // this.triggerEvent 类似于Vue的 this.$emit; 用来子组件给父组件传递参数
            // 这里我们把每次点击的Tab栏下标传递给父组件
            this.triggerEvent("itemChange",{index:e.currentTarget.dataset.index});
        },
        onMyButtonTap: function () {
            this.setData({
                // 更新属性和数据的方法与更新页面数据的方法类似
            })
        },
        // 内部方法建议以下划线开头
        _myPrivateMethod: function () {
            // 这里将 data.A[0].B 设为 'myPrivateData'
            this.setData({
                'A[0].B': 'myPrivateData'
            })
        },
        _propertyChange: function (newVal, oldVal) {

        }
    }

})

🌟页面中使用

找到pages/home文件夹:

🌟pages/home/index.json

javascript">{
  "usingComponents": {
      "tab-bar":"../../component/tabbar1/index",
      "my":"../../pages/my/my",
      "shop":"../../pages/shop/shop"
  },
  "navigationBarTitleText": "首页"
}

把我们封装好的tab-bar组件注册进来，属性名随便写，类似Vue的组件名；值为该组件的路径。
把Tabbar其余页面组件也注册进来，后面会用到(页面跳转切换)。

🌟pages/home/index.wxml

<view>
    <!-- 【首页】展示的页面 -->
    <block wx:if="{{currentIndex === 0}}">
        <van-grid column-num="3" border="{{ false }}">
            <van-grid-item use-slot wx:for="{{ 8 }}" wx:for-item="index">
                <image style="width: 100%; height: 90px;" src="https://img.yzcdn.cn/vant/apple-{{ index + 1 }}.jpg" />
            </van-grid-item>
        </van-grid>
    </block>
    <!-- Tabbar切换至 【商店】 展示的页面 -->
    <shop wx:if="{{currentIndex === 1}}"></shop>
    <!-- Tabbar切换至 【我的】 展示的页面 -->
    <my wx:if="{{currentIndex === 2}}"></my>
    <!-- 刚才自定义的 【Tabbar】 -->
    <tab-bar bind:itemChange="handleItemChange"></tab-bar>
</view>

🌟pages/home/index.js

javascript">// index.js
// 获取应用实例
const app = getApp()

Page({
    data: {
        currentIndex: 0,  // 初始下标，默认显示首页
    },
    handleItemChange(e) {
        this.setData({
            currentIndex: e.detail.index
        })
        if (this.data.currentIndex === 0) {
            wx.setNavigationBarTitle({
                title: '首页' //页面切换，更换页面标题
            })
        } else if (this.data.currentIndex === 1) {
            wx.setNavigationBarTitle({
                title: '商店' //页面切换，更换页面标题
            })
        } else(
            wx.setNavigationBarTitle({
                title: '我的' //页面切换，更换页面标题
            })
        )
    },
    onLoad() {},
})

🌟结语

这篇为小伙伴们讲解了在小程序当中，我们如何去自定义或者封装我们自己的组件；大家自己也要尝试一下，思想和Vue差不太多，相信小伙伴们一定也可以的，加油；各位小伙伴让我们 let’s be prepared at all times！

✨原创不易，还希望各位大佬支持一下！
👍 点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！


http://www.niftyadmin.cn/n/203747.html

相关文章

【Linux入门篇】四种软件查看、安装、卸载方式

【Linux入门篇】四种软件查看、安装、卸载方式

目录 &#x1f341;rpm方式 &#x1f341;yum方式 &#x1f341;源码编译方式 &#x1f341;二进制安装 &#x1f990;博客主页&#xff1a;大虾好吃吗的博客 &#x1f990;专栏地址&#xff1a;Linux从入门到精通 rpm方式 优点&#xff1a;无需网络安装软件 缺点&#xff1a…
阅读更多...
Jenkins部署Docker与Jenkins流水线

Jenkins部署Docker与Jenkins流水线

Jenkins部署Docker与Jenkins流水线 文章目录Jenkins部署Docker与Jenkins流水线[toc]六、Jenkins自动化部署到Docker容器1. 外挂文件的方式在docker容器中启动2. 将构建运行放入docker容器中&#xff08;不构建镜像&#xff09;3. 将构建运行放入docker镜像中&#xff08;采用do…
阅读更多...
关于大模型实践的一些总结

关于大模型实践的一些总结

随着近期ChatGPT的迅速出圈&#xff0c;加速了的大模型时代变革。以Transformer、MOE结构为代表的大模型&#xff0c;传统的单机单卡训练模式肯定不能满足上千亿参数的模型训练&#xff0c;这时候我们就需要解决内存墙和通信墙等一系列问题&#xff0c;在单机多卡或者多机多卡进…
阅读更多...
和数软件荣获上海市“专精特新”企业荣誉认定

和数软件荣获上海市“专精特新”企业荣誉认定

近日&#xff0c;上海市经济和信息化委员会公示了2022年上海市“专精特新”企业名单。根据《关于组织开展2022年创新型中小企业评价、专精特新中小企业认定和复核工作的通知》&#xff08;沪经信企〔2022〕776号&#xff09;&#xff0c;经专家评审和综合评估&#xff0c;上海和…
阅读更多...
语音识别whisper

语音识别whisper

Whisper是一个通用的语音识别模型&#xff0c;它使用了大量的多语言和多任务的监督数据来训练&#xff0c;能够在英语语音识别上达到接近人类水平的鲁棒性和准确性1。Whisper还可以进行多语言语音识别、语音翻译和语言识别等任务2。Whisper的架构是一个简单的端到端方法&#x…
阅读更多...
LeetCode_367. 有效的完全平方数

LeetCode_367. 有效的完全平方数

题目描述 给你一个正整数 num 。如果 num 是一个完全平方数&#xff0c;则返回 true &#xff0c;否则返回 false 。 完全平方数 是一个可以写成某个整数的平方的整数。换句话说&#xff0c;它可以写成某个整数和自身的乘积。不能使用任何内置的库函数&#xff0c;如 sqrt 。 …
阅读更多...
Java实现将正整数分解质因数例输入100输出100=2×2×5×5，判断100-200之间有多少素数这两个代码程序

Java实现将正整数分解质因数例输入100输出100=2×2×5×5，判断100-200之间有多少素数这两个代码程序

目录 前言 一、实现将正整数分解质因数例输入100输出1002255 1.1运行流程&#xff08;思想&#xff09; 1.2代码段 1.3运行截图 二、判断100-200之间有多少素数 1.1运行流程&#xff08;思想&#xff09; 1.2代码段 1.3运行截图 前言 1.因多重原因&#xff0c;本博文…
阅读更多...
多元时间序列 | GRU门控循环单元多变量时间序列预测（Matlab完整程序）

多元时间序列 | GRU门控循环单元多变量时间序列预测（Matlab完整程序）

多元时间序列 | GRU门控循环单元多变量时间序列预测（Matlab完整程序） 目录 多元时间序列 | GRU门控循环单元多变量时间序列预测（Matlab完整程序）预测结果评价指标基本介绍程序设计参考资料预测结果 评价指标 训练集数据的R2为：0.98197 测试集数据的R2为：0.97913 训练集数…
阅读更多...
最新文章

Copyright @ 2022~2023