微信小程序—自定义组件
一、创建与使用
组件创建:
1.在小程序项目根目录新建components文件夹
2.在components文件夹中创建文件夹,自定义命名,如nav
3.右击nav文件夹,选择新建Component,即创建出js、json、wxml、wxss四个文件
组件使用(局部引用与全局引用):
在.json文件中引用组件,组件引用格式:
"usingComponents": {
"引用后的名字":"组件路径"
}
局部引用:只在当前页面使用自定义组件,在其他页面中引入不起作用
1.在要使用组件页面的json文件中进行配置
2.在要使用组件页面的wxml文件中引入
全局引用:可在每个页面中使用自定义组件
1.在全局文件app.json文件中配置
2.在任意小程序中页面的wxml文件中引用都可以使用组件
二、自定义组件的属性
1.在组件的.js文件中,定义属性properties
属性propertise和数据data用法相同,都是可读可写,但是,data更倾向于存储组件的私有数据,properties更倾向于存储外界传递到组件中的数据
2.声明属性节点,并进行定义
Component({//属性定义properties: {//1.完整定义属性方式,可指定属性默认值title: {type: String,value: ''},//2.简化定义属性方式title: String}
})
三、自定义组件数据监听器
1.创建命名为sum的自定义组件,并使用局部引用至页面
2.在组件的wxml文件中进行布局,并添加事件处理函数
3.在组件的js文件中,定义初始数据a,b,sum的值;在组件的方法中声明对应函数
4.添加observers数据监听器节点,监听数据a,b的值并setData sum 的数据变化
sum.wxml
sum.js
Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {a:0,b:0,sum:0},/*** 组件的方法列表*/methods: {adda(){this.setData({a : this.data.a + 1})},addb(){this.setData({b : this.data.b + 1})}},//数据监听节点observers:{'a, b':function(newa,newb){this.setData({sum:newa + newb})}}
})
微信小程序—自定义组件相关推荐
- 微信小程序自定义组件方案
前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...
- 微信小程序自定义组件,提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...
- 微信小程序自定义组件(二)
微信小程序自定义组件 ps 由于作业部落貌似出了点问题,耽误了点时间,找了一个stackedit.io准备写.无奈,这是要自己建编辑器的节奏啊.没有一个能靠的注 为何存在组件 组件间的关系 使用rel ...
- 微信小程序--自定义组件(超详细 从新建到使用)
微信小程序–自定义组件 微信小程序官网介绍! 本文提供给急需使用自定义组件人群,以下是博主个人理解和案例!可以辅助官网来看 介绍: 从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所 ...
- 微信小程序自定义组件子传父详解(多图)
微信小程序自定义组件子传父详解 前言: 刚开始为了测试父传子,所以把页面的数组放在了父组件中 1. 然而子组件中绑定的自定义点击事件依然放在子组件的js文件中 2. 所以就会出现我们点击页面的文字能改 ...
- 微信小程序自定义组件的基本使用
微信小程序自定义组件的基本使用 组件与模块类似,实现了功能的复用,提高开发速率,减少代码量 在开发过程中 , 总会遇到一些功能板块是相同或很类似的 .如两个不同页面都有搜索框 , 或者 导航栏等 . ...
- 基于canvas 2D实现微信小程序自定义组件-环形进度条
基于canvas 2D实现微信小程序自定义组件-环形进度条 最近开发一个小程序项目博闻金榜答题小程序,需要使用到一个可以显示答题倒计时的组件,基于进度条实现,下面就主要介绍基于canvas2D实现一个 ...
- 微信小程序自定义组件-树形数据表格(进阶版)
前言 一.下载引用 二.使用treegrid组件 三.使用文档 属性 事件 四.组件源码 利用递归思想编写的表格行--treegrid-treeline 树形表格--treegrid-treegrid ...
- 小程序组件onload_微信小程序自定义组件(一)
好吧,突然发现学不完了,一下子,那就分开吧,由于时间太久,直接重新大致复习了一下 微信小程序自定义组件 微信小程序支持自定义组件 下方的目录 其中,components为组件目录,nodemodule ...
- 一步步教你实现微信小程序自定义组件
一步步教你实现微信小程序自定义组件 更新时间:2022年03月21日 11:12:34 作者:naluduo233 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,下面这篇文章主 ...
最新文章
- Django使用数据库(Mariadb/Mysql)
- 解决:请购买WinRAR许可,您注册还剩下40天(WinRAR老是弹出烦人的对话框)
- split命令--linux切割(拆分)文件
- vue2.0搭建vue手脚架(vue-cli)
- iOS之深入解析dyld与ObjC关联的底层原理
- 七牛云图片--Java文档
- jQuery插件开发之windowScroll
- html教程作用,HTML段落的作用及教程
- Codeforces 160
- 2021年零基础学Delphi 11开发极简教程
- Java网络编程(两种聊天室:TCP和UDP)
- 小米8屏幕指纹版(UD) 稳定版miui11刷magisk、太极参考
- 根据屏幕分辨率设置 layer.open 的大小
- matlab降水时空分布图,江浙沪地区55年夏季降水时空分布规律研究
- 苹果公司的iPhone产品以及其历史
- 动态炫酷的js背景特效库集锦
- VMware 笔试题目:猫和老鼠玩象棋
- hadoop学习-1
- mapBox使用笔记
- fi选项 电脑没有连接wi_您好,电脑Wi-Fi连接上但是无internet是怎么回事呢