微信ウィジェット開発のカスタムコンポーネントを手触りで教えます

前言
ポップアップボックスなど、小さなプログラムを開発するときに何度も使用する機能に遭遇すると信じています.この时、みんながまず考えているのはコンポーネント化の开発で、ポップアップボックスを1つのコンポーネントにカプセル化して、それからどこでどこを使って呼び出すのか、はい、みんな考えのある人のように见えて、しかしどのように実现しますか.公式文書を見に行くかもしれませんが、微信の公式文書もよく分からないので、書くのもとてもつらいです.今日はみんなを連れて手を触って微信のコンポーネントを開発して、座って、道路の殺し屋は車を運転します.
具体的な実装
まず簡単な弾窓アセンブリを実現します.詳細図は以下の通りです.
1.新しいcomponentフォルダは私达のコンポーネントを保存して、中には私达の使ったコンポーネントを保存して、私达の今日する事のポップアップボックス、新しいフォルダpopupは私达のコンポーネントのテンプレートを保存して、右クリックして新しいcomponentを选んで、自动的にコンポーネントのテンプレートwxss、wxml、json、jsを生成して、図のようです
2.私たちはいくつかのコンポーネントのスタイルとレイアウトを書くことができて、更にページの書き方が似ていて、私はあまり言わないで、直接コードを貼ります:
popup.wxml

popup.wxss

/* component/popup.wxss */
.wx-popup {
  position: absolute;
  left: 0;
  top: 0;

  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
}

.popup-container {
  position: absolute;
  left: 50%;
  top: 50%;

  width: 80%;
  max-width: 600rpx;
  border: 2rpx solid #ccc;
  border-radius: 10rpx;
  box-sizing: bordre-box;
  transform: translate(-50%, -50%); 
  overflow: hidden;
  background: #fff;
}

.wx-popup-title {
  width: 100%;
  padding: 20rpx;
  text-align: center;
  font-size: 40rpx;
  border-bottom: 2rpx solid red;
}

.wx-popup-con {
  margin: 60rpx 10rpx;
  text-align: center;
}

.wx-popup-btn {
  display: flex;
  justify-content: space-around;
  margin-bottom: 40rpx;
}

.wx-popup-btn text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30%;
  height: 88rpx;
  border: 2rpx solid #ccc;
  border-radius: 88rpx;
}

popup.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");
    }
  }
})

Componentこれは自分で微信の公式文書を見て独学能力を鍛えることができます^^;
3.テンプレートファイルも作成しました.トップページでこのコンポーネントを構成する必要があります.まずindexという名前を作成します.jsonのファイルには、「usingComponents」が配置されています.トップページに導入し、直接コードをつける必要があります.

{
  "usingComponents": {
    "popup": "/component/popup/popup"
  }
}

4.これらの基本的な成果を達成し、そして最も重要な一歩も最後の一歩であり、トップページに導入し、コードを見る.

5.indexを構成する.js操作クリックイベント、これはもっと簡単で、コードをつけます

//index.js
//      
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();
  }
})

これで終わりです.簡単なプラグインをパッケージしました.
このコンポーネントはgitに載せましたhttps://github.com/Mr-MengBo/MiniApp-moduleあ、好きならstarを注文してください.ありがとうございます.
また、多くの意見を出して、一緒に進歩してください.