小程序---原生开发---自定义组件

系统管理员 2023-07-18 12:50 24阅读 0赞

在开发过程中，我们经常需要创建一些公用组件以便方便我们多次调用。组件的功能以及事件的一个传递，这使得需要注意，有些组件可能样式一样，点击的事件效果会有所不同，所以组件需要功能多样化，方便使用

创建组件，使用微信开发者工具创建，直接选择创建组件的选项，所有的页面都会给创建好。

但是使用别的软件进行开发的时候，创建组件一定要创建完整。比如说一个组件中有xx.js  xx.wxml  xx.wxss  xx.json

如果你少一个xx.json文件，会导致你引入组件的时候找不到这个文件。为了避免出错，创建所有的页面即可。

组件的js页面是这样的

var app = getApp()
    Component({
    
      behaviors: [],
    
      // 属性定义（详情参见下文）
      properties: {
        myProperty: { // 属性名
          type: String,
          value: ''
        },
        myProperty2: String // 简化的定义方式
      },
    
      data: {}, // 私有数据，可用于模板渲染
    
      lifetimes: {
        // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
        attached: function () { },
        moved: function () { },
        detached: function () { },
      },
    
      // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
      attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
      ready: function() { },
    
      pageLifetimes: {
        // 组件所在页面的生命周期函数
        show: function () { },
        hide: function () { },
        resize: function () { },
      },
    
      methods: {
        onMyButtonTap: function(){
          this.setData({
            // 更新属性和数据的方法与更新页面数据的方法类似
          })
        },
        // 内部方法建议以下划线开头
        _myPrivateMethod: function(){
          // 这里将 data.A[0].B 设为 'myPrivateData'
          this.setData({
            'A[0].B': 'myPrivateData'
          })
        },
        _propertyChange: function(newVal, oldVal) {
    
        }
      }
    
    })

和普通的js页面是不一样的

当我们有数据需要传递的时候在properties中写出即可，例如

properties: {
        navbarData: { // navbarData 由父页面传递的数据
          type: Object,
          value: {
            gobank: true,
            gohome: true,
            has_search: false,
          },
          observer: function (newVal, oldVal) { 
          }
        }
      },

当我们有点击事件需要传递的时候，需要传递什么这个看需求，我这里只写传递点击事件

methods: {
        goback: function () {
    	  this.triggerEvent('goback')
        },
        goHome: function () {
          wx.navigateTo({
            url: '/pages/index/index',
          });
        }
      }

当我们在页面中使用需要现在aa.json文件中先调用才可以使用，可以在app.json中全局调用，也可以在使用页面下的.json文件中调用，局部调用，看需求

"usingComponents": {
    		"headpage":"/components/pagehead/pagehead"
    	}

使用页面index.wxml，这里的点击事件bind:xxx     xxx这个名称要和在组件中triggerEvent中的名称保持一致，如果有误，则无法调用点击事件

<headpage bind:goback='goback'></headpage>
    <view class="container" bindtap="goToPage">
     首页
    </view>

index.js中的点击事件，书写我们需要处理的操作即可

goback(){
    	  navigUrl.navigatoBackUrl('../index/index')
      }