当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 微信小程序自定义组件实例教程

微信小程序自定义组件实例教程

2018-07-23 17:23 来源: 霸界科技

摘要:小程序提供了很多api和基础组件,但为减少代码的复杂度和提高复用率,小程序也提供了自己的代码复用机制: ...

期权保本理财
  一 微信小程序提供了很多api和基础组件,但为减少代码的复杂度和提高复用率,小程序也提供了自己的代码复用机制:
 
微信小程序自定义组件实例教程
 
  小程序复用:页面模版(template),组件模版(component,使用时用标签的形式)。
 
  这两种模版的写法和之前页面的写法是一样的,都有四个文件 wxml,js,wxss, json
 
  二我们在使用基础组件时比如 <view bindtap="" catchtap="" data-name="" id="" class="" ></view> 总会写事件和属性值,
 
  自定义组件也一样需要有自己的属性和事件,
 
  属性分内部属性和外部属性,这两种属性共同设置了组件的样式。内部属性可以理解为手机的预装软件。外部属性可以理解为手机的应用商店,可以自己手动管理。当然我们也会提供接口供使用者来修改内部属性。
 
  三,生命周期:
 
  组件也有生命周期函数,和页面一样。
 
  页面有:onload   onready    onshow    onhide       onunload
 
  组件有:created   attached   ready       detached    move
 
  新建component组件:
 
  四,自定义组件,这是官方提供的例子
 
  Component({ //自定义组件的专有形式,如page页面的page({}),app文件的App({})
 
  behaviors: [],
 
  properties: {
 
  myProperty: { // 属性名
 
  type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
 
  value: '', // 属性初始值(可选),如果未指定则会根据类型选择一个
 
  observer: function(newVal, oldVal){} // 属性被改变时执行的函数(可选),也可以写成在methods段中定义的方法名字符串, 如:'_propertyChange'
 
  },
 
  myProperty2: String // 简化的定义方式
 
  },
 
  data: {}, // 私有数据,可用于模版渲染
 
  // 生命周期函数,可以为函数,或一个在methods段中定义的方法名
 
  attached: function(){},
 
  moved: function(){},
 
  detached: function(){},
 
  methods: {
 
  onMyButtonTap: function(){
 
  this.setData({
 
  // 更新属性和数据的方法与更新页面数据的方法类似
 
  })
 
  },
 
  _myPrivateMethod: function(){
 
  // 内部方法建议以下划线开头
 
  this.replaceDataOnPath(['A', 0, 'B'], 'myPrivateData') // 这里将 data.A[0].B 设为 'myPrivateData'
 
  this.applyDataUpdates()
 
  },
 
  _propertyChange: function(newVal, oldVal) {
 
  }
 
  }
 
  })
 
  在使用组件的页面的json文件中配置
 
  {  useComponents:{"自定义组件名字":"组件的绝对路径"}}     如{  useComponents:{"p":"../page/page"}}
 
微信小程序自定义组件实例教程
 
  需求:自定义组件中放其他的基础组件。
 
  方法:在自定义组件的wxml文件中使用<slot name="">标签
 
  自定义组件:<slot name="test"></slot>,将此标签放入想要安置的位置。
 
  引用页面 :<view style="background: _ _ _" slot="test"></view>//如果想要设置样式的话写在<slot>标签中是无效的。
 
  组件不论是自定义组件还是基础组件,都有自己的属性,事件。
 
  注意:如果组件wxml文件中的slot标签中写了name属性,那么就必须在组件的js文件中写上options:{multipleSlots:true},不然不起作用。
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088