微信小程序自定义组件
自定义组件
1、在根目录中创建components目录
2、在components目录中声明组件 右击新建component。一个文件夹为一个组件
js文件
Component({options: {styleIsolation: 'apply-shared',//控制组件样式隔离 isolated apply-shared sharedpureDataPattern: /^_/ //指定data中那些数据是纯数据字段 可用正则表达式},/*** 组件的属性列表*/properties: { //组件对外开放的属性声明在此处//简化的声明方式 只指明了类型max: Number,//完整的声明方式 指明了类型和默认值min:{type: Number,value: 10,}},/*** 组件的初始数据*/data: {count: 0},/*** 组件的方法列表*/methods: { //组件中的方法需要声明在methods中addCount(){if(this.data.count<this.properties.max){this.setData({count: this.data.count+1}),this._showCount()}},_showCount(){wx.showToast({title: 'count是:'+this.data.count,icon: 'none'})},addN1(){if(this.data.count<this.properties.max){this.setData({n1: this.data.n1+1})}},addN2(){if(this.data.count<this.properties.max){this.setData({n2: this.data.n2+1})}}}/*** 数据监听器*/observers:{'n1, n2': function(newN1, newN2){ //监听多个数据时用,隔开this.setData({sum: newN1+newN2})}}lifetimes:{ //组件周期函数created:{ //*** 组件实例刚被创建时执行},attached:{ //*** 组件实例进入页面树节点时执行},ready: { //组件渲染完成后执行},moved: { //组件实例被移动时执行},detached: { //组件实例被删除时执行},error: { //组件方法抛出错误时执行}},pageLifetimes:{ //组件监听当前所在页面生命周期show: function() {}, //组件所在页面被展示时执行hide: function() {}, //组件所在页面被隐藏时执行resize: function() {} //组件所在页面尺寸变化是执行}
})组件的wxml文件
<text>我是组件</text>
<view>{{count}}</view>
<button bindtap="addCount">点击</button>
<view>{{n1}}+{{n2}}={{sum}}</view>
<button bindtap="addN1">点击</button>
<button bindtap="addN2">点击</button>
<text>---我是组件---</text>
3、全局引用
json文件 pages平级"usingComponents": {"my-test1": "/components/test/test" //左侧为组件名称 右侧为组件路径
}
应用 在对应页面的wxml文件中
<my-test1 max="20" min="15"></my-test1>
4、页面局部引入自定义组件
引入对应的json文件中
"usingComponents": {"my-test1": "/components/test/test" //左侧为组件名称 右侧为组件路径
}
应用 在对应页面的wxml文件中
<my-test1 max="20" min="15"></my-test1>
微信小程序自定义组件相关推荐
- 微信小程序自定义组件方案
前言:小程序已于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 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,下面这篇文章主 ...
最新文章
- linux sheel script demo
- windows命令行帮助文档如何使用
- 刷题-CC150-Java实现
- word项目符号或编号bullets and numbering
- navicat循环执行上下两行相减sql语句_SQL语句的优化分析
- [CMMI]中型项目流程梳理
- docker上定期备份mysql数据库
- Spring Cloud Netflix Zuul 1.0 简化说明
- Atitit 网络编程之道
- [论文阅读] | Graph U-Nets
- 计算机语言中下划线表示什么,下划线是什么
- 90%程序员是这样写注释的...网友:精辟
- bzoj1921 [CTSC2010]珠宝商 SAM+后缀树+点分治
- 仿中华英才网城市选择
- CODE 薄膜分析设计软件
- mysql函数索引_MySQL 函数索引 (Functional indexes)
- Sql语句筛选出不重复的数据
- firefox浏览器的onblur事件
- python 爬虫哪个好_Python爬虫框架哪个最好用最简单
- 国服Dota2与Steam冲突问题解决