小程序自定义的组件:

(1)组件的结构

  自定义的组件和普通的页面定义没有什么区别,也包含了四个文件:xxx.wxml(组件的视图层),xxx.json,xxx.js,xxx.wxss

  组件的xxx.wxml页面: 

<view class="wrapper">
<view>这里是组件的内部节点</view>
<slot></slot>
</view>

  <slot>标签的用处是:当一个页面引用给组件的时候,使用方法为:<组件名>内容</组件名>(组件名是在页面的json文件中定义的),内容就是显示在<slot>标签里面,通常一个组件只能使用一个<slot>标签,但是也可以使用多个,不过要配置,下面会讲。

(2)组件的Component构造器

  Component构造器可用于定义组件,调用Component构造器可以指定组件的属性,数据,方法等。

  可查看:Component构造器中的各种定义的含义:https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html

      Component构造器的列子:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html

(3)组件的solt支持

(4)组件的生命周期

  

1.当组件从调用它的页面中获取值的时候,应该将保存改值的属性放在属性列表中,而不是data列表中,

微信小程序之组件常见的问题的更多相关文章

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

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

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

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

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

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

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

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

  5. 微信小程序弹窗组件

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

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

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

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

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

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

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

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

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

随机推荐

  1. Word 写论文的一些教训和经验

    参考文献 写正文时就在引用位置添加参考文献的title,写完后,在百度学术或谷歌学术中搜索参考文献获取GB/T 7714的参考格式,在参考文献的章节为文献编号,在引用位置插入交叉引用. 插图 可以先在 ...

  2. vue+ui

    一.elementui import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.u ...

  3. Django(三) 模型:ORM框架、定义模型类并创建一个对应的数据库、配置Mysql数据库

    一.模型概述 https://docs.djangoproject.com/zh-hans/3.0/intro/tutorial02/ https://www.runoob.com/django/dj ...

  4. linux下安装mysql5.7(centos6.0)

    注:因为网络原因,这个mysql安装是我以前在学校的时候找到的一个安装包,不过也找到了下载的地址:http://www.itmop.com/downinfo/143061.html下载完成后,把文件上 ...

  5. 留学生如何把控好Essay写作结构

    留学生在国内写过作文,但是对于essay写作到底了解多少呢?大家觉得essay写作太难是语言问题,但是大家要明白,老师对于内容的考察远重于对语言的考察.同学们的essay写作如果能做到言之有理,自圆其 ...

  6. opencv目录(转)

    github:https://github.com/opencv/opencv OpenCV 3 的源代码文件夹: 3rdparty/: 包含第三方库,如用视频解码用的 ffmpeg.jpg.png. ...

  7. Python MongoDB 创建集合

    章节 Python MySQL 入门 Python MySQL 创建数据库 Python MySQL 创建表 Python MySQL 插入表 Python MySQL Select Python M ...

  8. NumPy 基于已有数据创建数组

    原文:Python Numpy 教程 章节 Numpy 介绍 Numpy 安装 NumPy ndarray NumPy 数据类型 NumPy 数组创建 NumPy 基于已有数据创建数组 NumPy 基 ...

  9. 【剑指Offer】面试题03. 数组中重复的数字

    题目 找出数组中重复的数字. 在一个长度为 n 的数组 nums 里的所有数字都在 0-n-1 的范围内.数组中某些数字是重复的,但不知道有几个数字重复了,也不知道每个数字重复了几次.请找出数组中任意 ...

  10. ansible简单部署前端

    pipeline{ agent any parameters { choice(name: 'server_name', choices: ['xx','xx'], description: 'ser ...