微信小程序——自定义组件

以自定义一个Button为例

①新建文件夹

②再建个文件夹存放自定义组件文件

③在MyBtn.wxml中自定义主键

<button style="background: red;color: #fff;">自定义btn</button>

 ④在需要使用自定义组件的地方引入组件（以hello为例）

hello.wxml

<!--pages/hello/hello.wxml-->
<text>{{msg}}</text>
<button bindtap="update">修改</button>
<my-btn></my-btn>

 hello.json（两种方式）

相对路径方式：

{
    "usingComponents": {
        "my-btn":"../../components/MyBtn/MyBtn"
    }
}

绝对路径方式：

{
    "usingComponents": {
        "my-btn":"/components/MyBtn/MyBtn"  
    }
}

运行效果

注意：

1、创建组件的文件夹和创建页面的文件夹可以通过查看.json文件区分

2、在.js文件中，页面自定义的方法与 data同级。而组件自定义的方法放methods，methods与data同级

自定义组件实现页面跳转练习：

hello.wxml

<!--pages/hello/hello.wxml-->
<text>{{msg}}</text>
<button bindtap="update">修改</button>
<my-btn 
    btnName="跳转bindevent"
    targetUrl="/pages/bindevent/bindevent"
    bindjump="goto"
></my-btn>
<!-- <my-btn btnName="按钮3" num="3.14" arr="[1,2,3]"></my-btn> -->
<my-btn btnName="按钮2" num="{{3.14}}" arr="{{[1,2,3]}}"></my-btn>

hello.js

// pages/hello/hello.js
Page({

    data: {
        msg:"HELLO HOME"
    },
    update(){
        console.log(10000)
        this.setData({
            msg:"你好"
        })
    },
    goto(p){
        console.log(p)
        wx.navigateTo({
          url: p.detail.url,
        })
    }

})

MyBtn.wxml

<button bindtap="navto" style="background: red;color: #fff;">
    {{btnName}} {{num}} {{arr}}
</button>

 MyBtn.js

Component({
    properties:{
        btnName:{
            type:String,
            value:"默认btn"
        },
        targetUrl:String,
        num:Number,
        arr:Array
    },
    methods:{
        navto(){
            console.log(2000),
            this.triggerEvent("jump",{url:this.data.targetUrl})
        }
    },
    created(){
        console.log(1000)
        console.log(this.data)
        console.log(typeof this.data)
    }
})

 运行效果