小程序组件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; width:100%; height:90rpx; z-index: 9999; overflow: hidden;}
.containerFocus{ position: fixed; left:0; top:0; width: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 {
width: 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{
width: calc(100% - 40rpx);
height: 100rpx;
position: relative;
margin: 20rpx;
border-bottom: 2rpx #b4b5b6 dashed;
}
.view{
width: calc(100% - 100rpx);
height: 100%;
position: absolute;
top: 0;
left: 100rpx;
line-height: 100rpx;
text-indent: 10rpx;
z-index: 2;
background-color: white;
}
image{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.delete{
text-indent: 10rpx;
line-height: 100rpx;
width: 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
})
}
)
}
}
})
