小程序组件component

为啥用组件呢？

　　　　最肯定的一点是他可以复用。

组件如何使用呢？

　　1、在components下创建文件夹 再新建组件

　　2、在pages json 下导入

{
  "usingComponents": {
    "search":"/components/search/search"
  }
}

　　3 组件中的js 文件 component下增加

  options:{
    styleIsolation:"apply-shared"
  },

　　4、WXML页面应用 <search />

组件和页面如何父子传值?

　　在引用组件的页面中，在组件标签上新增属性值来接收页面中的值

一、搜索组件

wxml 

<!--components/search/search.wxml-->
<view class="{{isFocus? 'containerFocus' : 'container'}}">
  <view class="search">
    <view class="search-text">
      <text  class="iconfont iconfangdajing"></text>
      <input type="text" placeholder="搜索喵星人" bindfocus="handleFocus"  bindconfirm="handleConfirm" value="{{inputValue}}" confirm-type="search"/>
    </view> 
    <view  wx:if="{{isFocus}}" class="search-cancel" bindtap="handleCancel">取消</view>
  </view>  

  <view class="search-history" >
  <text>历史记录</text>
  <text bindtap="handleDel" class="iconfont iconshanchu"></text>
</view>

<view class="search-history-btn" bindtap="handleHistoryItemDel">
  <text data-text="{{item}}" wx:for="{{ historyList}}" wx:key="{{index}}">{{item}}</text>
</view>

<navigator wx:for="{{searchList}}" wx:key="{{index}}" url="{{'/pages/detail/detail?userId='+ item._id }}" open-type="navigate">
    <view class='searchList-item'>
<view>
    <image src="{{item.userPhoto}}" />
    <text>{{item.nickName}}</text>
  </view>
    <text class="iconfont iconyoujiantou" />
  </view>
  </navigator>
</view>

wxss

.container{ position: fixed; left:0; top:0; 100%; height:90rpx; z-index: 9999; overflow: hidden;}
.containerFocus{ position: fixed; left:0; top:0; 100%; height:100%; z-index: 9999; background:#ccc;}
.search{ display: flex; align-items: center; margin:20rpx;}
.search-text  .iconfangdajing{
  margin-left: 6rpx;
}
.search-text {
  background-color: white;
  display: flex;
  align-items: center;
  flex:1;
  border: 1px #b4b5b6 solid ;
  border-radius:10rpx ;
}
.search-text input{ flex:1;}
.search-history{ display: flex; justify-content: space-between; margin:20rpx; margin-bottom: 30rpx;}
.search-history-btn{ margin-bottom: 30rpx;}
.search-history-btn text{
  border: 1px #b4b5b6 solid ;
  border-radius: 20rpx;
  padding: 16rpx;
  background: white;
  margin: 10rpx;
}
.searchList-item view{ display: flex; align-items: center;}
.searchList-item{
  margin-top: 50rpx;
  height: 100rpx;
  display: flex;
  border-bottom: 1rpx #b4b5b6 dashed;
  justify-content: space-between;
 align-items: center;
} 
.search-cancel{ 
  margin-left: 5rpx;
}
.searchList-item image {
   100rpx;
  height: 100rpx;
  border-radius:50% ;
  margin-right:10rpx ;
}

js

// components/search/search.js

const app = getApp()
const db = wx.cloud.database()
Component({
  /**
   * 组件的属性列表
   */  options:{
    styleIsolation:"apply-shared"
  },
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    isFocus:false,
    historyList:[],
    searchList:[],
    inputValue:'',
  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleCancel(){
     this.setData({
      inputValue:'',
      searchList:[]
     })
      wx.getStorage({
        key: 'searchHistory',
        success:res=>{
          this.setData({
            historyList:res.data
          })
        }
      })
      this.setData({
        isFocus:false
      })
    },
    handleFocus(){
      this.setData({
        isFocus:true
      })
    },
    handleConfirm(ev){
      let value = ev.detail.value;
      let cloneHistoryList = [...this.data.historyList];
      cloneHistoryList.unshift(value);
     wx.setStorage({
       data: [...new Set(cloneHistoryList)],
       key: 'searchHistory',
     });
     this.changeSearchList(value);
    },
    handleDel(){
      wx.removeStorage({
        key: 'searchHistory',
        success:res=>{
        this.setData({
          historyList:[]
        })  
        }
      })
    },
    changeSearchList(value){
        db.collection('users').where({
          nickName:db.RegExp({
            regexp:value,
            options:'i'
          })
        }).field({
          userPhoto:true,
          nickName:true
        }).get().then(res=>{
          this.setData({
            searchList:res.data
          })

        })
    },
    handleHistoryItemDel(ev){
        let value = ev.target.dataset.text;
        console.log(value);
        this.changeSearchList(value)
    }
  }
})

