カスタマイズされた WeChat アプレット コンポーネント (モーダル ポップアップ コンポーネント) の詳細な説明

いつからか分からないが、ミニ プログラムが人気になってきました。Android、iOS、人気の WeChat ミニ プログラムなど、開発に携わっている人は、

という罠に陥っています。公式ネイティブ コントロールは開発ニーズを完全に満たすことができなくなったため、この記事ではカスタマイズされた WeChat アプレット コンポーネント (モーダル ポップアップ コンポーネント) を紹介します

まず写真を撮りましょう。

これを見ると、レンダリングはまだ少し魅力的に見えますが、はは、これ以上ナンセンスではなく、コーディングを始めましょう。 。 。

js、json、xml、wxssの合計4つのファイルがありますが、これでもよくわからない場合は、外に出て5分間考えてください。

まず、dialog.xml ファイルをレイアウトします

<!--mask dialog-->
<view class="drawer_screen" bindtap="hideDialog" wx:if="{{isShow}}" catchtouchmove="myCatchTouch"></view>
<!--content-->
<!--使用animation属性指定需要执行的动画-->
<view animation="{{animationData}}" class="drawer_box" wx:if="{{isShow}}">

  <!--drawer content-->
  <view class=&#39;row&#39;>
    <view class="drawer_title" style=&#39;width:100%;padding-left:60rpx&#39;>{{title}}</view>
    <icon type="clear" style=&#39;margin-top:40rpx;margin-right:20rpx;&#39; bindtap="hideDialog"></icon>
  </view>
  <form bindsubmit="_formSubmit">
    <scroll-view scroll-y>
      <view class="drawer_content">
        <view wx:for="{{dataObject}}" wx:key="{{id}}">
          <view class="top grid">
            <label class="title col-0" style="color:red" wx:if="{{item.must}}">*</label>
            <label class="title col-0" wx:else> </label>
            <input class="input_base input_h30 col-1" placeholder=&#39;{{item.placeholder}}&#39; wx:if="{{item.type === type_input}}" name="{{item.id}}" value="{{bean[item.id]}}"></input>
            <view class="input_base input_h30 col-1" wx:elif="{{item.id === id_sex}}" hover-class=&#39;btn_ok_hover&#39; bindtap=&#39;{{item.event}}&#39;>{{sexDefault}}</view>
            <view class="input_base input_h30 col-1" wx:elif="{{item.id === id_group}}" hover-class=&#39;btn_ok_hover&#39; bindtap=&#39;{{item.event}}&#39;>{{groupDefault}}</view>
          </view>
        </view>
      </view>
    </scroll-view>
    <button class="btn_ok" hover-class=&#39;btn_ok_hover&#39; formType="submit">确定</button>
  </form>
</view>

次に、dialog.wxss ファイル

/*mask dialog start*/
.drawer_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
  z-index: 1000;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
}

/*content*/

.drawer_box {
  width: 650rpx;
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 1001;
  background: #fafafa;
  margin: -480rpx 50rpx 0 50rpx;
  border-radius: 6px;
}

.drawer_title {
  padding: 15px;
  font: 20px "microsoft yahei";
  text-align: center;
}

.drawer_content {
  height: 720rpx;
  /*overflow-y: scroll; 超出父盒子高度可滚动*/
}

.btn_ok {
  padding: 10px;
  font: 20px "microsoft yahei";
  text-align: center;
  border-top: 1rpx solid #e8e8ea;
  color: #3cc51f;
}

.btn_ok_hover {
  color: #aaa;
  background: #d9d9d9;
}

.top {
  padding-top: 8px;
}

.input_base {
  border: 2rpx solid #ccc;
  border-radius: 20rpx;
  padding-left: 20rpx;
  margin-right: 20rpx;
}

.input_h30 {
  height: 30px;
  line-height: 30px;
}

.title {
  height: 30px;
  line-height: 30px;
  width: 40rpx;
  text-align: center;
  display: inline-block;
  font: 300 28rpx/30px "microsoft yahei";
}

.grid {
  display: -webkit-box;
  display: box;
}

.col-0 {
  -webkit-box-flex: 0;
  box-flex: 0;
}

.col-1 {
  -webkit-box-flex: 1;
  box-flex: 1;
}

