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

简介: 小程序封装组件简单案例,所有小程序适用(传入参数、外抛事件、传入样式)
  • 本来是封装好了,是给到 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>
相关文章
|
3天前
|
小程序 数据库
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
8 0
|
2天前
|
小程序
【微信小程序】实战案例 -- 向订阅用户发送消息(范例:报名提醒)
【微信小程序】实战案例 -- 向订阅用户发送消息(范例:报名提醒)
5 0
|
3天前
|
小程序
【微信小程序-原生开发】列表 - 拖拽排序(官方组件 movable-area 和 movable-view 的用法)
【微信小程序-原生开发】列表 - 拖拽排序(官方组件 movable-area 和 movable-view 的用法)
9 0
|
3天前
|
小程序 数据库
【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)
【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)
5 0
|
3天前
|
JSON 小程序 数据库
【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)
【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)
5 0
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的微信小程序的网上商城附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的微信小程序的网上商城附带文章源码部署视频讲解等
11 3
|
1天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的个人健康管理系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的个人健康管理系统小程序附带文章源码部署视频讲解等
10 2
|
1天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的高校宿舍信息管理系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的高校宿舍信息管理系统小程序附带文章源码部署视频讲解等
8 1
|
1天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的电影交流平台小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的电影交流平台小程序附带文章源码部署视频讲解等
9 1
|
1天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的电器维修系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的电器维修系统小程序附带文章源码部署视频讲解等
8 1