二、拨打电话组件 （点击图标拨打电话）

核心：

 wx.makePhoneCall({
        phoneNumber: this.data.phoneNumber,
      })

xwml

<text bindtap="handleCopy" class="iconfont icondadianhua"></text>

js

// components/callPhone/callPhone.js
Component({
  options:{
    styleIsolation:"apply-shared"
  },
  /**
   * 组件的属性列表
   */
  properties: {
phoneNumber:String
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleCopy(){
      wx.makePhoneCall({
        phoneNumber: this.data.phoneNumber,
      })
    }
  }
})

三、复制组件 （点击图标复制文字）

　　

  wx.setClipboardData({
    data: this.data.copyText,
  })

js

// components/copyText/copyText.js
Component({
  options:{
    styleIsolation:"apply-shared"
  },
  /**
   * 组件的属性列表
   */
  properties: {
    copyText:String
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
handleCopy(){
  wx.setClipboardData({
    data: this.data.copyText,
  })
}
  }
})

wxml

<!--components/copyText/copyText.wxml-->
<text bindtap="handleCopy" class="iconfont iconfuzhi"></text>

四、滑动移除项目

用到了 <movable-area><movable-view>

<!--components/removeList/removeList.wxml-->
<movable-area class="area">
  <movable-view  direction="all" class='view' bindtap="handleAddFriend" inertia='true'>{{userMessage.nickName}}</movable-view>
  <navigator url="{{'/pages/detail/detail?userId=' + userMessage._id}}" open-type="navigate">
    <image src="{{userMessage.userPhoto}}" />
  </navigator>
    <view class="delete" bindtap="handleDelMessage">删除</view>
</movable-area> 

wxss

/* components/removeList/removeList.wxss */
/* 就是设置一个公共区域，然后试图在这个区域内，然后试图默认左边预留100repx ,然后设置这个z轴为2，在z=1的最左右两边，都藏着头像和 删除键。 */
.area{
   calc(100% - 40rpx);
  height: 100rpx;
  position: relative;
  margin: 20rpx;
  border-bottom: 2rpx #b4b5b6 dashed;
}
.view{
   calc(100% - 100rpx);
  height: 100%;
  position: absolute;
  top: 0;
  left: 100rpx;
  line-height: 100rpx;
  text-indent: 10rpx;
  z-index: 2;
  background-color: white;
}
image{
   100rpx;
  height: 100rpx;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.delete{
  text-indent: 10rpx;
  line-height: 100rpx;
   100rpx;
  height: 100rpx;
  background-color: red;
  color: white;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

js

// components/removeList/removeList.js
const app = getApp()
const db = wx.cloud.database()
const _ = db.command
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    messageId:String
  },

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

  /**
   * 组件的方法列表
   */
  methods: {
    handleAddFriend(){
      wx.showModal({
        cancelColor: 'cancelColor',
        content:"是否添加好友?",
        cancelText:"考虑一下",
        confirmText:"接受",
        success:res=>{
          if(res.confirm){
            db.collection("users").doc(app.userInfo._id ).update({
              data:{
                friendList:_.unshift(this.data.messageId)
              }
            }).then(res=>{
               
            });
            wx.cloud.callFunction({
              name:'update',
              data:{
                collection:"users",
                doc:this.data.messageId,
                data:`{friendList: _.unshift('${app.userInfo._id}')}`
              }
            }).then(res=>{
            });
            this.removeMessage();
          }
          else if(res.cancel){
              console.log("用户取消")
          }
        }
      })


    },removeMessage(){
      db.collection("messages").where({
        userId:app.userInfo._id
      }).get().then(
        res=>{
        let list = res.data[0].list;
        list = list.filter((val,i)=>{
          return val != this.data.messageId;
        })    ;
        wx.cloud.callFunction({
          name:'update',
          data:{
            collection:"messages",
            where:{
              userId:app.userInfo._id
            },
            data:{
              list
            }
          }
        }).then(res=>{
          this.triggerEvent('myevent',list)
        })
      })
    },
    handleDelMessage(){
      wx.showModal({
        cancelColor: 'cancelColor',
        content:'删除消息',
        confirmText:'删除',
        success:(res)=>{
          if(res.confirm){
  this.removeMessage();
          }
          else if(res.cancel){
          }
        }
      })
    }
  },
  lifetimes:{
attached:function(){
  db.collection("users").doc(this.data.messageId).field({
    userPhoto:true,
    nickName:true
  }).get().then(
    res=>{
      this.setData({
        userMessage:res.data
      })
    }
  )
}
  }
})