/*mask dialog end*/

.row {
  display: flex;
  flex-direction: row;
}

次に、dialog.js ファイル

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

  },

  /**
   * 组件的初始数据
   */
  data: {
    // 弹窗显示控制
    isShow: false,
    type_input: "input",
    type_btn: "button",
    id_sex: "sex",
    id_group: "group",
    dataObject: [],
    sexDefault: "男",
    groupDefault: "组织",
    sexArray: ['男', '女'],
    groupArray: ['组织', '群众'],
    bean: {},
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /*
     * 公有方法
     */
    setDataObj(dataObj,beanObj) {
      this.setData({
        dataObject: dataObj,
        bean: beanObj
      })
      if (beanObj.hasOwnProperty("sex") && beanObj.sex != ""){
        this.setData({
          sexDefault: beanObj.sex
        })
      }
      if (beanObj.hasOwnProperty("group") && beanObj.group != "") {
        this.setData({
          groupDefault: beanObj.group
        })
      }
    },
    //隐藏弹框
    hideDialog() {
      this._showOrCloseDialog("close")
    },
    //展示弹框
    showDialog() {
      this._showOrCloseDialog("open")
    },
    /*
     * 内部私有方法建议以下划线开头
     * triggerEvent 用于触发事件
     */

    _formSubmit(e) {
      if ("" === e.detail.value.name) {
        wx.showToast({
          title: '请填写姓名',
          icon: 'none'
        })
        return
      }
      if ("" === e.detail.value.phone) {
        wx.showToast({
          title: '请填写电话',
          icon: 'none'
        })
        return
      }
      this._showOrCloseDialog("close")
      //触发成功回调
      this.triggerEvent("confirmEvent", {
        e: e
      });
    },

    sexButton: function() {
      var that = this;
      wx.showActionSheet({
        itemList: this.data.sexArray,
        success: function(res) {
          console.log(res.tapIndex)
          that.setData({
            sexDefault: that.data.sexArray[res.tapIndex]
          })
        },
        fail: function(res) {
          console.log(res.errMsg)
        }
      })
    },
    groupButton: function() {
      var that = this;
      wx.showActionSheet({
        itemList: this.data.groupArray,
        success: function(res) {
          console.log(res.tapIndex)
          that.setData({
            groupDefault: that.data.groupArray[res.tapIndex]
          })
        },
        fail: function(res) {
          console.log(res.errMsg)
        }
      })
    },
    _showOrCloseDialog: function(currentStatu) {
      var that = this;
      /* 动画部分 */
      // 第1步：创建动画实例 
      var animation = wx.createAnimation({
        duration: 200, //动画时长
        timingFunction: "linear", //线性
        delay: 0 //0则不延迟
      });

      // 第2步：这个动画实例赋给当前的动画实例
      this.animation = animation;

      // 第3步：执行第一组动画
      animation.opacity(0).rotateX(-100).step();

      // 第4步：导出动画对象赋给数据对象储存
      that.setData({
        animationData: animation.export()
      })

      // 第5步：设置定时器到指定时候后，执行第二组动画
      setTimeout(function() {
        // 执行第二组动画
        animation.opacity(1).rotateX(0).step();
        // 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象
        that.setData({
          animationData: animation
        })

        //关闭
        if (currentStatu == "close") {
          that.setData({
            isShow: false
          });
        }
      }.bind(this), 200)

      // 显示
      if (currentStatu == "open") {
        that.setData({
          isShow: true
        });
      }
    }
  },
  //解决滚动穿透问题
  myCatchTouch: function () {
    return
  }
})

これを見た友人の中には、あなたは並行輸入業者ですか、js ファイルの構造は何なのかと尋ねるかもしれません。なぜ私と違うのですか？心配しないで、聞いてください。実際、呼び出しの便宜のために、このダイアログをコンポーネントにカプセル化しました。コンポーネントをカプセル化する方法を尋ねますか?公式チュートリアルに移動してください:

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

パッケージ化が完了した後のプロジェクト構造は次のようになります:

誤解についてはここで明確に説明しますので、少し顔を見せて読み続けてください。 。

3人の王は表示されていますが、表示されていないdialog.jsonファイルがあります。このファイルは非常にシンプルです

