Skip to main content

微信小程序组件使用

9/10/22About 6 min前端

开发了一段微信小程序之后，意识到组件的使用是非常基础和重要的，主要体现在某些场景能大幅度的减少代码的冗余度，以及一些地方只能是用组件实现，比如弹窗组件。所以这篇总结一下微信小程序组件的使用。

组件使用方式

自定义组件使用

整体思路是，先明确自己的自定义组件要做成什么样子，然后先把组件定义并实现好，最后在对应的页面引用自定义的组件。比如下面这个例子，我们将解锁部分抽象出来做成组件

Untitled

具体步骤如下

  1. 我们在对应页面下创建组件文件夹 small-component，然后创建对应组件，具体实现如下
//small-component.wxml
<view class="container">
  <slot></slot>
  <view class="lock-button" bindtap="unlock">解锁</view>
</view>
//small-component.wxss
.container {
  width: 200rpx;
  height: 70rpx;
  .....
}
.lock-button {
  font: normal 400 36rpx/normal 'PingFang SC';
  color: white;
}
//small-component.js
Component({
  methods: {
    unlock() {
      console.log(`unlock`)
    }
  }
})
  1. 在需要引用组件的页面里声明引用关系
//Page.json
{"component": true,
"usingComponents": {
	"small-component": "./small-component/small-component"  //路径
}}
  1. 在页面的 wxml 里面引用该组件（这里忽略了效果图上半部分内容，wxss 里的样式内容也暂时不展示了）
//Page.wxml
<view class="container">
  <view class="area-two">
  <image class="area-content-two" src="https://img0.baidu.com/it/u=155276595,173864794&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500">this is locked content part 2</image>
  <small-component class="small-component">
	  <view style="color: aliceblue;">0.99￥</view>
  </small-component>
  </view>
</view>

基本上引用组件部分就完成了，后续会继续介绍组件的通信机制。

Note

  1. 如果这个组件需要依赖别的组件实现，则可以像页面一样在 small-component.json 里继续引用别的组件。
  2. 在 small-component里面的 slot 其实就是个占位符，方便外部调用者传入一些个性化修改组件视图内容的东西。这个还是挺好的，之前在客户端的开发里是没有办法做到这么灵活的。

第三方组件使用

第三方组件的使用方式其实和自定义组件主要是引入方式区别，这里举一个使用 weui 组件库里 mp-dialog 弹窗的例子。

  1. 引入 mp-dialog 我们需要先 npm install weui-miniprogram 装包
  2. 然后在引用 mp-dialog的页面的 json 配置文件中去引用
{
  "usingComponents": {
    "small-component": "./small-component/small-component",
    "mp-dialog": "path/to/miniprogram_npm/weui-miniprogram/dialog/dialog"
  }
}

2023-03-02 文档里通过 npm 这种方式引入 weui-miniprogram 并不是很好的方案，因为库的大小会计入小程序的大小，所以尽量使用 useExtendedLib 的方式来引入，在全局配置 app.json 里进行配置。而且使用 npm 引入的方式有的时候样式会有问题，并不是弹窗样式，用 useExtendedLib 这种方式引入就没有这个问题。

  1. 最后的使用方式和自定义组件没什么区别，需要注意的是第三方组件暴露的属性，你需要看API 的具体说明才能明白如何使用，里面的一些属性（马上就会介绍到组件的属性了）都是自定义的。
<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}">
    <view>test content</view>
</mp-dialog>

组件通信方式

数据传递

外部给组件传递数据

可以通过给组件定义属性的方式，官方文档的 Component 构造器那儿对于属性定义有比较好的示例，在我们这个例子里面，我们给 small-component 组件定义一个 name 的属性，来作为里面按钮的标题，然后在对应的 wxml 里引用通过属性变量来填充节点内容。

//small-component.js
Component({
  properties: {
    name:{
      type:String,
      value:"解锁"
    }
  },
  data: {},   //私有数据
  ...
})
//small-component.wxml
<view class="lock-button" bindtap="unlock">{{name}}</view>

引用组件的页面在给组件赋值的时候也非常简单，直接在引用组件的地方，设置 name 属性的值，如果有更进一步动态的需求的话，这里的 name 的赋值也可以使用页面中的变量。其实之前看到第三方的属性定义也是这样的。

<small-component class="small-component" name="查看">
	<view style="color: aliceblue;">0.99￥</view>
</small-component>

Untitled

组件给外部传递数据

本质上组件并不需要给外部传递数据，因为如果组件封装足够好的话，组件里面的数据都是来自外部给到的。这里说的组件给外部传递数据，应该是需要组件触发某个事件之后，将外部传入的数据进行转化后再返给外部。这里的本质是用组件的事件传递，所以我们直接介绍组件事件。

组件事件

组件回调外部的方法

通常的一些场景是，用户在触发一些子组件里面的方法，比如触发点击操作，然后子组件自己不处理这个点击事件的具体后续流程，而是让引用组件的页面来完成后续的处理。有几种方式可以实现这一效果

① 直接通过 bindtap 这种方式在引用组件标签的地方绑定事件，就像是调用系统组件 view 等一样。但是如果组件内部已经绑定了事件之后，外部事件会覆盖内部的事件调用。

//page.wxml
<small-component class="small-component" name="查看" bindtap="test">
    <view style="color: aliceblue;">0.99￥</view>
</small-component>
//page.js
test() {
  console.log(`page component test`)
}

② 通过绑定事件之后，内部触发事件的方式。页面部分先进行组件事件绑定。

//Page.wxml 
<small-component class="small-component" name="查看" bind:myevent="onMyEvent">
  <view style="color: aliceblue;">0.99￥</view>
</small-component>
//Page.js
onMyEvent(res) {
	console.log(`page component test ${res.detail.key}`)
}

组件内部在对应的方法内部进行触发，这个组件内部的方法不一定非得是点击事件相关，可以是任何方法，比如延时触发方法，网络请求回调里也可以触发的方法。点击事件触发和我们自己手动 triggerEvent 是两回事。

//small-component.js
myevent() {
  var myEventDetail = { "key": "value" }  // detail对象，提供给事件监听函数
  var myEventOption = { bubbles: true }   // 触发事件的选项
	this.triggerEvent('myevent', myEventDetail, myEventOption)
}

外部调用组件方法

有的时候外部页面不需要组件触发自己的事件，而是直接通过调用组件的方法来实现某种效果。主要思路是获取组件实例，然后直接调用组件里面定义好的方法。我们假设 small-component 里面有一个定义好的 unlock 方法，那我们可以如下代码来直接调用组件的 unlock 方法

//page.js 
test() {
  console.log(`page component test`)
  const component = this.selectComponent('.small-component'); //获取子组件实力对象
  console.log(component)
  component.unlock()
}

官方的文档其实写的还是比较清楚，自己再总结一下，感觉对理解也很有帮助，也方便记忆和回顾

参考地址:

  1. [WeUI组件库简介]https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/extended/weui/
  2. 微信小程序开发指南-自定义组件介绍
  3. 微信小程序开发指南-组件间通信与事件
  4. 微信小程序开发指南-Component 构造器
  5. 微信小程序开发指南-组件生命周期
Last Updated:
Contributors: fanxiushan,Cursor