一、小程序组件系统
1-1.小程序结构
小程序结构分为逻辑层和视图层，视图层中的每个页面由组件组合而成 。
小程序框架的目的就是为开发者提供了一系列基础组件及功能复杂的组件（地图、视频、直播等）供开发者使用，便于开发者快速搭建出任何页面 。同时也提供了自定义组件的能力，开发者可以自行扩展更多的组件，以实现代码复用 。
1-2.组件介绍 组件化：
一句话形容就是：“高内聚，低耦合”，对内各个元素彼此相互依赖，对外和其他组件的接口简单 。最初的目的是代码重用，功能相对单一或者独立 。在整个系统的代码层次上位于最底层，被其他代码所依赖，所以说组件化是纵向分层 。
小程序组件实现：
【Web Components小程序组件实现原理】小程序的视图是在里渲染的，搭建视图的方式就是常用的HTML语言 。但是如果直接提供HTML的能力，会存在一些不足之处：
不利于快速开发
小程序组件标准：
目前支付宝、字节、百度都会对齐微信小程序能力，减少开发者负担
1-3. 组件分类
小程序是结合了web和能力的技术方案，在小程序组件层面既有纯web组件，也有基于端能力的组件 。小程序中大部分组件直接渲染在上，系统自带的原生组件位于更高的层级 。
小程序提供的内置组件分为web组件和组件两大类：
二、 WEB组件
web 很适合小程序组件的开发， 可以自定义组件， DOM 作用域内部的元素始终不会影响到它外部的元素，这为封装提供了便利
2-1. 原生组件Web
谷歌公司一直在推动浏览器的原生组件，即 WebAPI 。相比第三方框架，原生组件简单直接，符合直觉，不用加载任何外部模块，代码量小 。目前，它还在不断发展，但已经可用于生产环境 。
Web由三项主要技术组成，它们可以一起使用来创建封装功能的定制元素，可以在任何地方重用，不必担心代码冲突 。
2-2. web 实现自定义组件
1）通过web 可以快捷创建自定义组件与使用
以上就可以直接使用一个自定义的元素，demo如下：

2）class内部代码实现：
class PopUpInfo extends HTMLElement {constructor() {// 必须首先调用 super 方法super();// 创建一个 shadow dom// mode: open表示可以js方法来获取Shadow DOM，close获取到nullvar shadow = this.attachShadow({mode: 'open'});// 创建一个盒子var wrapper = document.createElement('div');wrapper.setAttribute('class','wrapper');// 创建一个icon标签，存放图片链接var icon = document.createElement('div');icon.setAttribute('class','icon');// 获取自定义标签上img属性的内容，插入到src;var imgUrl = this.getAttribute('img');var img = document.createElement('img');img.src = http://www.kingceram.com/post/imgUrl;icon.appendChild(img);// 创建一个info标签，存放text文本var info = document.createElement('div');info.setAttribute('class','info');// 获取自定义标签上text属性的内容，并添加到一个 span 标签内var text = this.getAttribute('text');info.textContent = text;// 创建一些 CSS，并应用到 shadow dom 上var style = document.createElement('style');// 简洁起见，省略了具体的 CSSstyle.textContent = `.wrapper{***}` // 将创建的元素附加到 shadow domshadow.appendChild(style);shadow.appendChild(wrapper);wrapper.appendChild(icon);wrapper.appendChild(info);}}
3）最后，使用()方法将注册到y上，在方法的参数里，我们指定了元素的名称，以及定义了元素功能的类 。
customElements.define('popup-info', PopUpInfo);