uniapp 使用原生子窗體進行視頻聊天

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"現在 uniapp 開發的實時音視頻聊天類的 APP 大部分都要在 nvue 頁面上進行開發。雖然 nvue 與 vue 的區別不是很大，但還是有所差異的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"仔細查看了 uniapp 官網，發現了可以使用原生子窗體進行開發，可以把整個視頻聊天封裝到一個原生子窗體中，方便移植。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"一、原生子窗體 subNVue","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"subNVue","attrs":{}}],"attrs":{}},{"type":"text","text":" 頁面可以和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"vue","attrs":{}}],"marks":[{"type":"strong"}],"attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":" 頁面進行通信","attrs":{}},{"type":"text","text":"，來告知 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"vue","attrs":{}}],"attrs":{}},{"type":"text","text":" 頁面用戶執行的操作。或者通過 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"vue","attrs":{}}],"attrs":{}},{"type":"text","text":" 頁面對 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"subNVue","attrs":{}}],"attrs":{}},{"type":"text","text":" 進行數據和狀態的更新。 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"subNVue","attrs":{}}],"attrs":{}},{"type":"text","text":" 除了與 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"vue","attrs":{}}],"attrs":{}},{"type":"text","text":" 頁面進行通信，還 可以與 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"nvue","attrs":{}}],"marks":[{"type":"strong"}],"attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":" 頁面進行通信","attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"通信實現方式","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"java"},"content":[{"type":"text","text":"// 在 subNVue/vue 頁面註冊事件監聽方法 \n// $on(eventName, callback) \nuni.$on('page-popup', (data) => { \n vm.title = data.title; \n vm.content = data.content; \n}) \n\n// 在 subNVue/vue 頁面觸發事件 \n// $emit(eventName, data) \nuni.$emit('page-popup', { \n title: '我是一個title', \n content: '我是data content' \n});","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"存放位置、相關配置","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"因爲想封裝成一整個模塊，所以建議放在最外層與 pages 文件同級的 paltform\\app-plus\\subNVue 下。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"具體可查看官網 ","attrs":{}},{"type":"link","attrs":{"href":"https://ask.dcloud.net.cn/article/35948","title":null,"type":null},"content":[{"type":"text","text":"https://ask.dcloud.net.cn/article/35948","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"二、開發","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"（1）引入視頻聊天插件","attrs":{}}]},{"type":"numberedlist","attrs":{"start":null,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"使用 anyRTC 提供的 uniapp 插件","attrs":{}}]}]}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://ext.dcloud.net.cn/plugin?id=3661","title":null,"type":null},"content":[{"type":"text","text":"anyRTC音視頻SDK插件","attrs":{}}]}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://ext.dcloud.net.cn/plugin?id=3777","title":null,"type":null},"content":[{"type":"text","text":"anyRTC實時消息SDK插件","attrs":{}}]}]}]}],"attrs":{}},{"type":"numberedlist","attrs":{"start":"2","normalizeStart":"2"},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"註冊 anyRTC 賬號，創建應用獲取appid","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"製作自定義基座","attrs":{}}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":4,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"（2） 配置原生子窗體 subNVue","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"文件位置","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/93/930b0c96075515ac054ff2d4eb8129e2.png","alt":null,"title":"","style":[{"key":"width","value":"50%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"pages.json","attrs":{}}],"attrs":{}},{"type":"text","text":" 中的配置","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/19/19961f45208986376eb056267bcb5cdb.png","alt":"","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"（3）簡易實現","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"java"},"content":[{"type":"text","text":"\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"（4）真機運行","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"簡單使用原生子窗體已經實現了，下次再帶大家把音視頻封裝到一個原生子窗體中吧，大家要多多關注喲！","attrs":{}}]}]}