小程序组件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>
View Code
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 ;
}
View Code
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)
}
}
})
View Code
二、拨打电话组件 （点击图标拨打电话）
核心：
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,
})
}
}
})
View Code
三、复制组件 （点击图标复制文字）
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,
})
}
}
})
View Code
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;
}
View Code
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
})
}
)
}
}
})
View Code
标签：search,component,程序,100rpx,res,组件,data,wx 来源： https://www.cnblogs.com/zhuangdd/p/14154426.html