小程序组件封装介绍（微信小程序组件封装）

今天给各位分享小程序组件封装介绍的知识，其中也会对微信小程序组件封装进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、微信小程序组件化开发
• 2、Taro 3.3 alpha 发布：用 ant-design 开发小程序？
• 3、微信小程序从入门到学会第七天-小程序的自定义组件
• 4、微信小程序封装H5使用web-view源码
• 5、微信小程序-自己封装一个弹窗组件
• 6、微信小程序自定义picker组件

微信小程序组件化开发

微信小程序的组件和Vue的组件非常相似。

在微信小程序中有很多内置组件，比如button view input image等，有时候我们要自定义组件。和Vue的组件似的。

如何创建自定义组件：

新建一个components目录，在里边创建自定义组件

组件的组成：

使用组件：

一个简单的示例：

创建comp，代表页面；创建components/xxxx，代表组件。

创建组件：

使用组件：

注意：json文件中不能写注释啥的。这里的注释是为了解释清楚，在开发中不能写注释。

组件的注意事项：

组件的样式细节：

如何控制页面和组件的样式相互影响：

组件和页面相互通信

this.triggerEvent(事件名，参数对象，{})，最后是options，额外的一些选项

预留一个设备，以有利于对以后进行扩展。

好处：

例子：

在移动端，导航栏，nav-bar，分为左中右三部分。不把这三部分的内容写死。就用插槽，为了封装性更好。

单个插槽的使用很简单：

多个插槽的使用稍微复杂，要设置几个东西：

component构造器中可以写哪些东西，如下

Taro 3.3 alpha 发布：用 ant-design 开发小程序？

小程序的设计并没有完全遵循 Web 规范，导致小程序生态和传统 Web 开发生态之间的割裂，海量优秀的 Web 物料并不能直接用于小程序开发。因而 Taro 在相当一段时间内生态都相对薄弱，UI 框架选择不多的问题更是深深困扰着开发者。

另一方面，业界有着存量的 H5 应用，中短期内 H5 应用适配到小程序端的需要还会存在。我们希望能减少 H5 应用迁移到小程序端的成本，甚至能够直接运行在小程序端。

Taro 团队一直在思考如何最大限度地在小程序环境中复用 Web 生态，直到 Taro 3.0 诞生后，这种想法有了落地的可能。下文将介绍基于 Taro 3.0 实现 H5 同构的思路与问题，以及我们尝试适配了三大移动端 UI 框架 WEUI 、 Ant Design Mobile 、 VantUI 的实验结果。

Taro 3.0 是一款重运行时的跨端框架，它通过模拟实现浏览器的 BOM 和 DOM API 实现了对 React、Vue 等 Web 开发框架的兼容。

既然已经有了浏览器环境的 BOM 和 DOM API，Taro 应用和 Web 应用之间的鸿沟在于小程序组件和 HTML 标签之间的差异。

Taro3 的渲染数据流如下：

前端框架 - Taro DOM - 小程序 data

HTML 标签和小程序组件的标签名、属性、事件是有差异的，而前端框架无需感知这些差异。

因此前端框架适配层、Taro DOM 层不需要改动，只要在 Taro DOM 序列化为小程序 data 这一步作映射即可。

HTML 标签相对小程序组件封装程度更低、功能更简单，可以看作是小程序组件的子集。因此可以按一定的规则，把 HTML 标签映射为小程序组件，如：

完整的标签名映射规则请看： RFC 附录一

如果 HTML 标签的属性能在对应小程序组件的属性上找到对应，则进行映射，如：

完整的属性名映射规则请看： RFC 附录二

把 HTML 特有的事件在小程序端找到相似的事件进行映射，如：

完整的事件映射规则请看： RFC 附录三

前文介绍了我们会把 HTML 标签映射为小程序组件，但是 H5 应用中使用到的 CSS 标签选择器就会失效。

因此 Taro 使用了类名去进行模拟：

Taro 提供两种内置的浏览器默认样式，可以直接引入生效：

理想很美好，但现实却略显骨感。即使 Taro 能实现 BOM、DOM API，支持使用 HTML 标签等，同构方案还是存在着一些框架层面抹平不了的差异。以下列举出若干主要限制：

在 H5 中我们可以调用 DOM API 同步获取元素的尺寸：

但是在小程序中，获取元素尺寸的 API 是异步的：

因此不能兼容那些使用了同步 DOM API 去获取元素尺寸的组件。

canvas 、 video 、 audio 等标签在 H5 端可以直接调用 HTMLElement 上的方法：

