小程序 组件

作者: nCov | 来源:发表于2019-07-03 19:23 被阅读0次

    有的时候总是需要把能复用的东西封装在组件方便调用 ,可又不经常用写篇短文记录下!

    效果图
    1. 组件页面声明 component字段为true
    {
        "component": true,
     }
    

    2.js组件框架结构

    
    Component({
      options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
      },
      
      /**
       * 组件的属性列表
       * 用于组件自定义设置
       */
      properties: {
        
      },
    
      /**
       * 私有数据,组件的初始数据
       * 可用于模版渲染
       */
      data: {
    
        
      },
    
      /**
       * 组件的方法列表
       * 更新属性和数据的方法与更新页面数据的方法类似
       */
      methods: {
        
       }
    
    })
    
    

    3.json引用组件位置,如这里引用一个自定义模拟框
    注意:这里定义了的是modal 下面wxml对标签也要使用modal 命名

    {
      
    "usingComponents": {
        "modal": "/pages/component/modal/modal"
      }
     
    
    }
    

    4.wxml 引用

      <!-- <modal id='modal'  name='添加分类' bind:openModal="openModal" bind:closeModal="closeModal" /> -->
      <modal id='modal' name='添加分类' bind:openModal="openModal"  bind:closeModal="closeModal"></modal>
    
    1. js文件调用
    this.modal = this.selectComponent("#modal"); //具体根据自己业务场景放在合适的位置
    
    /*添加商品分类*/
      addGoodsclass(){
        this.modal.openModal()
      },
    
      /*关闭自定义弹窗 */
      closeModal(){
        this.modal.closeModal()
      }
    
    

    6.自定义组件

    
    Component({
      options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
      },
      
      /**
       * 组件的属性列表
       * 用于组件自定义设置
       */
      properties: {
        
        name: {             // 弹窗标题     
          type: String,     
          value: '标题'     
        },
      },
    
      /**
       * 私有数据,组件的初始数据
       * 可用于模版渲染
       */
      data: {
        showModalStatus: false,
        animationData: {}
      },
    
      /**
       * 组件的方法列表
       * 更新属性和数据的方法与更新页面数据的方法类似
       */
      methods: {
        openModal () {
         let currentStatu = "open";
         this.util(currentStatu)
          
        },
    
        closeModal() {
          let currentStatu = "close";
          this.util(currentStatu)
    
        },
    
        util(currentStatu) {
    
          var animation = wx.createAnimation({
            duration: 200,
            timingFunction: "linear",
            delay: 0
          });
          this.animation = animation;
          animation.opacity(0).rotateX(-100).step();
          this.setData({
            animationData: animation.export()
          })
    
    
          setTimeout(function () {
            animation.opacity(1).rotateX(0).step();
            this.setData({
              animationData: animation
            })
            if (currentStatu == "close") {
              this.setData(
                {
                  showModalStatus: false
                }
              );
            }
          }.bind(this), 200)
          if (currentStatu == "open") {
            this.setData(
              {
                showModalStatus: true
              }
            );
          }
        }
    
       }
    
    })
    
    

    至于组件的wxml和wxss写法与普通的wxml、wxcc类似!
    其小程序自定义组件目的是复用,所以我们可以利用slot节点,用于承载组件使用者提供的wxml结构
    这样就可以使用同一组件,而又可以拥有不同的样式结构

    1. 节点
      为节点提供插入一个wxml结构
    <modal id='modal' name='添加分类' tip="最多4个字" bind:openModal="openModal"  bind:closeModal="closeModal">
         <view slot="before">
                <view class="drawer_content">
                  <input maxlength="4" ></input>
                </view>
           </view>
    
    </modal>
    

    8.组件wxml slot节点承载插入的wxml结构

    <!--mask-->
    <view class="drawer_screen"   wx:if="{{showModalStatus}}"></view>
    <!--content-->
     
    <view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}">
    
        <view class="t_box">
            <view class="drawer_title">{{name}}</view>
            <view class="tip">(提示:{{tip}})</view>
        </view>
    
    
    <slot name="before"></slot>
        
         <view class="b_box">
            <view class="btn_qx" catchtap="closeModal" >取消</view>
            <view class="btn_ok" catchtap="closeModal" >确定</view>
        </view>
       
    </view>
    
    最后效果

    页面给组件传递数据,这个也很重要必须记录下

    1.页面传递参数给组件, data-other="{{xxx}"类似平常的自定义的参数

    <modal id='modal' name='添加分类' tip="分类名称最多4个字"  data-other="{{goods.newclass}}" ></modal>
    

    组件页面获取data-other="{{xxx}}" 参数. 添加如下方法即可获取

    attached: function () {
       //通过dataset获取data-other的值
        console.log(this.dataset.other);
      }
    

    2 组件如何给调用页传递参数?在调用页绑定一个自定义方法bindevent="goodsEvent" ,组件里用
    this.triggerEvent('event')回传数据到绑定方法上。
    调用页

    <modal id='modal' name='添加分类' tip="分类名称最多4个字"   bindevent="goodsEvent" ></modal>
    
    

    组件,此次event就是自定义的方法名

    //组件
     butok(){
          this.triggerEvent('event')//通知父级页面用户已点确定(与父级页通信)
        }
    

    最后调用页面的js里写上goodsEvent 方法即可获取到组件传递过来的数据

    goodsEvent(){
        console.log('已接受到')
      }
    

    总结下this.triggerEvent('event') 第一个参数 回调绑定方法名称, 第二个应该是你想要回传的数据,因为这里我只是为了监听用户是否点了确定,所以没尝试如有需要请尝试!有需要交流请下方留言!

    页面调用组件里的方法
    test(){
       
        this.edit = this.selectComponent("#edit");//获取自定义子组件
       
        this.edit.returnData();
       
      
      }
    

    下面只需要在组件methods里定义方法returnData

     returnData() {
          console.log('hello world! I am learning 微信小程序')
       
        },
    
    页面调用组件里的变量及设置
    //组件里的一个变量
     data: {
      param:'你好'              
      },
    
    //页面
         this.model= this.selectComponent("#model");//获取自定义子组件
          console.log(this.model.data.param)
          this.model.setData({
            param: 'test'
          })
    
    

    相关文章

      网友评论

        本文标题:小程序 组件

        本文链接:https://www.haomeiwen.com/subject/aejchctx.html