无线真机调试教程

鉴于nvue在PC环境中的weex、uni-app编译引擎对样式支持不好（报错、看不到效果）和摆脱有线调试的困扰，通过百度搜到如何部署无线调试方案。

1、首先下载完整的ADB工具包，总共有四个文件，两个exe后缀，两个dll后缀。
完整的工具包里面会有fastboot文件，是exe后缀的。使用之前，打开工具包看一下就行了，这就叫确认有fastboot，如果没有，那就不是完整的工具包，并把ADB路径部署到环境变量

以下是adb工具包最新Google官方版下载地址：

ADB和Fastboot for Windows

https://dl.google.com/android/repository/platform-tools-latest-windows.zip

ADB和Fastboot for Mac

https://dl.google.com/android/repository/platform-tools-latest-darwin.zip

ADB和Fastboot for Linux

https://dl.google.com/android/repository/platform-tools-latest-linux.zip

ADB工具包详细

部署ADB到环境变量

ADB执行有效

方法(方便简单适用几乎所有设备)
1.首先把我们的手机连接到电脑上记得打开开发者模式。
2.在命令行里cd到我们的sdk下的adb.exe的路径找到我们的adb命令输入 ,输入adb devices查看我们连接的设备

3.使用adb tcpip 8888 设置端口号，5555为默认端口号，也可以设置其它端口号，端口号为需要为4位数

4.拔掉我们的设备，开始无线连接 adb connect
使用adb connect 192.168.3.34:8888， 192.168.3.34为我们手机的ip地址，其中8888是我们自己设的端口号，这个端口号要和adb tcpip 设置的端口号保持一样，如果我们没有自己设置端口号，直接adb connect192.168.3.34就行了，默认使用5555。连接成功提示

取消连接就是 adb disconnect
adb disconnect 192.168.3.34:8888

利用adb无线连接android手机进行调式,无需获得root权限可参考原文
原文：https://blog.csdn.net/lnking1992/article/details/53465183

ADB设置命令行

运行设备菜单有设备显示-nice!!

无线真机投影PC教程

手机无线调试没问题后，下一步就是要把手机的画面投影到PC，简直就是懒人福音（专心做一件事）
这里建议使用虫洞不是广告 https://er.run/#download
使用方法很简单，安装软件后一步一步跟着操作就行记得打开开发者模式

虫洞-手机投影到PC

推流界面优化方案

由于使用nvue开发app都会触碰比较多的坑，在实现最终效果之前先提一下已踩的坑！

cover-view解决方案算是一种对各端平台都比较兼容的方案，但实际效果对live-pusher组件的支持并不理想，并没有很好做到把内容层级放在摄像画面层级之上（可能是我技术没到家），但毕竟我不是去做小程序，只是开发app端，所以又找了另一种解决方案！

cover-view解决方案

拉到cover-view解决方案文档下面，官方做出了相关提示，subNvue原生子窗体解决方案更加适合app端，如果能看到这，恭喜你，发现了宝藏文档

官方的宝藏Tips

subNvue文档

subNvue原生子窗体解决方案说到底就是把每个层级都单独一个页面来写，需要相关的页面配置，这里我把推流用的按钮组单独一个页面btngroup.nvue，注意:(主/子页面都必须是nvue格式)，子页面的背景色必须设置透明

案例代码

push.nvue

<template>
    <view>
        <live-pusher id="livePusher" :url="url" :enable-camera="enableCamera" mode="FHD" :device-position="devicePosition" :orientation="orientation" :style="{height: windowHeight}"></live-pusher>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                url: 'rtmp://vpush.qdd88.cn/live/621FD133-889D-1707-CF0E-83A8A715D412?auth_key=1604361600-0-0-173de9ba8a3db2420d8fa3ee9b90fb23',
                enableCamera: true,
                pusher: null,
                windowHeight: '0px',
                orientation:'vertical',
                devicePosition:'back'
            };
        },
        onReady() {
            this.windowHeight = uni.getSystemInfoSync().windowHeight + 'px';
            this.pusher = uni.createLivePusherContext('livePusher', this);
            this.pusher.startPreview()
        },
        methods: {
            startLive() {
                this.pusher.start({
                    success: a => {
                        console.log('livePusher.start:' + JSON.stringify(a));
                    }
                });
            },
            stopLive() {
                this.pusher.stop({
                    success: a => {
                        console.log(JSON.stringify(a));
                    }
                });
            }
        }
    };
</script>

<style>

</style>

btngroup.nuve

<template>
    <view class="push-btn-group">
        <view class="push-btn">
            <image class="push-btn-img" src="../../static/images/start.png" mode=""></image><text class="push-btn-text">开始直播</text>
        </view>
        <view class="push-btn">
            <image class="push-btn-img" src="../../static/images/camera.png" mode=""></image><text class="push-btn-text">切换镜头</text>
        </view>
        <view class="push-btn">
            <image class="push-btn-img" src="../../static/images/mic-dis.png" mode=""></image><text class="push-btn-text">声音关闭</text>
        </view>
        <view class="push-btn">
            <image class="push-btn-img" src="../../static/images/grid.png" mode=""></image><text class="push-btn-text">更多功能</text>
        </view>
    </view>
</template>

<script>
    export default {

    }
</script>

<style>
    .push-btn-group {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: row;
    }

    .push-btn {
        width: 50px;
    }

    .push-btn-img {
        width: 50px;
        height: 50px;
    }

    .push-btn-text {
        font-size: 12px;
        color: #FFFFFF;
    }
</style>

pages.json

{
    "pages": [{
        "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "demos"
        }
    }, {
        "path": "pages/push/push",
        "style": {
            "navigationBarTitleText": "",
            "enablePullDownRefresh": false,
            "navigationStyle": "custom",
            "app-plus": {
                "subNVues": [{
                    "id": "push-btngroup", // 唯一标识  
                    "path": "pages/push/btngroup", // 页面路径  
                    /*"type": "popup",  这里不需要*/
                    "style": {
                        "position": "absolute",
                        "bottom": "0upx",
                        "width": "100%",
                        "height":"200upx",
                        "background": "transparent"
                    }
                }]
            }
        }
    }],
    "globalStyle": {
        "navigationBarTextStyle": "white",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#007AFF",
        "backgroundColor": "#000000"
    },
    "condition": { //模式配置，仅开发期间生效
        "current": 0, //当前激活的模式(list 的索引项)
        "list": [{
            "name": "", //模式名称
            "path": "", //启动页面，必选
            "query": "" //启动参数，在页面的onLoad函数里面得到
        }]
    }
}

最终效果图

结果还是很理想的，设计和素材都是参考腾讯视频云小程序的！！！
后面章节将继续完善推流的相关功能，重点可能是主/子nvue的通信操作...

最终效果图

(二)用uni-app开发直播推流APP——推流界面优化和无线真机调试

(二)用uni-app开发直播推流APP——推流界面优化和无线真机调试

无线真机调试教程

无线真机投影PC教程

推流界面优化方案

案例代码

最终效果图