跨端开发框架avm组件如何封装

本文小编为大家详细介绍“跨端开发框架avm组件如何封装”，内容详细，步骤清晰，细节处理妥当，希望这篇“跨端开发框架avm组件如何封装”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

引言

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.png" />          <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'                     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'                     src="../../image/voice-call.png"></image>            </view>        </view>        <view class="agorartc-call-voice_connected" v-if="connected">            <image class="agorartc-call-voice_voice" thumbnail='false'                 src="../../image/video-voice.gif"></image>            <image class="agorartc-call-voice_hangup" @click="fnhangup()" thumbnail='false'                 src="../../image/video-hangup.png"></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组件如何封装”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网精选频道。