封装 avm 组件经验分享

发布时间:2023-05-20 14:30

avm.js 是一个跨端开发框架,AVM(Application-View-Model)前端组件化开发模式基于标准Web Components组件化思想,提供包含虚拟DOM和Runtime的编程框架avm.js以及多端统一编译工具,完全兼容Web Components标准,同时兼容Vue和React语法糖编写代码,编译工具将Vue和React相关语法糖编译转换为avm.js代码。

有Vue和React 开发经验的很容易上手。

1. 组件的定义和引用:

     1.1 使用stml定义一个组件 / 页面

stml组件兼容Vue单文件组件(SFC)规范,使用语义化的Html模板及对象化js风格定义组件或页面。stml最终被编译为JS组件 / 页面,渲染到不同终端。

定义组件:

// api-test.stml:
  

  1.2 组件引用:

// app-index.stml:


  

2. 向子组件传值

向子组件传值采用 props 的方式,这里以一个示例来进行说明。

定义子组件,在 props 里面注册一个 title 属性:

// api-test.stml:


这里定义的title属性类型为String,属性类型包括 String、Number、Boolean、Array、Object、Function等。

     2.1 在其它页面使用子组件时传递静态值:

// app-index.stml:


     2.2 通过数据绑定传递动态值:

// app-index.stml:


传递静态值时只能传递字符串类型数据,通过数据绑定的方式则可以传递任意类型的数据。

3. 监听子组件事件**

监听子组件事件和监听普通事件类似,如:

// api-index.stml:


以上示例中监听了子组件的result事件,子组件里面通过fire方法来触发监听的事件:

// app-test.stml:


fire方法有两个参数,第一个参数为事件名称,第二个参数为要传递的自定义数据,在父组件监听方法里面通过e.detail获取传递的数据。

// api-index.stml:

methods: {
  onGetResult(e){
      console.log(e.detail.msg);
  }
}

4.  声网组件实例

了解了以上组件的规则和用法,就可以封装自己的组件了 。下面看一个基于agoraRtc声网模块,实现1对1语音通话的组件实例:




avm.js 默认使用 flex 弹性盒子布局,实现UI时,应充分利用 flex 弹性布局原理进行布局。而实现声网语音通话的核心逻辑很简单:两个用户加入同一个频道即可 。

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号