小程序封装组件简单案例,所有小程序适用(传入参数、外抛事件、传入样式)

简介: 小程序封装组件简单案例,所有小程序适用(传入参数、外抛事件、传入样式)

  • 本来是封装好了,是给到 uniapp 中使用的,因为 uniapp 按钮部分平台不支持一些属性,所以自己二次封装。


一、封装一个加粉丝群的按钮

  • 在原生编辑器中,右键文件夹新建组件,创建了一个 group-button 组件文件夹
  • group-button - index.js
Component({
  // 支持外部传入class
  externalClasses: ['iclass'],
  data: {
  },
  properties: {
  },
  methods: {
    handleJoinGroup (e) {
      // 外抛事件
      this.triggerEvent('joinChange', e)
    }
  }
})
  • group-button - index.json
{
  "component": true, // 组件必须配置
  "usingComponents": {}
}
  • group-button - index.ttml
 <button
    class="iclass"
    open-type="joinGroup"
    group-id="xxxxxxxxx"
    bindjoingroup="handleJoinGroup"
>
    <!-- 支持组件显示外部内容 -->
    <slot />
</button> 


二、页面中使用

  • home - index.js
const app = getApp()
Page({
  data: {
  },
  onLoad: function () {
    console.log('Welcome to Mini Code')
  },
  handleJoinGroup(e) {
    console.log(e.detail)
  }
})
  • home - index.json
{
    "usingComponents": {
        "group-button": "../group-button/index"
    }
}
  • group-button - index.ttml
<view class="intro">
    <group-button iclass="btn" bindJoinChange="handleJoinGroup">加入粉丝群</group-button>
</view>

相关文章
|
2天前
|
小程序 JavaScript
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
|
2天前
|
存储 小程序 JavaScript
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
|
2天前
|
JSON 小程序 数据格式
【微信小程序】-- 自定义组件总结 (四十)
【微信小程序】-- 自定义组件总结 (四十)
|
2天前
|
小程序 JavaScript
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
|
2天前
|
新零售 小程序 搜索推荐
认养模式小程序系统开发|成熟技术|项目案例
随着新零售的发展,我们设想更多创新的商业模式和营销方式。
|
2天前
|
小程序 JavaScript
【微信小程序】之自定义四宫格(不用mp-grids扩展组件实现,这个组件太难用了)
【微信小程序】之自定义四宫格(不用mp-grids扩展组件实现,这个组件太难用了)
|
2天前
|
开发框架 小程序 .NET
C#动态生成带参数的小程序二维码
C#动态生成带参数的小程序二维码
|
2天前
|
JSON 资源调度 小程序
一个强大的小程序富文本组件mp-html
一个强大的小程序富文本组件mp-html
37 0
|
2天前
|
JSON 小程序 前端开发
【微信小程序】-- 案例 - 自定义 tabBar(四十六)
【微信小程序】-- 案例 - 自定义 tabBar(四十六)
|
2天前
|
存储 编解码 小程序
抖音小程序开发中遇见的坑点
在抖音小程序开发中,需注意10大坑点:遵守小程序限制与规范;解决兼容性问题;优化数据加载速度;适应分享功能限制;处理视频播放挑战;优化图片加载显示;管理资源文件;提升用户体验;考虑安全性;及时更新维护。通过测试、优化和遵循官方文档,可克服这些问题,打造优质小程序。

热门文章

最新文章