码迷,mamicode.com
首页 > 微信 > 详细

微信小程序开发---自定义组件

时间:2018-12-12 16:26:32      阅读:252      评论:0      收藏:0      [点我收藏+]

标签:一个   prope   下拉   项目   前缀   相关   设置   自己   事件   

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

创建自定义组件

类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件,首先需要在 json 文件中进行自定义组件声明(将 component 字段设为 true 可这一组文件设为自定义组件):同时,还要在 wxml 文件中编写组件模板,在 wxss 文件中加入组件样式,它们的写法与页面的写法类似。在自定义组件的 js 文件中,需要使用 Component() 来注册组件,并提供组件的属性定义、内部数据和自定义方法。组件的属性值和内部数据将被用于组件 wxml 的渲染,其中,属性值是可由组件外部传入的。

使用自定义组件

使用已注册的自定义组件前,首先要在页面的 json 文件中进行引用声明。这样,在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名,节点属性即传递给组件的属性值。

注意:

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

接下来我们自己创建一个<chw-toast>组件,效果图如下

技术分享图片

第一步:创建自定义组件

  • 创建组件chw-toast目录,存放各个文件

技术分享图片

  • 配置chw-toast.josn文件

技术分享图片

  • 创建自定义组件样式(container控制toast位置,toast-text控制文字格式)

技术分享图片

  • 修改chw-toast.js文件,其中值得注意的是设置timeout的时候需要获取当前this(hidden为false时候的)来重新setdata,而不能直接用this(hidden为true时候的)
// page/chw-toast.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    toastText:{
      type:String,
      value:‘chw‘
    }
  },

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

  /**
   * 组件的方法列表
   */

  methods: {
    showToast(text,time){
      this.setData({
        toastShow:!this.data.toastShow,
        toastText:text
      })

      if(time===undefined)
      {
        time=3000
      }
      var that=this
      setTimeout(function(){
        that.setData({
          toastShow:!that.data.toastShow
        })
      },time)
    }
  }
})

 

 第二步:使用组件

  • 在index.js中声明

技术分享图片

  • 在index.wxml引用

技术分享图片

  • 配置index.js,在渲染完成后,首先要获得chw-toast组件,得到该对象后通过绑定修改值,可以设置显示时间,可以采用默认时间
// page/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
  
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.chwtoast=this.selectComponent("#chw-toast")
  },
  showToast:function(){
    this.chwtoast.showToast("xixiixixi")
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

 

微信小程序开发---自定义组件

标签:一个   prope   下拉   项目   前缀   相关   设置   自己   事件   

原文地址:https://www.cnblogs.com/cc-xiao5/p/10108847.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!