思路:

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. R语言数据结构一

    R是面向对象的语言,它跟其他编程语言的数据类型差不多,有四种,分别为:数值型,复数型,逻辑性和字符型 数值型:即数字,分为整数型和双精度型.数字可以用科学技术法表示,形式为Xe+m,意为x乘10的m次 ...

  2. Truck History(prime)

    Truck History Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 31871   Accepted: 12427 D ...

  3. python模拟随机游走

    在python中,可以利用数组操作来模拟随机游走. 下面是一个单一的200步随机游走的例子,从0开始,步长为1和-1,且以相等的概率出现.纯Python方式实现,使用了内建的 random 模块: # ...

  4. switch...case 语句

    var a = 6;switch(a){ case 1:   alert("1111");   break; case 2:   alert("2222");  ...

  5. 【mysql】排序方法

    查询各科成绩前三名的记录,不考虑并列的情况: select a.course_id as 课程ID, a.score as 成绩, count(a.course_id) as 排名 from scor ...

  6. Java多线程多个线程wait(),一个notify()唤醒,唤醒的顺序

    package thread; public class ThreadWN implements Runnable { public String name; public String getNam ...

  7. spring cloud 入门系列:总结

    从我第一次接触Spring Cloud到现在已经有3个多月了,当时是在博客园里面注册了账号,并且看到很多文章都在谈论微服务,因此我就去了解了下,最终决定开始学习Spring Cloud.我在一款阅读A ...

  8. 【LeetCode算法题库】Day5:Roman to Integer & Longest Common Prefix & 3Sum

    [Q13] Roman numerals are represented by seven different symbols: I, V, X, L, C, D and M. Symbol Valu ...

  9. Linux系统中时间区域和API

    1.问题 在开发云平台程序的时候,经常会碰到时间区域转换的问题.比如,任何网络存储的文档的metadata都自己记录了编辑时间.但是,云平台记录时需要把这个时间转成标准时间,便于管理.但是用户使用的时 ...

  10. Ubuntu16.04安装搜狗拼音输入法

    为了让自己的电脑相对安全一些,我安装了ubuntu的物理机 因为要经常输入汉字,我就在unbuntu里面安装了搜狗输入法 1.在搜狗输入法官网下载Linux版本的安装包:https://pinyin. ...