初始化

  1. npm init stencil  // 初始化stencil, 然后进入下方选择初始化类型
  3. [选择这个]> component   // 选择组件方式
  4. > app [community]          // 构建应用网站模式
  6. // 然后进入文件夹 安装依赖
  7. yarn install
  8. // 运行
  9. yarn start

image.png

目录介绍

  1. - dist // 存放运行编译后的代码,也就是每次修改打包后的文件、
  2. - src  // 工程代码
  3.     - components // 存放组件的目录
  4.     - utils // 公共方法存放地址
  5.     - components.d.ts // 全局组件注入类型文件(自动生成、不用管)
  6.     - index.html  // 也是框架自动会引入组件用作展示的地方
  7.     - index.ts // 
  8. - stencil.config.ts // stencil配置文件、包括打包的规则
  9. - tsconfig.json // ts 配置
  10. - www // 文件夹是在开发过程中启动调试所用到的资源文件、也就是我们yarn start运行的调试页面

介绍组件

执行 yarn generate 默认三个都选上了包括两个测试文件、取消某个按下空格、回车直接快速生成
image.png

  1. import { Component, Host, h, Prop, Event, EventEmitter, State, Watch, Method, Element } from '@stencil/core';
  3. @Component({
  4.   tag: 'my-button',   // 组件名称
  5.   styleUrl: 'my-button.css', // 组件样式
  6.   shadow: false,  // 是否开启沙盒模式
  7. })
  8. export class MyButton {
  9.   /***** 生命周期 start ********* */
  10.   // 初次加载
  11.   connectedCallback(){
  12.     console.log('[lifecycle 1] connectedCallback')
  13.   }
  14.   componentWillLoad() {
  15.     console.log('[lifecycle 2] componentWillLoad')
  16.   }
  17.   componentWillRender() {
  18.     console.log('[lifecycle 3] componentWillRender')
  19.   }
  20.   componentDidRender() {
  21.     console.log('[lifecycle 6] componentDidRender')
  22.   }
  23.   componentDidLoad() {
  24.     console.log('[lifecycle 7] componentDidLoad')
  25.   }
  26.   // 组件重新连接[类似移除后重新插入 connectedCallback() ]
  27.   /*
  28.     const el = document.createElement('my-cmp');
  29.     此时由于 el 是新添加 所以会执行 组件初次加载 的逻辑
  30.     document.body.appendChild(el);
  31.     el.remove();
  32.     // 此时由于 el 已经初始化一遍，再次添加到 body 只会执行 组件重新连接 的逻辑
  33.     document.body.appendChild(el);
  34.   */
  36.   // 组件更新
  37.   componentDidUpdate() {
  38.     console.log('[lifecycle 组件更新] componentDidUpdate')
  39.   }
  40.   // 组件销毁
  41.   disconnectedCallback(){
  42.     console.log('[lifecycle] 组件销毁被执行')
  43.   }
  45.   /***** 生命周期 end *********** */
  47.   /***** 获取整个组件元素 start ********* */
  48.   @Element() el: HTMLElement;
  49.   /***** 获取整个组件元素 end ********* */
  52.   /***** 定义内部响应式 start ********* */
  53.   @State() num: number = 0;
  54.   handleNum() { this.num += 1}
  55.   /***** 定义内部响应式 end *********** */
  59.   /***** 监听内部num变化 start ********* */
  60.   @Watch('num')
  61.   watchPropHandler(newValue: number, oldValue: number) {
  62.     console.log('num变化了', newValue, oldValue);
  63.   }
  64.   /***** 监听内部num变化 end*** ********* */
  69.   /***** props定义接受一个text start ********* */
  70.   @Prop() text: string  
  71.   /***** props定义接受一个text end ********* */
  75.   /***** 定义组件元素派发的事件 start ********* */
  76.   @Event({
  77.     eventName: 'on-click',  // 事件名称
  78.     bubbles: true, // 是否支持冒泡
  79.     cancelable: true, // 是否支持可取消
  80.     composed: true, // 冒泡事件是否逃逸出当前的 shadowdom
  81.   })
  82.   displayOnClick: EventEmitter<{ data: { mes: string, el: HTMLElement } }>
  83.   handClick(): void {
  84.     this.displayOnClick.emit({
  85.         data: {
  86.           mes: '派发出来的消息',
  87.           el: this.el
  88.         }
  89.     })
  90.   }
  91.   /***** 定义组件元素派发的事件 end ********* */
  96.   /***** 定义外部通过节点调用内部的方法 start ********* */
  97.   @Method()
  98.   async showPrompt() {
  99.     return {
  100.       num: this.num,
  101.       el: this.el
  102.     }
  103.   }
  104.   /***** 定义外部通过节点调用内部的方法 end ********* */
  106.   render() {
  107.     console.log('[lifecycle 4] render')
  108.     return (
  109.       <Host>
  110.         <div>
  111.           <button onClick={ this.handClick.bind(this) }>往外部抛事件</button>
  112.           {/* slot接收 */}
  113.           <slot></slot>
  114.           {/* 作用域插槽 */}
  115.           <slot name='header'></slot>
  116.           {/* 展示props值 */}
  117.           <span>{this.text}</span> 
  118.           <button onClick={ this.handleNum.bind(this)}>num+1</button>
  119.         </div>
  120.       </Host>
  121.     );
  122.   }
  124. }

外部使用测试

  1. <!DOCTYPE html>
  2. <html dir="ltr" lang="en">
  4. <head>
  5.   <meta charset="utf-8" />
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
  7.   <title>Stencil Component Starter</title>
  9.   <script type="module" src="/build/sten-components.esm.js"></script>
  10.   <script nomodule src="/build/sten-components.js"></script>
  11. </head>
  13. <body>
  14.   <my-button text="gf" id="myButton">
  15.     <span style="color: red;">我是默认插槽内容</span>
  16.     <span slot="header" style="color: blue;">我是header插槽内容</span>
  17.   </my-button>
  18. </body>
  20. </html>
  22. <script>
  23.   // 监听方法
  24.   const button = document.getElementById('myButton')
  25.   button.addEventListener('on-click', (e) => {
  26.     console.log(e.detail)
  27.   })
  29.   // 外部调用
  30.   setTimeout(async () => {
  31.     const res = await button.showPrompt();
  32.     console.log(res)
  33.   }, 1000)
  35. </script>

文档地址