小程序组件onload_微信小程序自定义组件踩坑教程
微信小程序不支持自定义组件,只提供了一个非常受限制的模板功能,尤其缺乏了开发产品中最重要的几个功能:模板内的数据只能由当前页面传递,无法预先设置一些初始化数据以达到复用的目的;
模板内的数据变化无法通知到当前页面,也就是说模板不知道谁在使用它,只能在当前页面定义方法绑定在模板内部的组件事件上来处理交互逻辑;
模板内部无法预先设置一些内部逻辑代码。
这些局限性分分钟叫人抓狂,这个模板功能只是实现了UI层复用的功能,所有的逻辑代码都需要在页面上重新写一遍。
开发和维护的效率一下子回到了解放前,再也没法愉快地思考业务需求了,先把这个坑补补,大路貌似走不通,只能另辟弯道,曲线救国了。
解决思路:所有的页面都通过全局Page函数来定义,它提供了一个onLaunch的触发事件,看来能在这里想想办法。 我们大致需要这样的自定义组件或者说是模板:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47/*这是一个组件基类*/
module.exports = class BaseComp {
constructor({
key,
page,
data = {}
}) {
this.key = key this.page = page this.data = data...
}
/*当组件内部数据变化后,能在这里更新页面*/
update() {}
/*当页面触发事件时,组件也应该能捕捉到*/
onLoad() {}
onReady() {}
onShow() {}
onHide() {}
onUnload() {}
}
/*这是一个文本框组件*/
module.exports = class FormInput extends BaseComp {
constructor({
key,
page,
data
}) {
/*这里可以定义一些默认数据*/
data = Object.assign({
type: 'text',
label: '',
placeholder: '',
value: '',
...focus: false
},
data)
super({
key,
page,
data
})
}
onfocus(e) {...
}
onblur(e) {...
}
onchange(e) {...
}
}
小程序的视图(wxml)和js无法像webpack那样打包在一起,所以只能利用现有的模板功能,把小程序原生组件组合成一个自定义组件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{{label}}
placeholder-class="{{placeholderClass}}"
placeholder="{{placeholder}}"
value="{{value}}"
data-key="{{key}}"
data-index=""
bindfocus="_EventProxy"
bindblur="_EventProxy" />
{{message}}
1.写个Page函数,在App初始化之前中引入,把小程序的全局Page替换掉。在这个Page函数内根据配置参数实例化自定义组件,把当前页面赋给组件的page属性,并向组件传入当前页面的'onLoad','onReady'等事件;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20const Page = this.Page
this.Page = function( config ) {
if( config.components ) {
let onLoad = config.onLoad
config.onLoad = function() {
for( let key in config.components ) {
let opts = config.components[ key ]
opts.key = key
opts.page = this
config.components[ key ] = new comp[ opts.is ]( opts )
config.components[ key ].onLoad( arguments )
}
if( onLoad ) {
onLoad.call( this, arguments )
}
}
......
2.Page函数在当前页面上添加一个统一的事件代理(Proxy),自定义组件内部的小程序原生组件上的事件全部指向这个代理方法,由这个事件代理根据事件对象判断是由哪个自定义组件、自定义组件内的哪个原生组件触发的,触发的是哪个事件,然后再调用自定义组件的处理方法去执行内部逻辑。
1
2
3
4
5
6
7
8
9
10
11
12
13config._EventProxy = function( e ) {
let dset = e.currentTarget.dataset
let comp = config.components[ dset.key ]
/*
组件上定义的事件名必须为 on + event.type
data-index用来区分多个同名事件
*/
let event = 'on' + e.type + dset.index
if( comp && comp[ event ] ) {
comp[ event ].call( comp, e )
}
}
最后再执行小程序的Page函数
1Page( config )
3.自定义组件基类中实现了更新页面数据的公共方法
1
2
3
4
5
6
7
8update() {
let origin = this.page.data[this.key] || {}
let data = Object.assign({}, origin, this.data)
this.page.setData({
[this.key]: data
})
}
小程序组件onload_微信小程序自定义组件踩坑教程相关推荐
- 小程序组件onload_微信小程序自定义组件(一)
好吧,突然发现学不完了,一下子,那就分开吧,由于时间太久,直接重新大致复习了一下 微信小程序自定义组件 微信小程序支持自定义组件 下方的目录 其中,components为组件目录,nodemodule ...
- 微信小程序之圆形进度条(自定义组件)
前言 昨天在微信小程序实现了圆形进度条,今天想把这个圆形进度条做成一个组件,方便以后直接拿来用. 根据官方文档自定义组件一步一步来 创建自定义组件 第一步创建项目结构 打开微信开发者工具创建一个项目, ...
- 【微信小程序】组件的生命周期及自定义组件
文章目录 组件的生命周期 自定义组件的生命周期函数 执行顺序 组件常用的生命周期函数 lifetimes节点 组件所在页面的生命周期函数 pageLifetimes节点 自定义组件 创建自定义组件 创 ...
- php小程序地图处理,微信小程序 地图map详解及简单实例
微信小程序 地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber中心经度 latitudeNumber中心纬度 scaleNumber1缩放级别 markersArra ...
- c++小程序代码_# 微信小程序的原生框架和taro对比 ##
微信小程序的原生框架和taro对比 小程序历史(为什么会出现?) 2007年 iPhone H5 大家知道现在手机端主要是iOS.Android两大系统,实际上在早期有3大系统竞争,还有一个就是诺基亚 ...
- 【微信小程序系列】微信小程序超简单教程,基本语法,获取用户基本数据信息,实现对云数据库的增删改查及小程序外部api的引用示例(附源码)
[微信小程序系列]微信小程序超简单教程 小程序项目结构 静态页面的构成 HTML:结构 css:样式 js:行为 小程序 页面全部存放在pages, 而且pages目录只能存放页面 页面包括4个文件, ...
- php小程序地图处理,微信小程序地图 map
微信小程序地图 map 微信小程序map 地图 标记点 标记点用于在地图上显示标记的位置,不能自定义图标和样式 覆盖物 覆盖物用于在地图上显示自定义图标,可自定义图标和样式 地图组件的经纬度必填, 如 ...
- 【小程序迁移】微信小程序迁移到支付宝记坑
[小程序迁移]微信小程序迁移到支付宝记坑 文档控制台网址汇总 前言 本地区别 仅企业可用的功能 限制功能 插件区别 云开发API区别 需要做的代码变更 xml部分 CSS部分 JS部分 自定义组件 比 ...
- 微信小程序的文件结构 —— 微信小程序教程系列(1)
文件结构 示例目录:HelloWorld *******************************************************分割线********************* ...
最新文章
- 百度地图 js 在安卓端手指缩放无效_利用百度地图绘制3D轨迹演示
- Kubernetes operator 模式开发实践
- 微信公众号自定义菜单设置管理
- 如何为CentOS 7配置静态IP地址
- Hadoop Flume
- linux的swap相关
- nyoj-488 素数环 +nyoj -32 组合数 (搜索)
- Python学习笔记五
- python requests 安装
- 51单片机-直流电机
- badboy使用简介
- 文件内存映射(一):它是什么
- 游戏手柄(JoyStick)的延时处理
- 关于云计算存储虚拟化技术三个层次上的实现
- c语言中最大公约数的编程,C语言中最大公约数求法
- 51单片机auxr寄存器_AT89S51存储器的结构
- 第九篇《颅骨穿孔——后篇》
- 从蜂拥而上到纷纷退场,AI芯片谁在“裸泳”?
- 微信视频压缩怎么弄到微信可以发
- 网银新一代液晶按键USBkey安全分析
热门文章
- 84. 柱状图中最大的矩形
- DevOps系列之 —— 持续开发与集成(五)华为云 DevCloud 代码托管服务及 CloudIDE
- 分享给大家一篇励志大师的文章--一个男人关心的东西,决定了他的层次!
- 证监会计算机类专业科目考试,2019年国家公务员考试中国证监会专业科目考试大纲(计算机类)...
- 【JavaScript】-- 隐式数据类型转换
- 人体骨骼关键点检测综述(1)
- 【基于宝塔的下载站】H5ai搭建服务器下载站
- Python_IPy
- build.gradle.kts添加maven仓库
- MSN病毒原理及测试代码