지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 위챗 애플릿 > 미니 프로그램 개발 > 본문

맞춤형 WeChat 애플릿 구성요소(모달 팝업 구성요소)에 대한 자세한 설명

php是最好的语言
풀어 주다： 2018-08-01 10:05:23
원래의
8533명이 탐색했습니다.

미니 프로그램은 언제부터 인기를 얻었는지 알 수 없습니다. 안드로이드든, iOS든, 인기 있는 위챗 미니 프로그램이든, 개발에 종사하는 분들은

공식 네이티브 컨트롤은 더 이상 개발 요구 사항을 완벽하게 충족할 수 없으므로 이 기사에서는 맞춤형 WeChat 애플릿 구성 요소(모달 팝업 구성 요소)를 소개합니다.

먼저 사진을 찍어 보겠습니다.

맞춤형 WeChat 애플릿 구성요소(모달 팝업 구성요소)에 대한 자세한 설명

이것을 보면 렌더링이 여전히 약간 매력적입니다. 하하, 더 이상 말도 안 되는 소리는 하지 말고 코딩을 시작하겠습니다. . .

총 4개의 파일이 있는데, js, json, xml, wxss 입니다. 아직도 헷갈리신다면 나갈 때 왼쪽으로 돌아서 5분 정도 생각해보세요.

먼저 대화 상자.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>
로그인 후 복사

다음에 대화 상자.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;
}
로그인 후 복사

다음에 대화 상자.js 파일을

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

  },

  /**
   * 组件的初始数据
   */
  data: {
    // 弹窗显示控制
    isShow: false,
    type_input: "input",
    type_btn: "button",
    id_sex: "sex",
    id_group: "group",
    dataObject: [],
    sexDefault: "男",
    groupDefault: "组织",
    sexArray: [&#39;男&#39;, &#39;女&#39;],
    groupArray: [&#39;组织&#39;, &#39;群众&#39;],
    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: &#39;请填写姓名&#39;,
          icon: &#39;none&#39;
        })
        return
      }
      if ("" === e.detail.value.phone) {
        wx.showToast({
          title: &#39;请填写电话&#39;,
          icon: &#39;none&#39;
        })
        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-comComponent/

패키징이 완료된 후 프로젝트 구조는 다음과 같습니다:

맞춤형 WeChat 애플릿 구성요소(모달 팝업 구성요소)에 대한 자세한 설명

여기서 오해가 명확하게 설명될 것입니다. 표정을 짓고 계속 읽어주세요. .

세왕이 표시되어 있는데, 표시되지 않은Dialog.json 파일이 있습니다. 이 파일은 매우 간단합니다.

{
  "component": true,//作为组件
  "usingComponents": {}//引用别的组件
}
로그인 후 복사

이 파일도 일반 json 파일과 다른 점은 주로 기타용 컴포넌트로 구성되어 있습니다. 참조하기 위해 이 구성 요소가 캡슐화되었습니다

아마도 이때 많은 어린이들이 코드를 복사하여 붙여넣고 프로젝트에 넣어 실제 결과가 다르다는 것을 알게 됩니다. 그렇다면 일부 사람들은 다음과 같이 말할 수 있습니다. Niang Xipi는 실제로 병행 수입업자이자 거짓말쟁이입니다! ! ! 이 시점에서 저는 단지 이렇게 말할 수 있습니다: 친애하는 여러분, 댄딩, 댄딩. . . , 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"
}
]
로그인 후 복사

picture

맞춤형 WeChat 애플릿 구성요소(모달 팝업 구성요소)에 대한 자세한 설명

이제 저와 같은 효과를 얻으실 수 있을 테니 마음껏 가지고 놀아보세요.

관련 기사:

WeChat 미니 프로그램의 사용자 정의 모달 팝업 창 예에 대한 자세한 설명

WeChat 미니 프로그램 - 사용자 정의 생성

관련 동영상:

WeChat 미니 프로그램 개발 초보자부터 숙달까지 비디오 튜토리얼

위 내용은 맞춤형 WeChat 애플릿 구성요소(모달 팝업 구성요소)에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
小程序 动画
원천：php.cn
이전 기사：모든 도시 목록에 대한 검색 인터페이스를 구현하는 미니 프로그램 개발 다음 기사：WeChat 애플릿 개발 채팅 대화 구성 요소: 온라인 고객 서비스 채팅 대화에 사용할 수 있습니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 웹 애플리케이션을 개발 중입니다. 웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 저는 semantic versioning을 사용하고 있고 이미 ...
에서 2024-04-06 19:13:16
0
2
476
npx create-react-app 명령에 오류가 있습니다. 어떻게 해결합니까? 'npxcreate-react-app' 명령을 사용하여 새 React 앱을 만들려고 했지만 제대로 작동하지 않는 것 같습니다. 최근에 이 문제를 겪은 사람이 있나...
에서 2024-04-05 14:42:18
0
1
3511
CSS를 사용하여 Next.js의 Tic-Tac-Toe 보드에서 각 줄 아래의 공간을 제거하는 방법은 무엇입니까? 각 줄 아래에 공백이 있는 이유는 무엇입니까? (CSS) 저는 제 실력을 테스트하기 위해 Next.js tic-tac-toe 앱을 만들려고 합니다. 그러나 CSS...
에서 2024-04-05 11:39:02
0
1
1431
CommandText 속성 초기화 문제 C# 콘솔 응용 프로그램을 사용하여 데이터를 2개(나중에 3개) 테이블로 동시에 구체화하려고 합니다. "Users" 테이블에 이름, 성, 사용자...
에서 2024-04-04 22:43:24
0
1
385
수정된 제목: 체크박스 선택에 따라 합계 계산 저는 간단한 금융 추적 애플리케이션을 개발 중입니다. 애플리케이션에는 모든 비용 청구서가 포함된 테이블이 있고 테이블 외부에 총 금액이 표시됩니다. JS 또는 A...
에서 2024-04-04 13:45:50
0
1
3465
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