微信小程序自定义组件实战的三个实例（1）

现在前端的组件大行其道，大家都认为组件可以更适合大型项目，更加的便捷，所以我们需要掌握一下。

实战一

先做一个简单的，常用的弹框，最终效果：

step 1 创建components

根目录下创建一个components文件夹。然后在里边建一个子目录，如exchange,此时右键新建一个component即可产生需要的子文件

例一

把一个以前本来在多个页面会应用到的弹框整合到外边。

step1

根目录下创建一个components文件夹。然后在里边建一个子目录，如convert

step2

wxml



  
    {{title}}
    {{content}}
    
      {{btn_no}}
      {{btn_ok}}

接下来写wxss,说明一下，咱们调样式一般是先在其他页面写好某一块，此时样式啊，结构啊，js啊，都已经实现了，然后再整合到组件里，并不是你想写一个这样的组件上来就在这个组件这一部分写的，当然，如果你能找到一个页面来辅助显示你当前写的这个组件的逻辑和样式那就无所谓啦，程序并没有一定之规，条条大路通罗马。



  
    {{title}}
    {{content}}
    
      {{btn_no}}
      {{btn_ok}}

json文件这里是跟普通页面的json是不一样的：

{
  "component": true,
  "usingComponents": {}
}

接下来就是最重要的逻辑部分的代码了

// components/exchange/exchange.js
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
    title: {            // 属性名
      type: String,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '标题'     // 属性初始值（可选），如果未指定则会根据类型选择一个
    },
    // 弹窗内容
    content: {
      type: String,
      value: '内容'
    },
    // 弹窗取消按钮文字
    btn_no: {
      type: String,
      value: '取消'
    },
    // 弹窗确认按钮文字
    btn_ok: {
      type: String,
      value: '确定'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    flag: true,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //隐藏弹框
    hidePopup: function () {
      this.setData({
        flag: !this.data.flag
      })
    },
    //展示弹框
    showPopup() {
      this.setData({
        flag: !this.data.flag
      })
    },
    /*
    * 内部私有方法建议以下划线开头
    * triggerEvent 用于触发事件
    */
    _error() {
      //触发取消回调
      this.triggerEvent("error")
    },
    _success() {
      //触发成功回调
      this.triggerEvent("success");
    }
  }
})

step 3 在其他页面应用

建一个新的页面test，在该页面使用这个组件
wxml

json文件

{
  "usingComponents": {
    "popup": "/components/exchange/exchange"
  }
}

const app = getApp()

Page({
  onReady: function () {
    //获得popup组件
    this.popup = this.selectComponent("#popup");
  },

  showPopup() {
    this.popup.showPopup();
  },

  //取消事件
  _error() {
    console.log('你点击了取消');
    this.popup.hidePopup();
  },
  //确认事件
  _success() {
    console.log('你点击了确定');
    this.popup.hidePopup();
  }
})

就能实现效果了。

案例遇到的几个问题：

关于样式：

只使用类名选择器，不要使用其他，包括后代选择器，而且app.wxss里的样式以及组件所在页面的样式对组件的样式没有影响/不起作用

两个开发者工具警告的意思：

页面没有处理函数

这是页面没有相应的事件处理函数。

组件没有处理函数

这是组件的methods里边没有相应的事件处理函数

不喜欢过长的文章，所以决定第二个实战和第三个实战项目写在下一篇。

微信小程序 自定义组件实战的三个实例（1）

实战一