微信小程序组件开发
讲真的，官网文档这方面写的让我很难下手
1.目标
一个搜索框组件
2.呈现效果
捕获.PNG
3.步骤
1）建立文件夹component文件夹，专门放组件
2）在component下建立一个名为MySearch的文件夹
2.PNG
3）对着MySearch文件夹右键，选择新建->Component,会自动生成相关文件
自动生成
4）编写样式,很简单
1.mysearch.wxml
<view class='my-search'>
<input bindinput="search" type='text' confirm-type='search' class='search' placeholder="{{inputText}}"></input>
</view>2.mysearch.wxss
.my-search {
position: fixed;
top: 0;
width: 100%;
}
.search {
border-radius: 100rpx;
height: 75rpx;
background: #fff;
border: 1px solid #d4d4d4;
margin-bottom: 50rpx;
font-size: 35rpx;
padding-left: 90rpx;
}
.search::before {
content: url(https://zzes-1251916954.cos.ap-shanghai.myqcloud.com/search.png);
position: absolute;
left: 20rpx;
top: 20rpx;
}5）配置文件
1.mysearch.json
把 component设为true，默认就是true
{
"component": true,
"usingComponents": {}
}2.mysearch.js 先放代码
Component({
/**
* 组件的属性列表
*/
properties: {
// placeholer文字
inputText: {
type: String,
value: "请输入......"
}
},
/**
* 组件的方法列表
*/
methods: {
search: function(value){
this.triggerEvent("search",value)
}
}
})下面解读代码 1.properties 就是你需要父组件传给这个组件的一些值，比如搜索中的placeholder文字
image.png
2.method 使用的方法，可以内部使用，或者给外部使用的方法
比如搜索事件需要外部调用，所以使用triggerEvent方法来将一些值传到外部，如下图，
自定义组件事件
代码里将input中输入的值，放到事件detail对象中传到外部
输入信息
信息
5.组件点击页面带参跳转
问题：开发的时候遇到了一个问题，当我点击组件，然后向详情页navigateTo的时候，不知道怎么获取当前组件的参数
问题
解决：
通过传入配置再组件里的properties即可，在组件的方法里使用this.properties获取到当前点击组件的properties参数，里面就有当前传入组件的参数，再将其放入自定义触发事件里传到外部即可。
goToDetails: function() {
this.triggerEvent("goToDetails", this.properties)
}
点击后获取的参数
4.参考资料
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录