《微信小程序实战（2） · 组件封装》

📢 大家好，我是 【战神刘玉栋】，有10多年的研发经验，致力于前后端技术栈的知识沉淀和传播。 💗

🌻 CSDN入驻不久，希望大家多多支持，后续会继续提升文章质量，绝不滥竽充数，欢迎多多交流。👍

写在前面的话

上篇博文《微信小程序实战（1）· 开篇示例 》介绍了本系列课程的背景，本篇博文继续以该示例出发，介绍实战开发中，关于组件方法的运用。

---

组件实战

参考：微信小程序官网文档

背景说明

通常，使用微信小程序都会借助现成的UI组件，就像 Vue 前端开发中，我们使用 ElementUI 中的表格、下拉框等组件一样，对于半路出家的后端程序猿更是如此，不可能全部元素都自己开发，有现成封装好的还不用吗。

博主开发微信小程序经常采用的是 Vant 或 WeUI，都很好用，只需要简单配置引入后，即可在页面开发中按需使用这些功能。

例如，您可以在 app.json，或某页面.json，使用如下方式引入 Vant 的组件。

"usingComponents": {
  "van-button": "/pages/vant/button/index",
},

然后，在具体的 WXML 页面就可以直接使用：

<van-row>
  <van-col span="24">
    <van-button size="large" plain type="primary" bindtap="submit">提交工单</van-button>
  </van-col>
</van-row>

好了，大致了解组件的用途了，那组件到底是个什么东西，接下来详细介绍。

基础用法

Tips：先来一个简单的示例，帮助理解用法。

Step1、在 components 目录下创建一个新文件夹，例如 myComponent。

Step2、在 myComponent 文件夹中创建以下文件，和页面开发基本一致。

• myComponent.js：组件的逻辑。
• myComponent.json：组件的配置。
• myComponent.wxml：组件的结构。
• myComponent.wxss：组件的样式。

Step3、编写 myComponent.js

Component({
  properties: {
    title: {
      type: String,
      value: '默认标题'
    }
  },
  data: {
    // 组件内部数据
  },
  methods: {
    // 组件内部方法
    handleClick() {
      this.triggerEvent('click');
    }
  }
});

Step4、编写myComponent.json

{
  "component": true
}

Step5、编写myComponent.wxml

<view class="my-component" bindtap="handleClick">
  <text>{{title}}</text>
</view>

Step6、编写myComponent.wxss

