微信小程序制作组件

最新推荐文章于 2025-09-05 12:49:54 发布

原创最新推荐文章于 2025-09-05 12:49:54 发布 · 900 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #组件

微信小程序专栏收录该内容

12 篇文章

订阅专栏

本文介绍了微信小程序中创建和引入组件的两种方法。首先详细阐述了组件的基本结构，包括index.wxml、index.js和index.json的编写。接着，演示了如何在页面中引入并使用这些组件，分别展示了在页面的index.wxml、index.js和index.json中的操作步骤。此外，还提到了在app.js和app.wxss中引入组件wxss文件的方式。

微信小程序的组件有两种方式

第一种方式，下面是一个组件的基本组成部分，样式表就不写了，

组件的index.wxml

<view>
  <text>我是组件</text>
<text>传入组件的值： {{text}}</text>
<text>组件内部的值{{data}}</text>
<text wx:if={{show}}>调用了方法</text>
</view>

组件的index.js

Component({
    properties: {
        // 这里定义了组件对外的属性，属性值可以在组件使用时指定
        text:{
           type:String,
           value:''
         }
    },
    data: {
        // 这里是一些组件内部数据
        data: '我是组件',
         show:false
    },
    methods: {
        // 这里是一个自定义方法
        show: function(){
          this.setData({show:true})
        }
    }
})

组件的index.json

{
  "component": true
}

组件写好了，下面是引入写好的组件

页面的index.wxml

<view>
  <text>下面是组件</text>
  <child text='我是父组件传的值' id='child'></child> 
  <button bindtap='clickBtn'>按钮</button>
<view>

页面的index.js

Page({
  onReady: function () {
    //获得子组件
    this.child = this.selectComponent("#child");
  },
  clickBtn：function(){
    this.child.show();
  }
})

页面的index.json

{
  "usingComponents": {
    "child": "../child/index"
  }
}

这就完成了一个组件.

第二种方式：

组件的index.wxml

<template name='child'>
  <view>
    <text>我是组件</text>
    <text>我是从父组件传的值：{{text}}</text>
    <text>我是组件本身的值{{data}}</text>
    <text wx:if='{{show}}'>调用了组件的方法</text>
  </view>
</template>

组件的index.js

let data={
  text:'',
  data:'我是组件本身的值',
  show:false
}
let childPanel={
  show:function (text) {
    let _this=this;
    this.setData({
      show:true,
      text:text
    })
  }
}
function child() {
  let pages=getCurrentPages();
  let currentPage=pages[pages.length-1];
  this.__page=currentPage;
  Object.assign(currentPage,childPanel);
  currentPage.childPanel=this;
  currentPage.setData(data);
  return this;
}
module.exports={
  child
}

然后在app.js里引入上面的js文件，如下：

app.js

import {child} from './child/index'
APP({child,
   ...
})

如果给组件写了wxss文件，要在app.wxss里引入，如下：

app.wxss

@import './child/index.wxss'

在需要引入该组件的页面，如下：

<import src='../child/index.wxml'/>
<template is='child'></template>
<button bindtap='clickBtn'>按钮</button>

当前页面的js文件：

let app=getApp();
Page({
  data:{
    data:'父组件传给子组件的值' 
  },
  onLoad:function(){
    new app.child();
  },
  clickBtn:function(){
    this.show(this.data.data);
  }
})

上面app.js和app.wxss是全局引用，如果想局部引用，也可以把全局的引入写到局部去。