思路:

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. 微信小程序自定义组件,提示组件

    微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组 ...

  2. 微信小程序image组件binderror使用例子(对应html、js中的onerror)

    官方文档  binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong' ...

  3. 微信小程序倒计时组件开发

    今天给大家带来微信小程序倒计时组件具体开发步骤: 先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段 ...

  4. 微信小程序input组件抖动及textarea组件光标错位解决方案

    问题一: 使用微信小程序input组件时,在移动端唤起focus或blur事件时,因光标占位导致内容出现叠影及抖动现象. 解决方案: 用<textarea>组件代替了<input/& ...

  5. 5个最优秀的微信小程序UI组件库

    开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果.自从微信小程序面世以来,不断有一些开源组件库出来,下面5款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库.还没用到它 ...

  6. 微信小程序弹窗组件

    概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demoda ...

  7. 微信小程序的组件总结

    本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...

  8. Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库

    Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库 文档 https://phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组 ...

  9. 微信小程序UI组件库 iView Weapp快速上手

    概述 今天在网上突然看到iView新出了一个微信小程序的组件库iView Weapp,自己就上手试了一下,发现用起来还是不错的,把自己使用的过程与大家分享下. 一 预览iView组件 1.可以在手机上 ...

随机推荐

  1. Scala(一):函数、流程控制、参数

    Function:函数函数的定义: def 函数名(参数):返回类型=函数实现体 eg:def abs(x:Long) : Long = if(x >= 0) x else -x 你必须给出所有 ...

  2. Oracle数据库无法向listener注册的解决一例

    当机器的IP地址改变了,或者机器名改变后, 动态注册可能会失败. 运行 lsnrctl status时,无论等待多久,都会发生:no services 这样的信息. 此时,最好的解决方法,就是删除原有 ...

  3. 【BZOJ1070】[SCOI2007]修车

    [BZOJ1070][SCOI2007]修车 题面 以后要多写题面flag 题目描述 同一时刻有\(N\)位车主带着他们的爱车来到了汽车维修中心.维修中心共有\(M\)位技术人员,不同的技术人员对不同 ...

  4. SpringCloud-微服务配置统一管理SpringCloud Config(七)

    前言:对于应用,配制文件通常是放在项目中管理的,它可能有spring.mybatis.log等等各种各样的配置文件和属性文件,另外你还可能有开发环境.测试环境.生产环境等,这样的话就得一式三份,若是传 ...

  5. Python之函数的递归、匿名函数、内置函数

    一.函数的递归 ''' 1 什么是函数递归 函数递归调用(是一种特殊的嵌套调用):在调用一个函数的过程中,又直接或间接地调用了该函数本身 递归必须要有两个明确的阶段: 递推:一层一层递归调用下去,强调 ...

  6. CSS快速入门-后端布局

    一.后台框架概述 我们在网上随便搜索后台框架,你会发现大部分都查不多.正所谓:好看的皮囊千篇一律,有趣的灵魂万里挑一. 第一个是H-ui,H-ui.admin是用H-ui前端框架开发的轻量级网站后台模 ...

  7. linux安装anaconda3

    1,查看系统的版本  Uname –r 2,安装git 等依赖库 yum install git yum install zlib-devel bzip2-devel openssl-devel nc ...

  8. 总结几种常见web攻击手段及其防御方式

    本文简单介绍几种常见的攻击手段及其防御方式 XSS(跨站脚本攻击) CSRF(跨站请求伪造) SQL注入 DDOS web安全系列目录 总结几种常见web攻击手段极其防御方式 总结几种常见的安全算法 ...

  9. c# 缓存详解

    如果说要对一个站点或者应用程序经常优化,可以说缓存的使用是最快也是效果最明显的方式.一般而言,我们会把一些常用的,或者需要花费大量的资源或时间而产生的数据缓存起来,使得后续的使用更加快速. 如果真要细 ...

  10. codeblocks一些学习

    codeblocks下,怎样建立工程,进行多文件编译?如下是书上的两个文件. https://ask.csdn.net/questions/204326 codeblocks创建静态库并使用 http ...