(三)用uni-app开发直播推流APP——功能逐步细化完善

直播设置界面美化

由于自己不是设计那块料，所以在DCloud插件市场找来一个热度最高的UI组件库——uViewUI，来重做推流直播设置界面，使用方法如下：

1、uViewUI：

官网：https://uviewui.com/
使用教程：https://uviewui.com/components/downloadSetting.html

2、安装使用

npm install uview-ui

#uView依赖SCSS，您必须要安装此插件，否则无法正常运行。
#如果您的项目是由HBuilder X创建的，相信已经安装scss插件，如果没有，请在HX菜单的 工具->插件安装中找到"scss/sass编译"插件进行安装， 如不生效，重启HX即可
#如果您的项目是由vue-cli创建的，请通过以下命令安装对sass(scss)的支持，如果已安装，请略过。

npm i node-sass -D
npm i sass-loader -D

3、配置步骤

引入uView主JS库
在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。

// main.js
import uView from "uview-ui";
Vue.use(uView);

在引入uView的全局SCSS主题文件
在项目根目录的uni.scss中引入此文件。

/* uni.scss */
@import 'uview-ui/theme.scss';

引入uView基础样式

注意！
在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

<style lang="scss">
    /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
    @import "uview-ui/index.scss";
</style>

4、配置easycom组件模式

此配置需要在项目根目录的pages.json中进行。

温馨提示：uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。
请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。

// pages.json
{
    "easycom": {
        "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
    },
    
    // 此为本身已有的内容
    "pages": [
        // ......
    ]
}

5、实现效果

直播设置界面

subNvue原生子窗体的应用

1、subNvue介绍

subNvue，是 vue 页面的原生子窗体，把weex渲染的原生界面当做 vue 页面的子窗体覆盖在页面上。它不是全屏页面，它给App平台vue页面中的层级覆盖和原生界面自定义提供了更强大和灵活的解决方案。它也不是组件，就是一个原生子窗体总而言之，在nvue中组件分层啥都不管用，必须得用subNvue做分层。

2、subNvue配置

{
    "pages": [{
        "path": "pages/index/index", //首页
        "style": {
            "app-plus": {
                "titleNView": false , //禁用原生导航栏
                "subNVues":[{//侧滑菜单
                    "id": "drawer", //subNVue 的 id，可通过 uni.getSubNVueById('drawer') 获取
                    "path": "pages/index/drawer.nvue", // nvue 路径
                    "style": { //webview style 子集，文档可暂时开放出来位置，大小相关配置
                        "position": "popup", //除 popup 外，其他值域参考 5+ webview position 文档
                        "width": "50%"
                    }

                }, {//弹出层
                    "id": "popup",
                    "path": "pages/index/popup",
                    "style": {
                        "position": "popup",
                        "margin":"auto",
                        "width": "150px",
                        "height": "150px"
                    }

                }, {//自定义头
                    "id": "nav",
                    "path": "pages/index/nav",
                    "style": {
                        "position": "dock",
                        "height": "44px"
                    }

                }]
            }
        }
    }]
}

3、subNvue与nvue与vue之间的数据通信

官方文档给出的页面间通信方案如下：https://uniapp.dcloud.io/api/window/communication
注意事项
uni.$emit、 uni.$on 、 uni.$once 、uni.$off 触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等使用时，注意及时销毁事件监听，比如，页面 onLoad 里边 uni.$on 注册监听，onUnload 里边 uni.$off 移除，或者一次性的事件，直接使用 uni.$once 监听

最后总结

基于uni-app开发推流直播APP案例已经基本完成，贴出案例项目代码仓库：https://gitee.com/Lione/live-uniapp
关于一些uni-app的小bug已经反馈到DCloud社区，对该项目有兴趣的小伙伴欢迎下方留言！！！