跨端开发框架avm组件封装经验分享

跨端开发框架avm组件封装经验分享

目录

引言

1. 组件的定义和引用:

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

1.2 组件引用:

2. 向子组件传值

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

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

3. 监听子组件事件**

4.  声网组件实例

引言

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: <template> <view class='header'> <text>{this.data.title}</text> </view> </template> <script> export default { name: 'api-test', data(){ return { title: 'Hello APP' } } } </script> <style scoped> .header{ height: 45px; } </style> 1.2 组件引用: // app-index.stml: <template> <view class="app"> <img src="./assets/logo.webp" /> <api-test></api-test> </view> </template> <script> import './components/api-test.stml' export default { name: 'app-index', data: function () { return { title: 'Hello APP' } } } </script> <style> .app { text-align: center; margin-top: 60px; } </style> 2. 向子组件传值

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

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

// api-test.stml: <template> <text>{title}</text> </template> <script> export default { name:'api-test', props:{ title: String } } </script>

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

2.1 在其它页面使用子组件时传递静态值: // app-index.stml: <template> <view> <api-test title="Hello App!"></api-test> </view> </template> <script> import './components/api-test.stml' export default { name: 'app-index' } </script> 2.2 通过数据绑定传递动态值: // app-index.stml: <template> <view> <api-test v-bind:title="msg"></api-test> </view> </template> <script> import './components/api-test.stml' export default { name: 'app-index', data() { return { msg: 'Hello App!' } } } </script>

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

3. 监听子组件事件**

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

// api-index.stml: <template> <view> <api-test onresult="onGetResult"></api-test> </view> </template> <script> import './components/api-test.stml' export default { name: 'app-index', methods: { onGetResult(e){ console.log(e.detail.msg); } } } </script>

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

// app-test.stml: <template> <text onclick="onclick">Hello App!</text> </template> <script> export default { name:'api-test', methods:{ onclick(){ let detail = {msg:'Hi'}; this.fire('result', detail); } } } </script>

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

// api-index.stml: methods: { onGetResult(e){ console.log(e.detail.msg); } } 4.  声网组件实例

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

<template> <view class="agorartc-call-voice_page"> <safe-area></safe-area> <view class="agorartc-call-voice_list" v-for="(item,index) in userList"> <view class="agorartc-call-voice_userinfo"> <image class="agorartc-call-voice_userinfo-image" thumbnail='false' style="width: 64px; height: 64px; margin-right:10px" src={{item.userimg }}></image> <text class="agorartc-call-voice_userinfo-text">{{item.username }}</text> </view> <view class="agorartc-call-voice_callimg"> <image @click="fnstart_voice_call(item.userid)" thumbnail='false' style="width: 50px; height: 50px" src="../../image/voice-call.webp"></image> </view> </view> <view class="agorartc-call-voice_connected" v-if="connected"> <image class="agorartc-call-voice_voice" thumbnail='false' style="width: 200px;" src="../../image/video-voice.webp"></image> <image class="agorartc-call-voice_hangup" @click="fnhangup()" thumbnail='false' style="width: 64px; height: 64px;" src="../../image/video-hangup.webp"></image> </view> </view> </template> <script> export default { name: 'agorartc-call-voice', props: { channel: String, userList: Array, rtcAppId: String }, installed() { this.fnishasper_mic(); }, data() { return { connected: false }; }, methods: { fnishasper_mic(_userid) { var resultList = api.hasPermission({ list: ["microphone"] }); if (resultList[0].granted) { } else { api.toast({ msg: "需要启用麦克风权限" }); api.requestPermission({ list: ["microphone"] }, res => { if (res.list[0].granted) { } }); } }, fnstart_voice_call(_userid) { this.fnrtc_init(); this.fnerr_listener(); this.fnjoin_channel(_userid); }, fnrtc_init() { console.log('初始化'); var agoraRtc = api.require('agoraRtc'); agoraRtc.init({ appId: this.props.rtcAppId }); }, fnjoin_channel(_userid) { console.log('121:---' + _userid); this.data.connected = true; var agoraRtc = api.require('agoraRtc'); agoraRtc.joinChannelSuccessListener(function (ret) { console.log(ret.uid + 'uid------'); }); agoraRtc.remoteUserJoinedListener((ret) => { console.log(ret.uid + 'remoteUserJoinedListener------'); if (ret.uid) { this.data.connected = true; } }); // 多人语音通话 ,需设置角色为主播 agoraRtc.setClientRole({ role: 1 }, function (ret) { if (ret.code == 0) { //success console.log('设置主播模式成功') } }); agoraRtc.enableAudio((ret) => { if (ret.code == 0) { //success console.log('开启音频成功---' + this.props.channel); agoraRtc.joinChannel({ channel: this.props.channel, uid: _userid }, function (ret) { if (ret.code == 0) { console.log('加入频道成功'); } }); } }); agoraRtc.remoteUserOfflineListener((ret) => { api.toast({ msg: '对方已挂断' }) this.fnhangup(); }); }, fnerr_listener() { var agoraRtc = api.require('agoraRtc'); agoraRtc.errorListener(function (ret) { if (ret.errorCode == 0) { var agoraRtc = api.require('agoraRtc'); agoraRtc.leaveChannel(function (ret) { if (ret.code == 0) { //success } }); api.toast({ msg: '通话出错!' }); } }); }, fnhangup() { var agoraRtc = api.require('agoraRtc'); agoraRtc.leaveChannel(function (ret) { if (ret.code == 0) { //success } }); this.data.connected = false; } } }; </script> <style> .agorartc-call-voice_page { height: 100%; width: 100%; background-color: #fff; } .agorartc-call-voice_list { height: 64px; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; margin-bottom: 10px; } .agorartc-call-voice_userinfo { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; padding-left: 20px; } .agorartc-call-voice_callimg { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center; flex-grow: 2; padding-right: 20px; } .agorartc-call-voice_connected { position: absolute; top: 0; left: 0; background-color: #fff; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-around; align-items: center; } .agorartc-call-voice_hangup { margin-top: 30px; } </style>

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

以上就是跨端开发框架avm组件封装经验分享的详细内容,更多关于跨端开发框架avm组件封装的资料请关注易知道(ezd.cc)其它相关文章!

推荐阅读

    虾类安装经验分享!

    虾类安装经验分享!,,虾类安装经验分享: 1,机箱的电源光盘应该接近代理价格,而内存和硬盘的价格是在互联网上找到的即时价格。主板套件,视频卡

    16天的最新的内存引用:4gb上涨10元

    16天的最新的内存引用:4gb上涨10元,,内存价格上涨到4GB 10元 在今天中关村的现货市场,内存价格总体呈发展趋势,但它是小的。内存市场昨日下

    wps如何生成引用

    wps如何生成引用,WPS教程,1.wps怎么添加引用文献wps添加引用文献:1、打开文档,点击WPS文字右侧下拉菜单。2、打开插入>引用>脚注与尾注3、选

    设计电脑系统封装|电脑系统封装教程

    设计电脑系统封装|电脑系统封装教程,,电脑系统封装教程不是的,只是虚拟机比较方便。物理机也可以的,只是要通过外界启动来ghost系统。 办法

    怎么设置锁屏|怎么设置锁屏小组件

    怎么设置锁屏|怎么设置锁屏小组件,,怎么设置锁屏小组件处理方法:1、打开top widgets,在中号小组件里找到 “快捷启动”2、快捷启动可以自定

    电脑组件详解|电脑内部组件

    电脑组件详解|电脑内部组件,,电脑内部组件主版。主版(Main Borad)又称母版(Mother Board)或系统版(System Board),是计算机各组件的载体,整