微信小程序公共组件的引用与控制
思路:
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文件
微信小程序公共组件的引用与控制的更多相关文章
- 微信小程序自定义组件,提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组 ...
- 微信小程序image组件binderror使用例子(对应html、js中的onerror)
官方文档 binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong' ...
- 微信小程序倒计时组件开发
今天给大家带来微信小程序倒计时组件具体开发步骤: 先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段 ...
- 微信小程序input组件抖动及textarea组件光标错位解决方案
问题一: 使用微信小程序input组件时,在移动端唤起focus或blur事件时,因光标占位导致内容出现叠影及抖动现象. 解决方案: 用<textarea>组件代替了<input/& ...
- 5个最优秀的微信小程序UI组件库
开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果.自从微信小程序面世以来,不断有一些开源组件库出来,下面5款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库.还没用到它 ...
- 微信小程序弹窗组件
概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demoda ...
- 微信小程序的组件总结
本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...
- Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库
Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库 文档 https://phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组 ...
- 微信小程序UI组件库 iView Weapp快速上手
概述 今天在网上突然看到iView新出了一个微信小程序的组件库iView Weapp,自己就上手试了一下,发现用起来还是不错的,把自己使用的过程与大家分享下. 一 预览iView组件 1.可以在手机上 ...
随机推荐
- Scala(一):函数、流程控制、参数
Function:函数函数的定义: def 函数名(参数):返回类型=函数实现体 eg:def abs(x:Long) : Long = if(x >= 0) x else -x 你必须给出所有 ...
- Oracle数据库无法向listener注册的解决一例
当机器的IP地址改变了,或者机器名改变后, 动态注册可能会失败. 运行 lsnrctl status时,无论等待多久,都会发生:no services 这样的信息. 此时,最好的解决方法,就是删除原有 ...
- 【BZOJ1070】[SCOI2007]修车
[BZOJ1070][SCOI2007]修车 题面 以后要多写题面flag 题目描述 同一时刻有\(N\)位车主带着他们的爱车来到了汽车维修中心.维修中心共有\(M\)位技术人员,不同的技术人员对不同 ...
- SpringCloud-微服务配置统一管理SpringCloud Config(七)
前言:对于应用,配制文件通常是放在项目中管理的,它可能有spring.mybatis.log等等各种各样的配置文件和属性文件,另外你还可能有开发环境.测试环境.生产环境等,这样的话就得一式三份,若是传 ...
- Python之函数的递归、匿名函数、内置函数
一.函数的递归 ''' 1 什么是函数递归 函数递归调用(是一种特殊的嵌套调用):在调用一个函数的过程中,又直接或间接地调用了该函数本身 递归必须要有两个明确的阶段: 递推:一层一层递归调用下去,强调 ...
- CSS快速入门-后端布局
一.后台框架概述 我们在网上随便搜索后台框架,你会发现大部分都查不多.正所谓:好看的皮囊千篇一律,有趣的灵魂万里挑一. 第一个是H-ui,H-ui.admin是用H-ui前端框架开发的轻量级网站后台模 ...
- linux安装anaconda3
1,查看系统的版本 Uname –r 2,安装git 等依赖库 yum install git yum install zlib-devel bzip2-devel openssl-devel nc ...
- 总结几种常见web攻击手段及其防御方式
本文简单介绍几种常见的攻击手段及其防御方式 XSS(跨站脚本攻击) CSRF(跨站请求伪造) SQL注入 DDOS web安全系列目录 总结几种常见web攻击手段极其防御方式 总结几种常见的安全算法 ...
- c# 缓存详解
如果说要对一个站点或者应用程序经常优化,可以说缓存的使用是最快也是效果最明显的方式.一般而言,我们会把一些常用的,或者需要花费大量的资源或时间而产生的数据缓存起来,使得后续的使用更加快速. 如果真要细 ...
- codeblocks一些学习
codeblocks下,怎样建立工程,进行多文件编译?如下是书上的两个文件. https://ask.csdn.net/questions/204326 codeblocks创建静态库并使用 http ...