但是在 Taro 中，要调用组件上的原生方法，必须先创建对应的 Context ：

部分样式或 CSS 选择器在小程序中不支持，如：

首先需要安装 v3.3 的 CLI 工具：

然后进入项目，把 package.json 文件中 taro 相关依赖的版本修改为 ^3.3.0-alpha.2 ，再重新安装依赖（建议先把 node_modules 文件夹删除）。

为了节省项目空间，同构功能是可选的，以 Taro 插件的形式提供。

首先开发者需要安装插件 @tarojs/plugin-html ：

然后配置使用此插件：

为了验证同构功能的可用性和效果，我们对 CSS 样式库 WEUI 、React 组件库 Antd Design Mobile 、Vue2 组件库 VantUI 的所有组件进行了测试。

测试效果比较理想，甚至稍微超出我们的预期，配合各组件库自身的按需加载能力，能以小巧的体积使用丰富的组件，相信各位开发者会喜欢这个功能。

仓库地址： taro-weui

WEUI 是一个 CSS 的样式库，与框架无关，兼容性比较高，大部分组件能直接使用。

仓库地址： taro-antd-mobile

能直接兼容使用的组件大概为 80%，主要问题在于：

仓库地址： taro-vant

VantUI 的组件十分丰富，能直接兼容使用的组件大概为 70%。部分开发者会在 Taro 中配合使用 Vant Weapp，但 Vant Weapp 只能运行在微信小程序，因此对 VantUI 的直接适配是一个很好的补充。

适配过程主要遇到的问题有：

同构方案还在持续优化中，部分实现还没有最终定稿。欢迎各位开发者到我们的论坛下留言，提出您的宝贵意见～： 同构方案 RFC 。

欢迎关注凹凸实验室

微信小程序从入门到学会第七天-小程序的自定义组件

当我们多次使用同一个组件的时候，我们可以将其进行封装然后进行使用，这个时候，自定义组件就起到了很好的作用，前面虽然我们讲到了自定义组件，不过那都是皮毛，仅仅只是讲到了自定义组件的创建和使用罢了，下面我们来深入剖析自定义组件。首先看下目录：

匿名插槽

具名插槽

外部样式

多样化的组件通信

1.双向绑定

2.父子组件互相传

组件共享

组件关系

生成的组件实例可以在组件的方法、生命周期函数和属性 observer 中通过 this访问。组件还有一些通用属性和方法，如下：

注：以上内容来源于微信开放文档 二、自定义组件的参数

生成的组件实例可以在组件的方法、生命周期函数和属性 observer 中通过 this访问。组件还有一些通用属性和方法，如下：

注：以上内容来源于微信开放文档 二、自定义组件的参数

生成的组件实例可以在组件的方法、生命周期函数和属性 observer 中通过 this访问。组件还有一些通用属性和方法，如下：

注：以上内容来源于微信开放文档 二、自定义组件的参数

生成的组件实例可以在组件的方法、生命周期函数和属性 observer 中通过 this访问。组件还有一些通用属性和方法，如下：

微信小程序封装H5使用web-view源码

微信小程序封装H5域名

使用微信小程序web-view组件进行封装H5网页，最快的速度完成展示型小程序。 注：web-view组件不支持个人小程序，只能认证过的企业小程序。

···

微信小程序-自己封装一个弹窗组件

微信小程序官方提供的弹窗真的是太不友好了！！提示的内容还最好不能超过三行，于是，参考着样式，自己动手撸一个！

微信小程序官方API

(干货)微信小程序组件封装

微信小程序自定义picker组件

封装hf-picker选择器。因为自带的picker在iOS 、安卓上显示的样式不一致，产品测试提出个能不能样式弄成一致。想系统提供了picker-view这个，应该是没问题的。 

一番操作以后，发现在层级不复杂的页面效果很不错，但是在一些view嵌套view嵌套的很深，比如里面已经有非statics的父view时，那么这个选择器的弹窗显示的位置就不对了。同事说这个通过view肯定是实现不了，毕竟父view范围就那么大，除非把选择器view放到page里面去 ,是可以实现，但是违背了封装组件的原则。同事说试试half-screen-dialog，结果发现提供的Slot效果达不到UI要求.

如今有方法对half-screen-dialog的内部元素样式进行设置了，赶紧搞起。 最终结果还是挺好的。因为是dialgo弹出，所以不用考虑父view的范围问题了。 

关于小程序组件封装介绍和微信小程序组件封装的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。