微信小程序组件开发
时间:2022-07-23
本文章向大家介绍微信小程序组件开发,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
讲真的,官网文档这方面写的让我很难下手
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.参考资料
- 官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
- 项目代码:https://github.com/klren0312/recipes_wechat
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Valine 一款快速、简洁且高效的无后端评论系统
- 两段有趣的C代码
- 算法数据结构 | 三个步骤完成强连通分量分解的Kosaraju算法
- 并查集算法 详解
- SQL 中 EXISTS 用法详解
- Blazor带我重玩前端(六)
- PB 级大规模 Elasticsearch 集群运维与调优实践
- MySQL实时在线备份恢复方案
- Android通过原生请求直接获取网页内容
- matplotlib | Python强大的作图工具,让你从此驾驭图表(二)
- 设计模式 | Catalog设计模式,抵御业务方需求变动
- 【Flutter 专题】99 初识 EventBus
- LeetCode 102 | 将二叉树中同层的元素归并在一起
- Git | Git入门,成为项目管理大师(二)
- 学习|Unity3D使用协程实现减速停车效果