avm.js is a cross-end development framework. The AVM (Application-View-Model) front-end componentized development model is based on the standard Web Components componentization idea. It provides a programming framework avm.js including virtual DOM and Runtime and a multi-end unified compilation tool. Compatible with the Web Components standard, and compatible with Vue and React syntactic sugar to write code, the compilation tool compiles and converts Vue and React related syntactic sugar into avm.js code.
It is easy to get started with Vue and React development experience.
1. Definition and reference of components:
1.1 Define a component/page using stml
The stml component is compatible with the Vue Single File Component (SFC) specification, and uses semantic Html templates and object js style to define components or pages. The stml is finally compiled into JS components/pages and rendered to different terminals.
Define components:
// 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 Component reference:
// 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. Pass values to child components
Passing values to child components uses props. Here is an example to illustrate.
Define a child component and register a title property in props:
// api-test.stml:
<template>
<text>{title}</text>
</template>
<script>
export default {
name:'api-test',
props:{
title: String
}
}
</script>
The title attribute type defined here is String, and the attribute types include String, Number, Boolean, Array, Object, Function, etc.
2.1 Pass static values when using child components on other pages:
// 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 Passing dynamic values through data binding:
// 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>
When passing static values, only string type data can be passed, and data of any type can be passed through data binding.
3. Listen for child component events **
Listening to child component events is similar to listening to normal events, such as:
// 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>
In the above example, the result event of the subcomponent is monitored, and the monitored event is triggered by the fire method in the subcomponent:
// 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>
The fire method has two parameters. The first parameter is the event name, and the second parameter is the custom data to be passed. The passed data is obtained through e.detail in the parent component listening method.
// api-index.stml:
methods: {
onGetResult(e){
console.log(e.detail.msg);
}
}
4. Instances of sound network components
After understanding the rules and usage of the above components, you can encapsulate your own components. Let's take a look at an example of a component that implements 1-to-1 voice calls based on the agoraRtc sound network module:
<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.png"></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.gif"></image>
<image class="agorartc-call-voice_hangup" @click="fnhangup()" thumbnail='false'
style="width: 64px; height: 64px;" 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 uses flex elastic box layout by default. When implementing UI, it should make full use of flex elastic layout principle for layout. And the core logic of realizing voice network voice call is very simple: two users can join the same channel.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。