• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序之自定义组件(附源码)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

最近在项目开发中,遇到好多雷同的页面样式,就想着可以将常用的功能模块封装成组件,方便在项目中使用和修改,下面就参照微信小程序的文档分步骤写一个微信小程序的组件。

附上效果图:

step1:创建文件并申明

与创建微信小程序的页面一样,一个自定义组件也需要json,wxml,wxss,js四个文件。

在项目根目录中创建文件夹,取名为:component,在该目录下继续创建文件夹successModal。

可以在开发工具中右键创建,选择component,默认自动会创建四个文件。如图:

在successModal.json文件中进行自定义组件声明,如:

在开发工具中右键新建选择component,默认自动会创建。

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

step2:编写组件模板代码

<!-- 这是自定义组件的内部WXML结构 success.wxml-->
<view class=\'modal-section\' wx:if="{{modalHidden}}">
  <view class=\'modal-opaci\' bindtap=\'modal_click_Hidden\'></view>
  <view class=\'modal-cont\'>
    <icon type=\'{{modalIcon}}\' size=\'70\'></icon>
    <text class=\'modal-titleTxt {{modalIcon}}\'>{{modalTitle}}</text>
    <text class=\'success-msg\'>{{modalDesc}}</text>
  </view>
</view>

step3:编写样式文件

/* 这里的样式只应用于这个自定义组件 */
/*successModal.wxss*/
.modal-opaci {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  height: 100%;
  width: 100%;
  background: black;
  opacity: 0.4;
  filter: alpha(opacity=40);
}

.modal-cont {
  position: fixed;
  top: 30%;
  left: 8.5%;
  z-index: 999;
  border-radius: 20rpx;
  padding: 40rpx 150rpx;
  background-color: #fff;
  text-align: center;
}

.modal-cont text {
  line-height: 90rpx;
  display: block;
}

.success {
  color: #09bb07;
}

.modal-titleTxt {
  font-size: 50rpx;
  font-weight: 700;
}

.warn {
  color: #f76260;
}

step4:编写业务逻辑

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

//successModal.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    //这里定义了modalHidden属性,属性值可以在组件使用时指定.写法为modal-hidden  
    modalHidden: {
      type: Boolean,
      value: true
    },
    modalIcon: {
      type: String,
      value: \' \',
    },
    modalTitle: {
      type: String,
      value: \' \',
    },
    modalDesc: {
      type: String,
      value: \' \',
    }
  },

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

  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 这里是自定义方法
    modal_click_Hidden: function () {
      this.setData({
        modalHidden: false,
      })
    },
  }
})

step5:使用自定义组件

首先在需要使用的json文件中进行引用申明,然后需要提供每个自定义组件的标签名和对应的自定义组件文件路径。

//index.json
{
  "usingComponents": {
    "modal-success": "../../component/successModal/successModal" //在这里写上页面中自定义的标签名和自定义组件的文件路径
  },
  "navigationBarTitleText": "首页"
}

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

<!--index.wxml-->
<view class="container">
  <view class="demoBtn" bindtap="bindViewTap">
    <text>点击</text>
  </view>

  <!-- 调用modal组件 -->
  <modal-success modal-hidden="{{is_modal_Hidden}}" modal-icon="{{is_modal_icon}}" modal-title="{{is_modal_title}}" modal-desc="{{is_modal_desc}}" />
</view>

以上就是小程序自定义组件的demo,欢迎start。

github地址:小程序自定义组件

注意点:

  • 对于基础库的1.5.x版本, 1.5.7 也有部分自定义组件支持。
  • 因为WXML节点标签名只能是小写字母、中划线和下划线的组合,所以自定义组件的标签名也只能包含这些字符。
  • 自定义组件也是可以引用自定义组件的,引用方法类似于页面引用自定义组件的方式(使用 usingComponents 字段)。
  • 自定义组件和使用自定义组件的页面所在项目根目录名不能以“wx-”为前缀,否则会报错。
  • 旧版本的基础库不支持自定义组件,此时,引用自定义组件的节点会变为默认的空节点。

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序源码下载[demo整理自github]发布时间:2022-07-18
下一篇:
微信小程序开发规范文档-WXML代码规范发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap