uniapp连接手机端调试

柔光的暖阳◎ 2023-02-23 14:27 10阅读 0赞

##### 1：新建一个uniapp项目，命名为test。 #####

![format_png][]  
可以看到，在开发工具HBuilderX里面，极速生成的模板目录结构如下  
![format_png 1][]  
打开pages底下的index.vue的组件，开始写代码了，把代码写好，这里随便写了一个例子。

<template>
    	<view>
    		<button type="primary" @click="scanCode()">button</button>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    
    			};
    		},
    		methods: {
    			scanCode() {
    				let that = this;
    				// 允许从相机和相册扫码
    				uni.scanCode({
    					success: function(res) {
    						that.result1 = res.result;
    					}
    				});
    
    
    			}
    		}
    	}
    </script>

##### 2：允许USB调试 #####

需要将手机用充电线连接电脑，并且允许USB调试（这一步很重要，不然HBuilderX搜不到你要调试的手机，无法建立连接。）

![format_png 2][]

如果不会打开USB调试模式，可以自行百度，我的是oppor的手机  
我就查了一下，oppor手机怎么打开USB调试模式.  
https://jingyan.baidu.com/article/93f9803fed1cfbe0e56f554d.html

##### 3：真机调试 #####

打开顶部菜单栏中的“运行”菜单，点击运行，选择运行到手机后者模拟器。

这个时候HBuilderX是自动检测手机是否连接，（如果运行设备为灰色，则说明没有手机没有连接成功）。

连接不成功的原因有很多，比如，手机没有打开usb调试模式，电脑中其他软件占用adb通道等。

![format_png 3][]

连接成功，控制台里面会有这样的提示  
![format_png 4][]

并且在手机端提示安装HBuilderX，同意安装就行了。  
![format_png 5][]

##### 4：调试结果 #####

每次调试的时候，只需要打开HBuilderX，就能同步看到开发工具里面编辑的内容了。

![format_png 6][]

欢迎关注【编程微刊】公众号，回复【领取资源】,500G编程学习资源干货免费送。

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LWRlODIzZDY0MjFhZTcyNTAucG5n?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTMzNTFkZDJiZjdiYzVmODIucG5n?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LWE4YjljODc1NjllODhhNjkucG5n?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTZmZmY1M2ZmYjRiODZmNzUucG5n?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTAxMWU5MmFmYTIzMjMxYzAucG5n?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LThiZDljYTlmZTc3N2YyMjYucG5n?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTY3OTg3ODAyMGI2YWI2NGYucG5n?x-oss-process=image/format,png