.my-component {
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

Step7、使用组件

在需要使用该组件的页面中（例如 index 页面），你需要在 index.json 中引入组件，并在 index.wxml 中使用它，几个核心组成分别如下。

{
  "usingComponents": {
    "my-component": "/components/myComponent/myComponent"
  }
}

<view>
  <my-component title="Hello World" bind:click="handleComponentClick"></my-component>
</view>

Page({
  handleComponentClick() {
    wx.showToast({
      title: '组件被点击',
      icon: 'success'
    });
  }
});

至此，运行一下效果，可以看的明白组件的用处了吧。

其实相当于封装公用的部分，各个页面可以快速复用，基本任意前端框架都拥有组件能力，就像 Vue.component。

实战说明

上面基础用法看完，应该大致了解组件的来龙去脉了，那实际开发中，哪些东西可以考虑封装呢，这边以实例进一步补充说明。

本次开发安全巡检小程序的时候，涉及众多表单页面，表单元素里面难免涉及下拉框选项。

那么，传统的做法有几种：picker、actionSheet、自定义模态框等，前两者比较适合数据内容少的情况，如果数据较多，只能自定义模态框的方式，还需要增加上分页或搜索功能。

那分析当前场景，几个表单项都是涉及众多数据元素的情况，那只有自定义开发弹窗了。

好的，那就开发，三下五除二，开发了第一个页面如下，效果还不错。

可以展示信息，可以搜索，可以控制弹窗隐藏和显示，基本具备了。

可是还有很多表单页面，这部分代码量着实不小，所有页面都要拷贝这些代码过去吗？基本HTML、JS、CSS三个部分都要搬了，真的要做搬运工了？

其实不然，这其实你如果还想不到封装组件，那就白做开发这么多年了。

分析了一下前因后果，决定封装一个 showData 数据展示组件，并把组件与父组件的展示一同考虑进去，包括查询数据的接口信息。

Step1、编写JS

var app = getApp();
var ace = require("../../utils/ace.js");

Component({
    /**
     * 组件的属性列表
     */
    properties: {

        url: {  //接口地址
            type: String, value: ''
        },

        textContent: {  //文本内容
            type: String, value: '选择一下：'
        },

        code: {  //Key的属性
            type: String, value: 'valueCode'
        },

        name: {  //Name的属性
            type: String, value: 'valueName'
        },

        ex: {  //额外的属性
            type: String, value: 'validFlag'
        },
    },

    /**
     * 组件的初始数据
     */
    data: {

        dataList: [], query: '',
    },

    created() {
        // 组件创建时的初始化逻辑
        console.log('组件已创建');
    },

    attached() {

        let that = this

        // 组件被插入到页面时的逻辑
        console.log('组件已附加到页面');

        // 访问 properties 中的属性
        const url = this.properties.url || '';
        console.log('url 的值:', url);

        //也可以用data获取
        //const url2 = this.data.url || '';

        if (url) {
            ace.sendGet(url, function (data) {
                if (data) {
                    that.setData({
                        dataList: data
                    })
                }
            })
        }
    },

    ready() {
        // 组件视图渲染完成时的逻辑
        console.log('组件已准备就绪');

    },

    /**
     * 组件的方法列表
     */
    methods: {

        /**
         * 搜索内容
         */
        searchProduct(e) {
            let that = this
            let value = e.detail
            let url = that.data.url
            if (value && url) {
                if (url.indexOf("?") !== -1) {
                    url += '&query=' + value
                } else {
                    url += '?query=' + value
                }
            }
            ace.sendGet(url, function (data) {
                if (data) {
                    that.setData({
                        dataList: data, query: value
                    })
                }
            })
        },

        /**
         * 点击事件
         */
        clickHandle(e) {
            let id = e.currentTarget.dataset.id || ''
            if(id){
                this.triggerEvent('myevent', { data: id});
            }
        },

        /**
         * 关闭事件
         */
        closeHandle: function () {
            this.triggerEvent('myclose');
        }
    },
});

Step2、编写HTML（CSS就不贴出来了）

<van-popup show="true" round position="bottom" bind:close="closeHandle">
    <view class="select-company">
        <van-search value="{{ query }}" placeholder="请输入搜索关键词"
                    bind:change="searchProduct"/>
        <view class="title">{{textContent}}</view>
        <view class="company-list ">
            <view class="item" wx:for="{{dataList}}" wx:key="index" bindtap="clickHandle"
                  data-id="{{ item[code] }}">
                <view class="count">名称：{{item[name]}}</view>
                <view class="count"> | 类型：{{item[ex]}}</view>
            </view>
        </view>
    </view>
</van-popup>

Step3、注册到全局json或页面级json

"usingComponents": {
  "showData": "/components/showData/showData",
}

Step4、具体页面使用组件

<showData url="xjCheckType?userCode={{payNo}}" bind:myevent="handleMyEvent" bind:myclose="handleMyClose"
  wx:if="{{showDataFlag}}"></showData>

至此，搞定收工，效果和原先单独开发效果一样。

---

总结陈词

这里说一个组件封装的思路和技巧，实战开发中，往往不会第一时间就想到功能的可封装性，这并不要求，完全可以等功能开发完毕后，再将第一个版本使用组件，复制一份，最终可以用组件完美复刻功能，即为成功，也是常见思路。

此篇文章是《微信小程序实战》系列的第二篇，后续该专栏会继续分享小程序实战中运用的技能，希望可以帮助到大家。

💗 后续会逐步分享企业实际开发中的实战经验，有需要交流的可以联系博主。