小程序组件开发坑

最新推荐文章于 2025-06-04 12:08:17 发布

童登达

最新推荐文章于 2025-06-04 12:08:17 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信开发文章标签：微信

本文链接：https://blog.youkuaiyun.com/tongdengquan/article/details/78249681

微信开发专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一款为微信小程序定制的单选按钮组件实现方案。该组件模仿了常见的toggle功能，通过修改页面data的方式更新控件状态。文章提供了wxml、js代码示例，并详细解释了如何注册和使用该组件。

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

由于项目需要，做了一个微信小程序组件。功能类似radio，跟我们常用的toggle一样。
由于小程序不能像我们网页一样，通过$(“#id”)这样来设置属性。所以只能通过小程序页面的data来跟页面控件绑定，通过改变data来改变页面控件的属性。
wxml页面代码如下，注意这里标签是template

<template name="toggle">
    <button id='{{toggleId}}' bindtap="setA" class="{{toggleAClass}}">{{labelA}}</button>
    <view style="width:10px;height:10px;display:inline-block;"></view>
    <button id='{{toggleId}}' bindtap="setB" class="{{toggleBClass}}">{{labelB}}</button>
    <input style="display:none"  type='text' name="{{toggleName}}" value="{{toggleValue}}" />
</template>

js代码如下，调用时候，通过构造函数来注册组件

/**
 * 单选按钮组件
 * 2017年10月12日17:58:25
 * tdq
 */
function ToggleClass() {
  //构造函数
  function Toggle() {
    let pages = getCurrentPages()
    let curPage = pages[pages.length - 1]
    this.__page = curPage
    //附加到page上，方便访问
    curPage.toggle = this
    curPage.setData({
      '__toggle__.toggleId': "toggle",
      '__toggle__.toggleAClass': "togglea__class",
      '__toggle__.toggleBClass': "toggleb__class",
      '__toggle__.toggleValue': 1,
    })
    curPage.setA = function (e){
      var id = e.target.id
      if(id=='quhuo'){
        curPage.setData({
          '__quhuo__.toggleAClass': 'toggleb__class',
          '__quhuo__.toggleBClass': 'togglea__class',
          '__quhuo__.toggleValue': 0,
        })
      }
      else if(id=='tuiban'){
        curPage.setData({
          '__tuiban__.toggleAClass': 'toggleb__class',
          '__tuiban__.toggleBClass': 'togglea__class',
          '__tuiban__.toggleValue': 0,
        })
      }
      else{
        curPage.setData({
          '__toggle__.toggleAClass': 'toggleb__class',
          '__toggle__.toggleBClass': 'togglea__class',
          '__toggle__.toggleValue': 0,
        })
      }
    }
    curPage.setB = function (e) {
      var id = e.target.id
      if (id == 'quhuo') {
        curPage.setData({
          '__quhuo__.toggleAClass': 'togglea__class',
          '__quhuo__.toggleBClass': 'toggleb__class',
          '__quhuo__.toggleValue': 1,
        })
      }
      else if (id == 'tuiban') {
        curPage.setData({
          '__tuiban__.toggleAClass': 'togglea__class',
          '__tuiban__.toggleBClass': 'toggleb__class',
          '__tuiban__.toggleValue': 1,
        })
      }
      else {
        curPage.setData({
          '__toggle__.toggleAClass': 'togglea__class',
          '__toggle__.toggleBClass': 'toggleb__class',
          '__toggle__.toggleValue': 1,
        })
      }
    }
    return this
  }
  return new Toggle()
}

module.exports = {
  Toggle: ToggleClass
}

样式我直接写在了项目app.wxss上了。
调用的时候，需要在调用页面wxml上加

<import src="../../../utils/toggle/toggle.wxml"/>

在页面需要使用的地方加上（这里data=”{{…toggle}}”是关键，传递数据就是在这里传）

<template is="toggle" data="{{...__toggle__}}"/>

在app.js文件上加

let { Toggle } = require('utils/toggle/toggle.js')

在

App({
  Toggle
  })

在被调用页面js加上，在onload事件里面初始化控件

let app = getApp()
onLoad: function (options) {
    new app.Toggle()
    }