微信小程序公共组件的引用与控制
2017-11-29 22:16
459 查看
思路:
1.在组件wxml文件里实现布局、数据绑定、事件绑定;
2.组件js文件里定义事件,并将文件所有内容作为一个对象export出去;
3.在引用的文件引入组件(方式有两种,一个是用include引入,一个是import引入,详情:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/import.html);
4.数据传递。在引用文件对应的js里定义要传递的数据,数据名称与组件wxml文件里的一致;
5.函数映射。在引用文件对应的js里import组件js对象,并将相应事件映射过来,映射名须与函数名一致。
例子:公用组件为一个蒙版弹窗,提示内容各页面也有差异,以其中一个为例
效果图:
代码(样式部分的代码就不贴了=.=)
1.components
wxml: (如果要用import方式引入组件,则wxml文件需将template作为根元素)
js: 定义了一个yesIKonw事件来控制关闭蒙蔽层
2.引用页面
wxml: 通过include引入公共组件
js: 定义要传递的数据值(flag、alertInfo),并映射函数yesIKnow,使得在引用页可控制蒙版组件的展示与隐藏。
PS:
1.需在引用页的wxss文件里引入公共组件的样式wxss文件
@import "../components/promptBox/index.wxss";
2.蒙版样式:
.mask {
position: fixed;
width: 100%;
height: 100%;
top: 0;
background: rgba(0, 0, 0, 0.4);
overflow: hidden;
/* stylelint-disable */ //这个是禁止styleint检测的语句
z-index: 1;
}
1.在组件wxml文件里实现布局、数据绑定、事件绑定;
2.组件js文件里定义事件,并将文件所有内容作为一个对象export出去;
3.在引用的文件引入组件(方式有两种,一个是用include引入,一个是import引入,详情:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/import.html);
4.数据传递。在引用文件对应的js里定义要传递的数据,数据名称与组件wxml文件里的一致;
5.函数映射。在引用文件对应的js里import组件js对象,并将相应事件映射过来,映射名须与函数名一致。
例子:公用组件为一个蒙版弹窗,提示内容各页面也有差异,以其中一个为例
效果图:
代码(样式部分的代码就不贴了=.=)
1.components
wxml: (如果要用import方式引入组件,则wxml文件需将template作为根元素)
js: 定义了一个yesIKonw事件来控制关闭蒙蔽层
2.引用页面
wxml: 通过include引入公共组件
js: 定义要传递的数据值(flag、alertInfo),并映射函数yesIKnow,使得在引用页可控制蒙版组件的展示与隐藏。
PS:
1.需在引用页的wxss文件里引入公共组件的样式wxss文件
@import "../components/promptBox/index.wxss";
2.蒙版样式:
.mask {
position: fixed;
width: 100%;
height: 100%;
top: 0;
background: rgba(0, 0, 0, 0.4);
overflow: hidden;
/* stylelint-disable */ //这个是禁止styleint检测的语句
z-index: 1;
}
相关文章推荐
- 微信小程序公共组件的引用与控制
- 微信小程序之组件模板(公用)引用
- 微信小程序开发—引用公共js里的方法
- 微信小程序引用公共js里的方法的实例详解
- 【微信小程序】 引用公共js里的方法
- 写一个微信小程序自定义公共组件
- 微信小程序实践之动态控制组件的显示/隐藏功能
- 微信小程序组件(四)text
- 微信小程序----progress组件
- 微信小程序开发日记之----swiper组件的坑
- 微信小程序 倒计时组件实现代码
- 「微信小程序免费辅导教程」25,基本内容组件text的使用及个人帐号允许的服务类目
- 微信小程序使用swiper组件实现类3D轮播图
- 2.2.2微信小程序内容组件 text(文本)
- 微信小程序:wxml组件整理,待补充......
- 微信小程序组件:audio及api
- 微信小程序例子——使用video组件播放视频
- 微信小程序媒体组件(二)image
- 微信小程序组件解读和分析:十二、picker滚动选择器
- 微信小程序 checkbox组件详解及简单实例