微信小程序封装组件怎么使用？

　　小程序开发涉及到很多方面，微信小程序商店已经提供了不少相关，小编今天为大家补充一下微信小程序封装组件的开发和使用问题，一起来看看吧。

　　小程序虽然是hybrid模式，但并不使用HTML渲染，而是全部通过自定义标签来渲染页面。这样做的好处我不清楚，但问题却不少：不能跨浏览器、富文本解析困难，iframe视频不支持，没办法外链跳转。

　　和所有的模板语言一样，WXML支持数据绑定、条件渲染、循环、模块化等功能。

　　数据绑定

　　在 WXML 中可以使用{{}}将 Page 的变量或者表达式包裹起来，实现数据绑定，举个例子：

　　// 将message的值渲染到view中

　　{{ message }}

　　// 将id的值渲染到view的id属*中

　　// 根据isSelected的值，输出不同的class

　　HelloWorld

　　// 结合template，可以传入更复杂的数据

　　条件渲染

　　条件渲染，适合根据数据输出不同状态的 WXML，举个例子：

　　循环渲染

　　小程序多级渲染，适合遍历数据输出多段 WXML，举个例子：

　　// wx:for 表示需要遍历的数据

　　// wx:key 使用唯一的字段来标识，有利于提升*能

　　// wx:for-index 表示数组的下标

　　// wx:for-item 表示数组的元素

　　wx:key="id"

　　wx:for-index="idx"

　　wx:for-item="item">

　　{{idx}}: {{item.message}}

　　wx:key 有利于提升重新渲染时的效率，建议添加

　　模块化

　　WXML的模块化，可以让我们复用一些wxml片段，还挺重要的，举个例子：

　　// 引入wxml模块

　　// 调用wxml模块，同时可传入数据

　　数据和页面的状态是一一对应的，微信小程序中，设计一份好的数据结构，对于Page和页面的代码都有很大的帮助。

　　微信小程序并不支持a标签，那么多个页面之间如何跳转呢?

　　页面间的跳转

　　小程序以栈的形式维护了历史访问的所有页面，并提供了多种页面间的跳转方式;结合前文提到的App()和Page()的各个生命周期，不同的小程序跳转方式和不同的生命周期关联，如下图：

　　Paste_Image.png

　　举个例子，小程序Tab切换对应的生命周期(以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面为例)

　　Paste_Image.png

　　好了，APP和Page负责维护小程序的生命周期和数据，模板负责接受数据完成页面渲染，页面间的跳转负责将多个页面贯穿起来，那么，如何发生交互呢?接下来我们简单说一下事件。

　　交互事件

　　事件绑定

　　// bindtap 和 catchtap的区别在于

　　// bindtap 不会阻止事件冒泡

　　// catchtap会冒泡事件冒泡

　　Click me!

　　Click me!

　　// 绑定的函数tapName只是一个函数名称，默认接受一个event对象作为参数

　　Page({

　　tapName: function(event) {

　　console.log(event)

　　}

　　})

　　接下来，另一个问题是：tapName() 如何接受自定义参数呢?

　　事件传参

　　传递自定义参数主要有两种方式：

　　第一种：将参数绑定到wxml标签上，然后通过event.target.dataset获取

　　第二种：直接使用Page.data或其他数据

　　到目前为止，一个完整的小程序框架已经实现

　　✦ 小程序只有逻辑和视图两部分，而且不提供组件化解决方案

　　✦ 逻辑主要包含四个东西：两个配置文件 && 两个核心函数

　　✦ 视图很简单，模板语法稍微有点不完善

　　✦ 逻辑层的数据绑定到视图层是由小程序框架自动支持，数据变化，视图自动变化

　　✦ 视图层到逻辑层的，主要通过事件的方式来实现

　　✦ 视图之间的跳转，小程序也提供了它自己的方式，并不支持a标签

　　框架有了，小程序还提供了官方组件以便快速开发，提供了API以增强应用能力。

　　微信小程序封装组件的使用对于小程序的开发用处极大，希望大家在操作中都能够学会封装组件的使用方法，如果还有不明白的地方，请持续关注本网站。

　　如何使用微信小程序封装函数?

　   微信小程序请求封装操作步骤详解

　　微信小程序怎样写组件?如何写微信小程序组件?