99精品视频一区在线播放,亚洲一区二区三区中文字幕在线

AVM.js(-View-Model)是一個(gè)移動(dòng)優(yōu)先的高性能跨端框架，支持一次編寫多端渲染。它提供更趨近于原生的編程體驗(yàn)，通過簡潔的模型來分離應(yīng)用的用戶界面、業(yè)務(wù)邏輯和數(shù)據(jù)模型，適合高度定制的應(yīng)用開發(fā) 。
AVM前端組件化開發(fā)模式基于標(biāo)準(zhǔn)Web 組件化思想vue組件之間傳值，提供包含虛擬DOM和的編程框架AVM.js以及多端統(tǒng)一編譯工具，完全兼容Web 標(biāo)準(zhǔn) ，同時(shí)兼容Vue和React語法糖編寫代碼，編譯工具將Vue和React相關(guān)語法糖編譯轉(zhuǎn)換為AVM.js代碼。
有Vue和React開發(fā)經(jīng)驗(yàn)的開發(fā)者很容易上手。
1. 組件的定義和引用
(1) 使用STML定義一個(gè)組件/頁面
STML組件兼容Vue單文件組件(SFC)規(guī)范，使用語義化的HTML模板及對象化JS風(fēng)格定義組件或頁面。STML最終被編譯為JS組件/頁面，渲染到不同終端。
定義組件：
【以聲網(wǎng)組件為例如何封裝AVM組件？】// api-test.stml:{this.data.title}export default {name: 'api-test',data(){return {title: 'Hello APP'}}}.header{height: 45px;}
(2) 組件引用
// app-index.stml:import './components/api-test.stml'export default {name: 'app-index',data: function () {return {title: 'Hello APP'}}}.app {text-align: center;margin-top: 60px;}
2. 向子組件傳值
向子組件傳值采用props的方式，這里以一個(gè)示例來進(jìn)行說明。
定義子組件，在props里面注冊一個(gè)title屬性：
// api-test.stml:{title}export default {name:'api-test',props:{title: String}}
這里定義的title屬性類型為vue組件之間傳值，屬性類型包括、、、Array、、等。
(1) 在其它頁面使用子組件時(shí)傳遞靜態(tài)值：
// app-index.stml:import './components/api-test.stml'export default {name: 'app-index'}
(2) 通過數(shù)據(jù)綁定傳遞動(dòng)態(tài)值：
// app-index.stml:import './components/api-test.stml'export default {name: 'app-index',data() {return {msg: 'Hello App!'}}}
傳遞靜態(tài)值時(shí)只能傳遞字符串類型數(shù)據(jù) ，通過數(shù)據(jù)綁定的方式則可以傳遞任意類型的數(shù)據(jù) 。
3. 監(jiān)聽子組件事件
監(jiān)聽子組件事件和監(jiān)聽普通事件類似，如：
// api-index.stml:import './components/api-test.stml'export default {name: 'app-index',methods: {onGetResult(e){console.log(e.detail.msg);}}}
以上示例中監(jiān)聽了子組件的事件，子組件里面通過fire方法來觸發(fā)監(jiān)聽的事件：
// app-test.stml:Hello App!export default {name:'api-test',methods:{onclick(){let detail = {msg:'Hi'};this.fire('result', detail);}}}
fire方法有兩個(gè)參數(shù)，第一個(gè)參數(shù)為事件名稱，第二個(gè)參數(shù)為要傳遞的自定義數(shù)據(jù)，在父組件監(jiān)聽方法里面通過e.獲取傳遞的數(shù)據(jù) 。
// api-index.stml: methods: {onGetResult(e){console.log(e.detail.msg);}}
4. 聲網(wǎng)組件實(shí)例
了解了以上組件的規(guī)則和用法，就可以封裝自己的組件了。下面看一個(gè)基于聲網(wǎng)模塊，實(shí)現(xiàn)1對1語音通話的組件實(shí)例：
{{item.username }}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: "需要啟用麥克風(fēng)權(quán)限"});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;}});// 多人語音通話，需設(shè)置角色為主播agoraRtc.setClientRole({role: 1}, function (ret) {if (ret.code == 0) {//successconsole.log('設(shè)置主播模式成功')}});agoraRtc.enableAudio((ret) => {if (ret.code == 0) {//successconsole.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: '通話出錯(cuò)！'});}});},fnhangup() {var agoraRtc = api.require('agoraRtc');agoraRtc.leaveChannel(function (ret) {if (ret.code == 0) {//success}});this.data.connected = false;}}};.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;}
AVM.js默認(rèn)使用flex彈性盒子布局，實(shí)現(xiàn)UI時(shí)，應(yīng)充分利用flex彈性布局原理進(jìn)行布局。而實(shí)現(xiàn)聲網(wǎng)語音通話的核心邏輯很簡單：兩個(gè)用戶加入同一個(gè)頻道即可。
本文到此結(jié)束，希望對大家有所幫助。

以聲網(wǎng)組件為例 如何封裝AVM組件？

以聲網(wǎng)組件為例如何封裝AVM組件？