致企业家的一封信

微信小程序底层框架实现原理以及自定义组件详解

发布时间:2019-03-04  浏览次数:

  小程序就是基于当前的WEB规范实现的一种程序,运行在微信里面,既然是基于WEB规范,那自然离不开HTML,CSS和JS,虽然微信官方给出了不一样的名称:WXML,WXSS,但本质上还是在整个WEB体系之下构建的。


fd (1).png


  WXMLvsHTML,大家想到了什么?XML有没有,HTML和WXML都是XML的一套子集,只是HTML有完整和通用的文档类型定义(DTD),WXML相对简单,仅仅是微信自定义的少量标签

  WXSSvsCSS,大家可以理解为就是CSS,只是自动做了缩减和兼容处理,比如长度单位使用rpx,支持import导入,实现逻辑部分的JS还是通用的ES规范,并没有什么不同,并且runtime还是Webview(IOSWKWEBVIEW,ANDROIDX5)

  微信小程序自定义组件详解

  自定义组件能够帮我们更好的复用代码和重构简化代码复杂度。一起来学习一下小程序自定义组件的内容吧。

  从小程序基础库版本1.6.3开始,小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本1.6.3或更高。

  开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似。


fd (2).png


  组件样式编写注意事项

  1、组件和引用组件的页面不能使用id选择器(#a)、属性选择器([a])和标签名选择器,请改用class选择器。

  2、组件和引用组件的页面中使用后代选择器(.a.b)在一些极端情况下会有非预期的表现,如遇,请避免使用。

  3、子元素选择器(.a>.b)只能用于view组件与其子节点之间,用于其他组件可能导致非预期的情况。

  4、继承样式,如font、color,会从组件外继承到组件内。

  5、除继承样式外,app.wxss中的样式、组件所在页面的的样式对自定义组件无效。

  


加载中