微信小程序开发之路之组件化

类似于页面,自定义组件拥有自己的 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,里面可以定义一些接收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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏君赏技术博客

怎么让APP`iTunes Connect`名字和在设备上显示的名字是一致的

在iTunes Connect和设备上显示的名字是一致的,因为避免混淆。对于WatchKit的app,对于WatchKit应用程序,这意味着在iTunes Co...

30230
来自专栏陈纪庚

css加载会造成阻塞吗?

终于考试完了,今天突然想起来前阵子找实习的时候,今日头条面试官问我,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?所以,接下来...

16410
来自专栏Jerry的SAP技术分享

微信小程序开发系列七:微信小程序的页面跳转

这个系列教程的前六篇文章我们都在单个的视图上操作。现在让我们创建第二个视图,然后实现从第一个视图到第二个视图的跳转。

24820
来自专栏梦里茶室

vim note

2016-1-22 vim plugin collections: (参考 https://www.youtube.com/watch?v=0QFR-_wUoA...

23270
来自专栏我和未来有约会

在创建的Silverlight Control中使用图片

在创建的Silverlight Control中使用图片  在做控件的Template的时,有可能需要用到位图。但是直接把图片放到ControlTempla...

29440
来自专栏JetpropelledSnake

Vue学习笔记之vue-cli脚手架项目中组件的使用

在webpack-simple模板中,包括webpck模板。一个.vue文件就是一个组件。

11530
来自专栏Java后端技术

网站上点击自定义按钮发起QQ聊天的解决方案

  最近由于开发需要,需要在网站上自定义一个立即交谈的按钮,现将解决方式分享给大家。

12630
来自专栏微信小程序开发

小程序开发注意点儿,新手入门基础

1、域名配置,不配置无法访问 小程序开发,要调用API,就必须把域名填写在配置里面,这点儿一定要记住,万一服务端突然上线一次,发现线上服务出问题了,很有可能就...

550110
来自专栏Crossin的编程教室

【编程课堂】以 jQuery 之名 - 爬虫利器 PyQuery

很多读者在学习了 Python 之后都想做一些爬虫程序,去网上采集数据或完成一些自动化操作。因此,我们也制作了一套爬虫实战课程,目前正在最后的完善中,很快将和各...

36870
来自专栏向治洪

webpack+react环境搭建

前言 我们知道前端的框架纷繁复杂,各有各的优点。而我们选择使用React作为开发框架的时候,往往会选择Webpack+Babel+React来开始我们的项目。之...

23470

扫码关注云+社区

领取腾讯云代金券