{
  "component": true,//作为组件
  "usingComponents": {}//引用别的组件
}

このファイルも一般的なjsonファイルとは異なり、主に他のコンポーネントとして構成されています。このコンポーネントはカプセル化されています

おそらくこの時点で、多くの子供たちはコードをコピーして貼り付け、実際の外観を確認するのを待ちきれずに、実行結果が異なることに気づきます。レンダリングから見ると、ニアン・シピは本当に並行輸入者で嘘つきだ、と言う人もいるかもしれない。 ！ ！この時点で私が言えることは、「親愛なる村民の皆さん、ダンディン、ダンディン」です。 。 。 、js には dataObject と Bean がないため、レンダリングは記事の冒頭で示したものとは異なります。そこで、それを呼び出して私と同じ効果を達成する方法を説明しましょう。

参照先の xml に次のコードを追加します

<image src="../../img/add.png" class="buttom" bindtap="bindAdd"></image>

<dialog id=&#39;dialog&#39; title=&#39;新增&#39; bind:confirmEvent="_confirmEvent"></dialog>

buttom これはフローティング ボタンです。wxss も提供します

.buttom{
  width: 100rpx;
  height: 100rpx;
  display: flex;
  flex-direction: row;
  position: fixed;
  bottom:60rpx;
  right: 60rpx;
}

次に、参照先ページの js ファイル内に

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



//响应button弹框
bindAdd: function(e) {
    this.dialog.setDataObj(addObject, {})
    this.dialog.showDialog();
}

この時点で、基本的にフローティング ボタンをクリックして実現しますポップアップボックス。巨乳のデイがまた言いました。「おいおい、待って、addObject、そしてその add.png はまだ与えられていません。」わかった、あげて、あげて

const addObject = [{
  id: "name",
  must: true,
  placeholder: "姓名",
  type: "input",
  event: "nameInput"
},
{
  id: "sex",
  must: true,
  placeholder: "男",
  type: "button",
  event: "sexButton"
},
{
  id: "group",
  must: true,
  placeholder: "组织",
  type: "button",
  event: "groupButton"
},
{
  id: "phone",
  must: true,
  placeholder: "电话号码",
  type: "input",
  event: "phoneInput"
},
{
  id: "shortNum",
  must: false,
  placeholder: "集团短号",
  type: "input",
  event: "shortNumInput"
},
{
  id: "mail",
  must: false,
  placeholder: "电子邮箱",
  type: "input",
  event: "mailInput"
},
{
  id: "unit",
  must: false,
  placeholder: "单位名称",
  type: "input",
  event: "unitInput"
},
{
  id: "department",
  must: false,
  placeholder: "部门名称",
  type: "input",
  event: "departmentInput"
},
{
  id: "job",
  must: false,
  placeholder: "职务",
  type: "input",
  event: "jobInput"
},
{
  id: "function",
  must: false,
  placeholder: "涉及工作内容",
  type: "input",
  event: "functionInput"
},
{
  id: "comPhone",
  must: false,
  placeholder: "办公电话",
  type: "input",
  event: "comPhoneInput"
},
{
  id: "fax",
  must: false,
  placeholder: "传真",
  type: "input",
  event: "faxInput"
},
{
  id: "homePhone",
  must: false,
  placeholder: "家庭电话",
  type: "input",
  event: "homePhoneInput"
},
{
  id: "showOrder",
  must: false,
  placeholder: "显示顺序",
  type: "input",
  event: "showOrderInput"
},
{
  id: "departOrder",
  must: false,
  placeholder: "部门顺序",
  type: "input",
  event: "departOrderInput"
},
{
  id: "remark",
  must: false,
  placeholder: "备注",
  type: "input",
  event: "remarkInput"
}
]

写真

この時点で、あなたも私と同じ効果を達成できるはずですので、先に進んで遊んでください。

関連記事:

WeChat ミニ プログラムのカスタム モーダル ポップアップ ウィンドウの例の詳細説明

WeChat ミニ プログラム - カスタム作成

関連動画:

WeChat ミニ プログラム開発の初心者から熟練者までビデオチュートリアル

以上がカスタマイズされた WeChat アプレット コンポーネント (モーダル ポップアップ コンポーネント) の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。