Wechat----自定义组件

damys

于 2019-02-21 11:45:26 发布

阅读量398

点赞数

分类专栏： WeChat 文章标签： wechat component

本文链接：https://blog.youkuaiyun.com/damys/article/details/87858194

版权

WeChat 专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了一种自定义微信小程序组件ButtonImage的实现方法，该组件利用slot特性支持图片插入，通过设置openType属性实现不同功能，如授权或分享。文章提供了组件的代码结构、样式设置及使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义组件:　button image

Component({
  options:{
    multipleSlots:true
  },
 
  /**
    * 组件的属性列表
    */
  properties: {
    openType: {
      type:String
    }
  },
 
  /**
    * 组件的方法列表
    */
  methods: {
    onGetUserInfo(event){
      // 抛到外面处理
      this.triggerEvent('getuserinfo', event.detail, {})
    }
  }
})

.wxml

<button bind:getuserinfo="onGetUserInfo" open-type='{{openType}}'  plain='{{true}}' class="container">
  <slot name="img"> </slot>
</button>

.wxss

.container{
  padding: 0 !important;
  border:none !important;
}

使用: .json 中引用，.wxml 中使用

{
  "usingComponents": {
    "v-button":"/components/image-button/index",
  }
}

使用：分享

<v-button class='share-btn' open-type="share">
<image class='share' slot="img" src="/images/icon/share.png"></image>
</v-button>

使用：授权

<v-button wx:if="{{!authorized}}" open-type="getUserInfo" class="avatar-position" bind:getuserinfo="onGetUserInfo">
<image slot="img" class='avatar' src='/images/my/my.png'></image>
</v-button>