小程序自定义组件的使用

小程序的自定义组件的用法

本文的目的是将一个悬浮回主页的按钮封装成组建,在需要使用的页面的wxml文件中直接引入组件标签即可,并没有涉及在使用的页面调用组件中的方法或属性。这个组件的作用是用于用户从分享卡片或其他方式进入到小程序二级页面或者更深页面时,没有明显的返回主页的功能,虽然页面右上角的三个点可以回主页,但是不熟悉小程序的用户就不知道,所以自己做了一个明显的回主页的按钮

1.首先在项目根目录下创建component文件夹,里面用于放自定义组件。

下图是我创建的回主页按钮组件文件

这里写图片描述

back-to-home.js文件的代码如下:

// component/back-to-home/back-to-home.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    show: false,
  },

  ready: function() {
    // console.log(getCurrentPages());
    this.setData({
      show: getCurrentPages().length === 1
    });
  },

  /**
   * 组件的方法列表
   */
  methods: {
    toHome: function() {
      wx.switchTab({
        url: '/pages/index/index',
      })
    },
  }
})

back-to-home.json文件的代码如下:

{
  "component": true,
  "usingComponents": {}
}

back-to-home.wxml文件的代码如下:

<!--component/back-to-home/back-to-home.wxml-->
<block wx:if="{{show}}">
  <view class='go-home' bindtap='toHome'>
    <image src='/static/images/gohome.png'></image>
  </view>
  <view class="wave"></view>
  <view class="wave2"></view>
</block>

back-to-home.wxss文件加了动画样式,所以比较多,代码如下:

/* component/back-to-home/back-to-home.wxss */

/*会主页按钮开始  */
view {
  box-sizing: border-box;
}
.go-home {
  position: fixed;
  font-size: 60rpx;
  /* background-color: #FE6200; 
   border-radius: 100%;  */
  width: 100rpx;
  line-height: 100rpx;
  height: 100rpx;
  animation: mymove 2s infinite;
  color: #fff;
  bottom: 200rpx;
  left: 20rpx;
  text-align: center;
  z-index: 999999;
}

.go-home image {
  width: 100%;
  height: 100%;
}

@keyframes mymove {
  0% {
    width: 100rpx;
    height: 100rpx;
  }

  10% {
    width: 110rpx;
    height: 110rpx;
  }

  15% {
    width: 100rpx;
    height: 100rpx;
  }

  25% {
    width: 100rpx;
    height: 100rpx;
  }

  50% {
    width: 100rpx;
    height: 100rpx;
  }

  100% {
    width: 100rpx;
    height: 100rpx;
  }
}

.wave {
  position: fixed;
  bottom: 190rpx;
  left: 10rpx;
  width: 120rpx;
  height: 120rpx;
  border: 6px solid #ffd933;
  border-radius: 50%;
  opacity: 0;
  animation: waveCircle 2s ease-out;
  animation-iteration-count: infinite;
}

@keyframes waveCircle {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }

  10% {
    transform: scale(0.7);
    opacity: 0.1;
  }

  20% {
    transform: scale(0.8);
    opacity: 0.1;
  }

  30% {
    transform: scale(0.9);
    opacity: 0.1;
  }

  75% {
    transform: scale(0.9);
    opacity: 0.1;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.wave2 {
  position: fixed;
  bottom: 170rpx;
  left: -10rpx;
  width: 160rpx;
  height: 160rpx;
  background-color: #ffd933;
  border: 6px solid #ffd933;
  border-radius: 50%;
  animation: waveCircle2 2s ease-out;
  animation-iteration-count: infinite;
}

@keyframes waveCircle2 {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }

  10% {
    transform: scale(0.7);
    opacity: 0.1;
  }

  20% {
    transform: scale(0.7);
    opacity: 0.1;
  }

  30% {
    transform: scale(0.8);
    opacity: 0.1;
  }

  75% {
    transform: scale(0.9);
    opacity: 0.1;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/*会主页按钮结束  */
在需要引用的page页面引入组件,在这里我是在page/talentDetail/talentDetail页面引入

image

只需两步就可以引入之前写好的模板

1.在talentDetail.josn中加入usingComponents,引入组件,组件名字自己命名,这里我命名为back-to-home

{
  "navigationBarTitleText": "理财大咖",
  "enablePullDownRefresh": true,
  "onReachBottomDistance": 50,
  "usingComponents": {
    "back-to-home": "/component/back-to-home/back-to-home"
  }
}

2.在talentDetail.wxml中加入组件即可

<view>

  <back-to-home></back-to-home>
</view>

大功告成!

按钮的属性、方法和样式都封装在组件里,不需要引入的界面干预组件的逻辑,从而直接让组件逻辑和需要引入的页面完全分开来

使用小程序自定义组件的步骤如下: 1. 创建自定义组件文件夹: 在小程序项目的目录中,创建一个文件夹用于存放自定义组件相关的文件。 2. 创建组件的 WXML 文件: 在自定义组件文件夹中,创建一个以 `.wxml` 为后缀名的文件,用于定义组件的结构。 3. 创建组件的 WXSS 文件: 在自定义组件文件夹中,创建一个以 `.wxss` 为后缀名的文件,用于定义组件的样式。 4. 创建组件的 JS 文件: 在自定义组件文件夹中,创建一个以 `.js` 为后缀名的文件,用于定义组件的行为和逻辑。 5. 创建组件的 JSON 配置文件: 在自定义组件文件夹中,创建一个以 `.json` 为后缀名的文件,用于配置组件的基本信息。 6. 编写组件的 WXML 结构: 在组件的 WXML 文件中,定义组件的结构和布局,可以使用小程序提供的基础组件和自定义样式。 7. 编写组件的 WXSS 样式: 在组件的 WXSS 文件中,编写组件的样式,可以为各个组件元素添加样式类,并定义相应的样式规则。 8. 编写组件的 JS 逻辑: 在组件的 JS 文件中,编写组件的行为和逻辑。可以定义组件的属性、方法和生命周期函数等。 9. 配置组件的 JSON 文件: 在组件的 JSON 配置文件中,配置组件的基本信息,包括组件的名称、引用方式、样式等。 10. 在页面中使用自定义组件: 在小程序的页面中,使用自定义组件的标签,并按需传入相应的属性值。 以上是使用小程序自定义组件的基本步骤。自定义组件可以提高代码的复用性和可维护性,让开发变得更加高效。希望对你有所帮助!如果有任何疑问,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值