博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信小程序开发之路之组件化
阅读量:6225 次
发布时间:2019-06-21

本文共 1431 字,大约阅读时间需要 4 分钟。

 类似于页面,自定义组件拥有自己的 wxml 模版和 wxss 样式。

组件化,反过来理解,写重复的页面,方法,写第二遍就烦了,抽取出来就是组件化,可以理解为公用的方法

对于通用的数据,最先想到或者理应接触的是template,但是template有个缺点,那就是只是页面效果,不会有对应的js操作。

微信小程序组件化,为什么要有自定义组件呢

每个页面有对应的js(JavaScript),json(配置config),wxml(html),wxss(css)还差什么
不挺好的嘛,为什么需要自定义组件呢
当然,对于特定的某个页面而言,是足够了,但是如果是通用的一些页面都需要相同的效果,
或者是相似的效果呢,你还是一步步重复的操作嘛
存在就是合理的,完全可以把自定义组件理解为是一个自定义的标签,页面的一个片段。

 

当然这只是最基本的

想想,既然是组件component,那对于pages页面而言,就是一对多的关系。
多个页面织入组件,怎么衔接起来呢。
pages页面可以给component组件传递值,自然组件也会对应的想pages自定义的回调方法。
只要是你能想到,想实现的,都会有对应的提供。

实现方式,在目录新建component,会自动生成对应的js,json,wxml,wxss,基本跟pages差不多

看看component各个文件内容吧

Component({
  
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
/**   * 组件的属性列表   */  properties: {  },  /**   * 组件的初始数据   */  data: {  },  /**   * 组件的方法列表   */  methods: {     }})

options,multipleslots:true 在组建中启用多个slot支持。

properties,里面可以定义一些接收pages页面的属性。

data,组件的数据

method,组件抽取出来的方法

具体用法

首先需要在pages页的json配置一下开启使用组件

说说options吧

你可以在component的wxml中

通过slot的name属性来指定对应的pages页面内容

 ok

说说properties吧

在自定义标签中传递一个num属性

在组件中可以通过properties来传递

获取num值可以通过this.properties.num来获取

data用法的话跟page是一个样子的。

最重要的要属于方法事件了

page相对于组件而言,是一个一对多的过程

既然是抽取出来的,组件只能做一些共有的事,私自的一些实现肯定是得通过page自省的。

这就涉及到了回调。比如在组件中添加一个bindtap方法。

但是这个组件页面的customevent的方法是绑定的。

对应的pages页

 

在methods中,通过treggerEvent来调用page自己实现的方法。

ok,这是组件化入门

我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=3k8xfjgejtk4w

转载于:https://www.cnblogs.com/chywx/p/9552797.html

你可能感兴趣的文章
解决Qt Creator编译输出窗口乱码的问题
查看>>
C#获取当前时区转换方法
查看>>
卡片式电脑介绍
查看>>
HTML中Select的使用具体解释
查看>>
经济学发展简史
查看>>
knh
查看>>
PMP考试的过与只是
查看>>
[家里蹲大学数学杂志]第248期东北师范大学2013年数学分析考研试题
查看>>
JAVA数组的定义及用法
查看>>
(转)winform安装项目、安装包的制作、部署
查看>>
C# WinForm 拖动无边框窗体 改变无边框窗体尺寸
查看>>
C++赋值函数详解
查看>>
删除vector中的偶数元素,删除list中的奇数元素
查看>>
循环-11. 水仙花数(20)
查看>>
奇偶校验算法
查看>>
boost:库program_options--第一篇
查看>>
分享最新的博客到LinkedIn Timeline
查看>>
MySQL主从架构之Master-Master互为主备
查看>>
discuz mysqli_connect() 不支持 advice_mysqli_connect
查看>>
KMP算法详解 --- 彻头彻尾理解KMP算法
查看>>